javascript运行上下文 问题

Question

varelement=document.getElementById('element');
varuser={
firstname:'Wilson',
greeting:function(){
alert('Mynameis'+this.firstname);
}
};
//Attachuser.greetingasacallback
element.addEventListener('click',user.greeting);
//alert=>'Mynameisundefined'
为什么运行的时候，拿不到上下文的值firstname的值

Answer 1

这不是上下文件的问题，是this的问题。像下面这么改下就对了：element.addEventListener('click',user.greeting.bind(user));

Answer 2

问题是怎么出现的JS中的this只与函数调用方式有关，与定义时的上下文，函数作用域，都无关。有如下情况：user.greeting()//this-->uservarhandler=user.greeting;handler()//this-->window当程序执行到element.addEventListener('click',user.greeting);user.greeting作为addEventListener的第二个参数，假设这个参数就叫handler。可以想象，在addEventListener的内部，进行了类似varhandler=user.greeting;//这步在传递参数时完成handler()//this-->window的过程，this的指向就发生了改变。如何修复this的指向只与函数调用方式有关，函数调用方式一共四种：func();obj.func();func.apply/call();newfunc();要修复这个问题，需要用到apply/call这种调用方式。我们可以想象bind是这样一个函数：functionbind(func,target){returnfunction(){func.apply(target,arguments)；}}Function.prototype['bind']=function(target){returnbind(this,target);}这样，就可以使用element.addEventListener('click',user.greeting.bind(user));来解决这个问题了。当然，这里的bind是非常简化、不可用的，比如可以看到bindreturn的函数已经不是原函数了，为了保持一致性应该绑定原型链。这一系列完整的操作在MDN文档中都可以看到。