Javascript - Scopes

Question

<script type="text/javascript">
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;
 </script> 

为什么这个脚本返回未定义的，而不是42？这就是我所理解的：

( 1)在网页加载时，我们运行'addhandler‘方法。

2)在该方法中，为BipComputer变量创建了deep_thought实例。另外，我们在答案处设置了42 ( BipComputer类中的公共变量)

3)然后为按钮设置引用(在html文件中)

4)按钮按一下就启动了，魔法就来了：

在我看来，应该打印出数字42，因为我们只是在第2步中为此做了设置，但是变量不是“未定义的”吗？

另一个问题是，在没有参数可传递的情况下，在没有()的情况下运行方法和使用()之间有什么区别。就像加载机方法一样。

也许这个问题很简单，但是我以前用java和php编程，现在面向javascript编程的思维方式对我来说很奇怪。函数看起来像类，类看起来像函数，没有真正的构造函数等等。

但没关系，让我们回到问题上来:)

我真的很感谢你的帮助。

@Edit

多亏了@lbstr，我找到了有用的链接，对于每个问同样问题的人来说都是有用的。http://web.archive.org/web/20080209105120/http://blog.morrisjohns.com/javascript

Answer 1

当启动单击处理程序时，this是按钮。以下是你想要做的事：

function BigComputer(answer) {
    this.the_answer = answer;
    var self = this;
    this.ask_question = function() {
        alert(self.the_answer);
    };
}

这一切都是由于关闭的美妙。许多js球迷都认为这是语言中最好的部分。读到所有关于他们的事。

区分范围和this是很重要的。尽管变量由函数限定作用域，但在给定的作用域链中，this不一定相同。一个简单的例子是，我可以用我想要的this值调用任何我想要的函数：

someFunc.call(someThis); // call someFunc, using someThis for this

对于事件处理程序，this通常是事件起源的元素。这很好，因为页面上可能有几个按钮，您想要对单击的按钮做些什么。

Answer 2

问题是在你分配

the_button.onclick = deep_thought.ask_question;

单击按钮时，将调用分配给onclick属性的函数，并将this绑定到该按钮。您可以(至少)以三种方式解决这个问题：

• 通过重写函数(如在lbstr的答案中)
• 通过使用bind创建一个使用所需的this执行ask_question的新函数： the_button.onclick = deep_thought.ask_question.bind(deep_thought)； 请注意，bind是JS1.8.5的新版本；上面的链接对于较老的JS引擎有一个垫片。
• 通过编写一个闭包在ask_question中获得正确的ask_question： the_button.onclick =函数(){ deep_thought.ask_question()；}； 编辑:正如RobG在评论中指出的，这段代码在某些浏览器(特别是许多版本的MSIE)中造成内存泄漏。解决方法是完全消除变量the_button： document.getElementById('thebutton').onclick =函数(){ deep_thought.ask_question()；}； 有关其他方法，请参见本教程。

Answer 3

当您分配要从按钮单击执行的ask_question()时，“此”将是按钮的上下文，而不是基于构造函数的deep_thought变量的上下文。如果您从this.the_answer中删除"this“并使其变为var，您将得到42的警报。