JavaScript范围说明

JavaScript Scope Clarification

本文关键字:说明 范围 JavaScript      更新时间:2023-10-26

我已经阅读了几乎每一篇关于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;

这篇文章陈述了... an event handler[,] runs in a different context than when it’s executed as an object method.,所以,如果我要正确理解,那么在脚本的对象方法的上下文中对ask_question方法的调用是deep_thought.ask_question,使this成为deep_thought。但是,当DOM中的事件被触发时,调用链会变为DOMelement.eventHandler.deep_thought.ask_question,使this成为DOMelement

这是正确的!'事件处理程序中的this是您绑定到的元素。在这种情况下,它将是the_button。由于the_button没有the_answer属性,因此警报将为"未定义"。

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

查看此输出:

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