关于javascript中this关键字(翻译+自我理解)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了关于javascript中this关键字(翻译+自我理解)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4586字，纯文字阅读大概需要7分钟。

内容图文

var name = 'hong' 
var obj = { 
name: 'ru', 
getName: function(){ 
return function(){ 
return this.name; 
}; 
} 
} 
alert(obj.getName()()); 
 
这里也不卖关子了，执行

var name = 'hong' 
var obj = { 
name: 'ru', 
getName: function(){ 
var that = this; 
return function(){ 
return that.name; 
}; 
} 
} 
alert(obj.getName()()); 
 
执行

/* -- test1 -- */ 
function test1 () { 
this.title = 'me'; 
alert(window['title']); 
alert(this === window); //true 
} 
test1(); 

 
执行

<div id="o" style="width:50px;height:50px;border:4px solid #333">me!</div> 
<script type="text/javascript"> 
/* -- test1 -- */ 
function test1 () { 
this.title = 'me'; 
alert(window['title']); 
alert(this === window); 
} 
var o = document.getElementById('o'); 
o.onclick = test1; 
</script> 
 
点击div

o.onclick = test1(); // 注意：这里加了个括号 
 
把上面代码的最后一句改成这样后，点击div运行的

o.onclick = test1; 
 
这样的方式的话，其实是把test1() 这个函数Copy给了对象 o 的 onclick 属性。因此test1的拥有者变成了 o 这个对象。 
　　如果通过 
 代码如下:

o.onclick = test1(); 
 
这样的方式的话，本质上是指当获取到点击事件的handle时，指引它去执行test1()函数。注意是指引去执行而不是赋给它去执行。test1()的拥有者没变，还是window. 

　　【函数的Refer】 
　　同上，我们通过inline的方式把调用写到html里来调用的话，还是refer的方式 
 代码如下:

<div id="o" style="width:50px;height:50px;border:4px solid #333" onclick="test1()">me!</div> 
 
点击div执行结果还是表示this指向window。 
　　【函数copy的例子】 
 代码如下:

element.onclick = doSomething 
element.addEventListener('click',doSomething,false) 
element.onclick = function () {this.style.color = '#cc0000';} 
<element onclick="this.style.color = '#cc0000';"> 
 
这几种方式都会使this的指向变为当前调用的object。 
　　【函数refer的例子】 
 代码如下:

element.onclick = function () {doSomething()} 
element.attachEvent('onclick',doSomething) 
<element onclick="doSomething()"> 
 
这几种方式都不会改变函数的拥有者，其中要注意的是addEventListener和attachEvent是不一致的，因为attachEvent其实是建立了一个reference到了doSomething，而不是copy了这个函数。 

　　【用call的方式】 
刚才我们说了，写成<element onclick="test()">的方式还是不能让test()的拥有者变成<element>,那我们可以这样做 
 代码如下:

<element onclick="test(this)"> 
function (o) { 
o.title = 'me'; 
} 
 
这样显式的调用是可以的。或者，用call或apply这种对象冒充的继承方式也可以 
 代码如下:

<element onclick="test.call(this)"> 
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中this关键字(翻译+自我理解)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端