JavaScript范围澄清

时间:2013-11-25 19:44:12

标签: javascript event-handling scope this

我一直在阅读每篇关于JavaScript范围的文章,以便更好地理解它。我想在最后完全理解它。我目前正在阅读这篇文章:http://www.digital-web.com/articles/scope_in_javascript/我刚刚阅读了“并发症”部分(稍微超过了一半)并认为它非常有用,但还不够清楚。

它使用以下代码并考虑onclick的{​​{1}}行为:

the_button

文章指出function BigComputer(answer) { this.the_answer = answer; this.ask_question = function () { alert(this.the_answer); } } function addhandler() { var deep_thought = new BigComputer(42), the_button = document.getElementById('thebutton'); the_button.onclick = deep_thought.ask_question; } window.onload = addhandler; 所以,如果我要正确理解,那么在脚本的对象方法的上下文中调用... an event handler[,] runs in a different context than when it’s executed as an object method.方法是ask_question,使{{1} }} deep_thought.ask_question。但是当触发DOM中的事件时,调用链会更改为this deep_thought DOMelement.eventHandler.deep_thought.ask_question

1 个答案:

答案 0 :(得分:2)

这是对的!事件处理程序中的'this'是您绑定的元素。在这种情况下,它将是the_button。警报将“未定义”,因为the_button没有the_answer属性。

您可以在以下位置查看示例:http://jsfiddle.net/zG7KR/

看看这会输出什么:

this.ask_question = function () { 
     alert(this.the_answer);
};