JavaScript 范围澄清

Question

我已经阅读了几乎所有我能接触到的关于 JavaScript 作用域的文章，以便更好地理解它。我想到最后完全理解它。我目前正在阅读这篇文章:http://www.digital-web.com/articles/scope_in_javascript/我刚刚读完“并发症”部分(读了一半多一点)，认为它非常有帮助，但不够清晰。

它使用以下代码并考虑 the_button 的 onclick 行为:

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;

文章指出...事件处理程序[,]在与作为对象方法执行时不同的上下文中运行。因此，如果我理解正确的话，那么调用脚本对象方法上下文中的 ask_question 方法是 deep_thought.ask_question，使得 this deep_thought。但是，当触发 DOM 中的事件时，调用链将更改为 DOMelement.eventHandler.deep_thought.ask_question 使得 this DOMelement?

Answer 1

这是正确的!事件处理程序中的“this”是您绑定(bind)到的元素。在本例中，它将是 the_button。由于 the_button 没有 the_answer 属性，该警报将处于“未定义”状态。

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

看看它输出什么:

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