Dar*_*iss 3 javascript oop methods event-handling
<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>
Run Code Online (Sandbox Code Playgroud)
为什么这个脚本返回undefined而不是42?这就是我如何理解:
1)在网页加载时我们运行'addhandler'方法.
2)在此方法中,我们为deep_thought变量创建BipComputer实例.我们在答案中设置了42(BipComputer类中的公共变量)
3)然后我们设置按钮的参考(在html文件内)
4)点击按钮激活,这里有魔术:
在我看来应该打印出来编号42,因为我们刚刚在第2步中为此设置了,但是变量是"Undefined"吗?
另一个问题是,在没有()(没有参数传递)和()的情况下运行方法有什么区别.[像addhandler方法].
也许这个问题很简单,但我过去常常用java和php编程,现在javascript导向编程的思维方式对我来说很奇怪.函数看起来像类,类看起来像函数,没有真正的构造函数和东西.
但没关系,让我们回到问题:)
我真的很感激任何帮助.
@编辑
感谢@lbstr我找到了有用的链接,对于那些问我同样问题的人. http://web.archive.org/web/20080209105120/http://blog.morrisjohns.com/javascript_closures_for_dummies
当点击处理程序被触发时,this是按钮.这是你想要做的:
function BigComputer(answer) {
this.the_answer = answer;
var self = this;
this.ask_question = function() {
alert(self.the_answer);
};
}
Run Code Online (Sandbox Code Playgroud)
封闭的精彩使这一切成为可能.许多js粉丝都认为这是该语言的最佳部分.阅读所有关于他们的信息.
区分范围很重要this.虽然变量是按函数确定的,this但在给定的范围链中不一定相同.一个简单的例子是我可以使用我想要的任何值来调用我想要的任何函数this:
someFunc.call(someThis); // call someFunc, using someThis for this
Run Code Online (Sandbox Code Playgroud)
对于事件处理程序,this通常是事件源自的元素.这很好,因为您可能在页面上有几个按钮,并且您想要对单击的按钮执行某些操作.
| 归档时间: |
|
| 查看次数: |
83 次 |
| 最近记录: |