轻松学习JavaScript二十九：JavaScript中的this详解 · Web前端HTML+CSS+JS初级入门

这几天在看很多的JS的代码，多次出现this关键字，有时候表示不理解，就仔细看了这一方面的知识。在JavaScript语言中，this的定义是：this是包含它的函数作为方法被调用时所属的对象。说明：这句话有点咬嘴，但一个多余的字也没有，定义非常准确，我们可以分3部分来理解它： 1，包含它的函数。 2，作为方法被调用时。 3，所属的对象。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。 this是Javascript语言的一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，比如： ~~~ function to_green(){ this.style.color="green";//this在这里指window对象 } to_green();//函数调用 ~~~ 我们来分析上面的函数：包含this的函数是to_green()，该函数作为方法被调用了。函数所属的对象是谁，默认情况下是window对象。因此this就是指的window对象了，to_green()方法中执行语句也就变为：window.style.color="green";这让window对象很上火，因为它并没有style这么个属性，所以该语句也就没什么作用。我们可以再看一个切合实际的例子： ~~~ window.load=function(){ var example=document.getElementById("example"); example.onclick=to_green;//赋值给某对象的事件处理函数 function to_green(){ this.style.color="green";//这里的this代表example这个对象 } } ~~~ 我们再次分析：我们知道通过赋值操作，example对象的onclick事件得到to_green()方法，那么包含this的函数就是onclick事件，那么this就是example引用的html元素对象。因此this的环境可以随着函数被赋值给不同的对象而改变！趁着上面的例子我们具体实现一下： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS</title> <style type="text/css"> #example { width:100px; height:100px; background-color:red; } </style> <script type="text/javascript"> window.onload=function(){ var example=document.getElementById("example"); example.onclick=to_green; function to_green(){ this.style.backgroundColor="green";//这里的this表示div元素对象 } } </script> </head> <body> <div id="example">点击变绿</div> </body> </html> ~~~ 点击前的效果： ![](https://box.kancloud.cn/2016-04-28_572155933f14b.jpg) 点击后的效果： ![](https://box.kancloud.cn/2016-04-28_5721559358a5b.jpg) 下面分四种情况，详细讨论this的用法。情况一：纯粹的函数调用这是函数的最通常用法，属于全局性调用，因此this就代表window对象。请看下面这段代码，它的运行结果是1。 ~~~ function test(){ 　this.x = 1; 　alert(this.x); } test();//输出：1 ~~~ 为了证明this就是window对象，可以对代码做一些改变： ~~~ var x=1;//全局变量 function test(){ 　alert(this.x); } test();//输出：1 ~~~ 运行结果还是1。再变一下： ~~~ var x=1;//全局变量 function test(){ 　this.x=0; //全局变量x重新赋值为1 } test();//函数调用 alert(x);//输出：0 ~~~ 情况二：作为对象方法的调用函数还可以作为某个对象的方法调用，这时this就指这个上级对象。 ~~~ function test(){ 　alert(this.x); } var obj={};//定义一个对象 obj.x=1; obj.m=test; obj.m();//输出：1 ~~~ 由上述的test()作为方法赋值给obj对象，说明this在这里指的是obj。情况三作为构造函数调用所谓构造函数，就是通过这个函数生成一个新对象(object)。这时，this就指这个新对象。 ~~~ function test(){ 　this.x=1; } var obj=new test()//定义一个对象 alert(obj.x);//输出：1 ~~~ 运行结果为1。为了表明这时this不是全局对象，再次对代码做一些改变： ~~~ var x=2;//全局变量 function test(){ 　this.x=1; } var obj=new test()//定义一个对象 alert(obj.x);//输出：1 alert(x);//输出：2，表示全局变量没有改变 ~~~ 运行结果为2，表明全局变量x的值根本没变。情况四 apply调用 apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。 ~~~ var x=0; function test(){ 　alert(this.x); } var obj={};//定义一个对象 obj.x=1; obj.m=test; obj.m.apply();//输出：0 ~~~ apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把上面的代码修改为 ~~~ var x=0; function test(){ 　alert(this.x); } var obj={};//定义一个对象 obj.x=1; obj.m=test; obj.m.apply(obj);//输出：1 ~~~ 运行结果就变成了1，证明了这时this代表的是obj对象。看完了这些基本也是JS基础教程里面的详解，对于一些高级的JS教程里还有更详细的解释和实例。如果想要了解更详细的this机制，可以看下面的三篇文章，自认为现在还是不太了解，在后面的学习需要加强对this的了解。这三篇文章来自CSDN[YvetteLau](http://blog.csdn.net/liuyan19891230?viewmode=list)的博文：一[JavaScript的this词法](http://blog.csdn.net/liuyan19891230/article/details/50011901) 二[JavaScript的this词法（二）](http://blog.csdn.net/liuyan19891230/article/details/50034519) 三[JS this词法（三）](http://blog.csdn.net/liuyan19891230/article/details/50058551)