关于javascript中this关键字(翻译+自我理解)_javascript技巧
程序员文章站
2022-04-13 08:07:48
...
下文有大概70%的内容出自http://www.quirksmode.org/js/this.html,另外30%是我自己对它的理解和感想。希望能对有需要的人一点帮助。。。
首先,先看一个很典型的关于this关键字题目:
var name = 'hong'
var obj = {
name: 'ru',
getName: function(){
return function(){
return this.name;
};
}
}
alert(obj.getName()());
这里也不卖关子了,执行结果为:hong
稍微改下代码:
var name = 'hong'
var obj = {
name: 'ru',
getName: function(){
var that = this;
return function(){
return that.name;
};
}
}
alert(obj.getName()());
执行结果为:ru
执行结果为:ru
关于出现这种结果的原因,下面会细细讨论。
【函数的拥有者】
要解释this,要先说这个概念。在JavaScript里,this始终指向我们当前正在执行的函数的“拥有者”。更为确切的说:是指向把这个函数作为方法的对象。
这句话怎么理解,我们可以看看下面的例子:
/* -- test1 -- */
function test1 () {
this.title = 'me';
alert(window['title']);
alert(this === window); //true
}
test1();
执行结果为:me, true
在上例中,this是指向window对象的。并把window这个对象的title属性写为'me',因为test1是个*函数,所以它的拥有者是window对象,或者说它是window对象的一个方法。这个应该不难理解。比如上面调用test1()时,也可以写成 window.test1();这样的明了了。
接下来,我们建一个div,并把test1作为方法赋给div的onclick属性:
点击div结果为:undefined, false; 同时我们用firebug可以看到‘me'这个属性值其实是被赋给了id为‘o'的这个HtmlObject
显而易见,此时this指向了这个div,也就是说,test1()的拥有者变成了div这个HtmlObject,或者说它变成了div的onclick方法来调用。这种情况应该还是容易理解的。
下面我们接着改代码,就改一个地方:
o.onclick = test1(); // 注意:这里加了个括号
把上面代码的最后一句改成这样后,点击div运行的结果为:me, true
变成了和第一种情况一样了,this指向了window。有人会纳闷,觉得没什么区别,其实是有区别的。这里涉及到函数的copy和refer的问题。
【函数的Copy】
如果通过
o.onclick = test1;
这样的方式的话,其实是把test1() 这个函数Copy给了对象 o 的 onclick 属性。因此test1的拥有者变成了 o 这个对象。
如果通过
o.onclick = test1();
这样的方式的话,本质上是指当获取到点击事件的handle时,指引它去执行test1()函数。注意是指引去执行而不是赋给它去执行。test1()的拥有者没变,还是window.
【函数的Refer】
同上,我们通过inline的方式把调用写到html里来调用的话,还是refer的方式
点击div执行结果还是表示this指向window。
【函数copy的例子】
element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
这几种方式都会使this的指向变为当前调用的object。
【函数refer的例子】
element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
这几种方式都不会改变函数的拥有者,其中要注意的是addEventListener和attachEvent是不一致的,因为attachEvent其实是建立了一个reference到了doSomething,而不是copy了这个函数。
【用call的方式】
刚才我们说了,写成的方式还是不能让test()的拥有者变成,那我们可以这样做
function (o) {
o.title = 'me';
}
这样显式的调用是可以的。或者,用call或apply这种对象冒充的继承方式也可以
function test () {
this.title = 'me';
}
这也是对象冒充最典型的方式。
【*变量问题】
写了这么长,我们还是回到最开始的那个问题:
var name = 'hong'
var obj = {
name: 'ru',
getName: function(){
return function(){
return this.name;
};
}
}
alert(obj.getName()());
为什么这种方式得到的结果会是:hong 呢?重点在
return function(){
return this.name;
};
对比一下上面写的函数refer的例子,不难发现,返回的这个匿名函数的调用方式和onclick = function () {doSomething()} 如出一辙。所以这种方式并不会改变这个function的拥有者,它虽然是个嵌套函数,但是它的声明却是*的。其中的this指向的是window。
而第二种方式是强制在getName()中把this赋给了that,也就是说,that.name其实和getName()中的this.name是一样的。而在getName的上下文中,它的拥有者是obj这个对象,所以this会指向obj,故this.name === obj.name;
绕了这么一大圈不知道有没有把各位绕明白。
其实可以这样总结:在this所在的函数上下文中,如果这个函数不是以“方法”的形式被调用的话,那么这个this会指向window对象,否则会指向这个函数的拥有者。
首先,先看一个很典型的关于this关键字题目:
复制代码 代码如下:
var name = 'hong'
var obj = {
name: 'ru',
getName: function(){
return function(){
return this.name;
};
}
}
alert(obj.getName()());
这里也不卖关子了,执行结果为:hong
稍微改下代码:
复制代码 代码如下:
var name = 'hong'
var obj = {
name: 'ru',
getName: function(){
var that = this;
return function(){
return that.name;
};
}
}
alert(obj.getName()());
执行结果为:ru
执行结果为:ru
关于出现这种结果的原因,下面会细细讨论。
【函数的拥有者】
要解释this,要先说这个概念。在JavaScript里,this始终指向我们当前正在执行的函数的“拥有者”。更为确切的说:是指向把这个函数作为方法的对象。
这句话怎么理解,我们可以看看下面的例子:
复制代码 代码如下:
/* -- test1 -- */
function test1 () {
this.title = 'me';
alert(window['title']);
alert(this === window); //true
}
test1();
执行结果为:me, true
在上例中,this是指向window对象的。并把window这个对象的title属性写为'me',因为test1是个*函数,所以它的拥有者是window对象,或者说它是window对象的一个方法。这个应该不难理解。比如上面调用test1()时,也可以写成 window.test1();这样的明了了。
接下来,我们建一个div,并把test1作为方法赋给div的onclick属性:
复制代码 代码如下:
me!
点击div结果为:undefined, false; 同时我们用firebug可以看到‘me'这个属性值其实是被赋给了id为‘o'的这个HtmlObject
显而易见,此时this指向了这个div,也就是说,test1()的拥有者变成了div这个HtmlObject,或者说它变成了div的onclick方法来调用。这种情况应该还是容易理解的。
下面我们接着改代码,就改一个地方:
复制代码 代码如下:
o.onclick = test1(); // 注意:这里加了个括号
把上面代码的最后一句改成这样后,点击div运行的结果为:me, true
变成了和第一种情况一样了,this指向了window。有人会纳闷,觉得没什么区别,其实是有区别的。这里涉及到函数的copy和refer的问题。
【函数的Copy】
如果通过
复制代码 代码如下:
o.onclick = test1;
这样的方式的话,其实是把test1() 这个函数Copy给了对象 o 的 onclick 属性。因此test1的拥有者变成了 o 这个对象。
如果通过
复制代码 代码如下:
o.onclick = test1();
这样的方式的话,本质上是指当获取到点击事件的handle时,指引它去执行test1()函数。注意是指引去执行而不是赋给它去执行。test1()的拥有者没变,还是window.
【函数的Refer】
同上,我们通过inline的方式把调用写到html里来调用的话,还是refer的方式
复制代码 代码如下:
me!
点击div执行结果还是表示this指向window。
【函数copy的例子】
复制代码 代码如下:
element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
这几种方式都会使this的指向变为当前调用的object。
【函数refer的例子】
复制代码 代码如下:
element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
这几种方式都不会改变函数的拥有者,其中要注意的是addEventListener和attachEvent是不一致的,因为attachEvent其实是建立了一个reference到了doSomething,而不是copy了这个函数。
【用call的方式】
刚才我们说了,写成
复制代码 代码如下:
function (o) {
o.title = 'me';
}
这样显式的调用是可以的。或者,用call或apply这种对象冒充的继承方式也可以
复制代码 代码如下:
function test () {
this.title = 'me';
}
这也是对象冒充最典型的方式。
【*变量问题】
写了这么长,我们还是回到最开始的那个问题:
复制代码 代码如下:
var name = 'hong'
var obj = {
name: 'ru',
getName: function(){
return function(){
return this.name;
};
}
}
alert(obj.getName()());
为什么这种方式得到的结果会是:hong 呢?重点在
复制代码 代码如下:
return function(){
return this.name;
};
对比一下上面写的函数refer的例子,不难发现,返回的这个匿名函数的调用方式和onclick = function () {doSomething()} 如出一辙。所以这种方式并不会改变这个function的拥有者,它虽然是个嵌套函数,但是它的声明却是*的。其中的this指向的是window。
而第二种方式是强制在getName()中把this赋给了that,也就是说,that.name其实和getName()中的this.name是一样的。而在getName的上下文中,它的拥有者是obj这个对象,所以this会指向obj,故this.name === obj.name;
绕了这么一大圈不知道有没有把各位绕明白。
其实可以这样总结:在this所在的函数上下文中,如果这个函数不是以“方法”的形式被调用的话,那么这个this会指向window对象,否则会指向这个函数的拥有者。
推荐阅读
-
JavaScript中的this关键字介绍与使用实例_javascript技巧
-
JavaScript中关于console.log调试的技巧分享
-
理解JavaScript中的对象 推荐_javascript技巧
-
理解JavaScript中的对象 推荐_javascript技巧
-
理解JAVASCRIPT中hasOwnProperty()的作用_javascript技巧
-
调试Javascript代码(浏览器F12及VS中debugger关键字)_javascript技巧
-
深入理解Javascript中的this关键字
-
5分钟理解JavaScript中this用法分享_javascript技巧
-
关于IE中getElementsByClassName不能用的问题解决方法_javascript技巧
-
javascript中关于&& 和 || 表达式的小技巧分享_javascript技巧