js中的this关键字

更新时间:2023-06-26 16:03:47 阅读: 评论:0

几天前,我写了一篇关于面向方面的JavaScript的文章,说明了如何利用包装器来替换给定的函数或方法。为了全面地理解这一概念,正确理解JavaScript对其关键字“this”的处理是很有帮助的。如何在JavaScript各种各样的上下文中确定this指的是什么,本文将给出一个简单概要。
让我们从下面 Bob 的例子开始:
认为英文Js代码 
var Bob = { 
山东大学威海分校继续教育学院name: "Bob", 
greet: function() { 
alert( "Hi, my name is " + this.name ); 
}; 
var Bob = {
pwned
name: "Bob",
greet: function() {
plant
alert( "Hi, my name is " + this.name );
}
};    在这里,我们创建了一个拥有两个成员的Object实例,一个简单的字符name,和一个包含对name引用的方法greet,当执行 ()方法时,greet()函数用Bob作为this的对象。现在,让我们来看看同样的()在新的对象上执行会如何:
Js代码 
var Alice = { 
name: "Alice", 
greet:  
}; 
var Alice = {
name: "Alice",
greet:
};    考虑下面哪一个才是()的输出呢?
Js代码 
1.  "Hi, my name is Bob", or 
2. "Hi, my name is Alice" 
1.  "Hi, my name is Bob", or
2. "Hi, my name is Alice"    如果你选择的是“2”,对了!Bob的greet函数中“this.name”的直到函数真正执行时才会被解析,所以,当()被调用时,函数greet()的this被设置为了Alice。但是,如果调用函数本身,而不是作为某个对象的方法,会发生什么呢?看看下面这个:
Js代码 
var unboundGreet = ; 
unboundGreet(); 
var unboundGreet = ;
unboundGreet();    你预测函数unboundGreet()会输出什么呢?答案是“"Hi, my name is”。这是因为当一个未绑定的函数被调用时,“this”被设置为了全局对象window,而window.name并没有定义,所以就产生空字符。
下面的例子你将会看到隐含的未绑定会令调试很头痛:
2016年4月23日Js代码 
we will always love youtTimeout( , 1000 ); // 1 cond from now 
favorite sporttTimeout( , 1000 ); // 1 cond from now    开发者可能希望()会在一秒后调用,它绑定到了Bob上就会输出“Hi, my name is Bob”,但是这种预期并没有出现,相反,这个greet()方法只能称为未绑定,其输出结果同unboundGreet()是一样的。下面这个等效的代码或许能更清楚地说明其中的原由:
Js代码 
var unboundGreet = ; 
tTimeout( unboundGreet, 1000 ); 
var unboundGreet = ;
tTimeout( unboundGreet, 1000 );    在这里,很明显,在执行时间开始(一秒后)时,函数greet()是一个未绑定的。当你把一个对象的方法设为一个事件处理器时,相同情况也会发生。看看下面的HTML:
Html代码 
<a id="clickme" href="">Greetings!</a> 
<a id="clickme" href="
">Greetings!</a>    添加如下的JavaScript:
Js代码 
解决隐含未绑定的问题方法就是创建一个函数,用它来包装无范围的方法(the bound method)。大多数JavaScript库都包含了这样的助手,多数时候是通过向Function.prototype添加一个bind方法来完成的。
这里就不用这种方式,下面用一个简单的例子说明如何建仓这样的包装器(wrapper)。
advent
Js代码 
var bobsGreet = function() { 
<(); 
}; 
tTimeout( bobsGreet, 1000 ); 
var bobsGreet = function() {
<();
};
viaton
tTimeout( bobsGreet, 1000 );    或者更简单一点,
Js代码 
tTimeout( function(){ 
<(); 
}, 1000 ); 
tTimeout( function(){
<();
productionmanager
}, 1000 );    这就是本文的全部内容了。

本文发布于:2023-06-26 16:03:47,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/158434.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:方法   绑定   函数
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图