js开发：javascript中的this

今天上午主要学习了js中的 this ,因为之前学习面向对象时，this这个东西出现的还是很频繁的，理解的很不透彻，感觉老被Java的思想带进坑里，所以对它特别关注。

首先贴一个大神的一篇博客，我是通过这篇博客对this的认识和了解有了很大的提升，下面是传送门

foocoder----详解JavaScript中的this

首先，解释一下this到底是个什么东西。我找到的解释是这样的（读起来有点绕）

this是包含它的函数作为方法被调用时所属的对象。

this是包含它的函数作为方法被调用时所属的对象。

this是包含它的函数作为方法被调用时所属的对象。

重要的事情说三篇！下面列举一下this出现的几种情况。

第一种情况，全局代码中的this

[javascript]  view plain  copy

1. alert(this)//window  

第二种情况， 普通的函数中调用的this（我说的普通，就是表示大家经常会写出来的那种。。。就是在全局作用域中调用的函数，例子如下）。

[javascript]  view plain  copy

1. function fooCoder(x) {  
2.     this.x = x;  
3. }  
4. fooCoder(2);  
5. alert(x);// 全局变量x值为2  

这里的this包含在 fooCoder 函数中，而函数是被直接调用的（也就是在window中调用的），所以这个this指向window

第三种情况，构造函数中的this（之前见过许多次）

[javascript]  view plain  copy

1. function Person(name){    
2.      this.name = name;    
3. };    
4.   
5. var tom = new Person("tom");  

这里的this 指向的是通过构造函数 new 出来的那个tom对象。因为tom调用了 this所在的Person函数。

第四种情况，对象的方法中调用的this

[javascript]  view plain  copy

1. Person.prototype.say = function (){    
2.      console.log(this.name +" say hello~");    
3. }    

这里的this 指向的是调用这个方法的对象。例如tom.say()，这时this指向的是tom。原理同上

第五种情况，this出现在内部函数中调用  类似这样

[javascript]  view plain  copy

1. this.name = "jerry";  
2. Person.prototype.sayHello = function(){  
3.   
4.     sayfun = function(){  
5.         alert(this.name+" hello")  
6.     }  
7.   
8.     sayfun();  
9.   
10.     //alert(this.name);  
11. }  
12.   
13. var tom = new Person("tom");  
14. tom.sayHello();//jerry hello  

最外层的this就是第一种情况所说的全局环境直接调用this，这时候this就是window。

调用创建出来的对象 tom上的sayHello()函数，函数中包含一个内部函数sayfun()，这个内部函数中的this本来应该代表的是tom，但是当你运行程序后就发现alert 出来的 是 "jerry hello",就说明 这里的this 指向了window。

为什么会这样呢？  首先找找看到底是谁调用了 sayfun()函数。这里可能会误解为是tom这个对象调用了sayfun函数，其实真相是 tom调用了sayHello函数，而sayHello函数内部执行了sayfun函数，并不是tom调用的。那是谁调用的？这种直接调用的一般都是window干的。所以这里的this还是指向window的。

如果想要实现想要的效果，让this指向tom,可以进行这样分析一下：

tom调用了sayHello函数，那么sayHello函数中的this就还是指向tom的。而sayfun作为sayhello函数的内部函数是可以访问到sayhello函数的作用域的，所以我们在sayhello函数中保存一下this（比如把他保存为that）就可以让sayfun访问到这个保存的值。代码实现如下：

[javascript]  view plain  copy

1. function Person(name){  
2.     this.name = name;  
3. }  
4.   
5. this.name = "jerry";  
6. Person.prototype.sayHello = function(){  
7.     var that = this;  
8.     sayfun = function(){  
9.         alert(that.name+" hello")  
10.     }  
11.   
12.     sayfun();  
13.   
14.     //alert(this.name);  
15. }  
16.   
17. var tom = new Person("tom");  
18. tom.sayHello();//tom hello  

第六种情况，在apply(),call()这两个函数中的this。一般的实现是这样的

[javascript]  view plain  copy

1. fun.call( this [，arg1，arg2，… ] );  // 参数列表，arg1，arg2，...  
2. fun.apply(this [，argArray] );     // 参数数组，argArray  

两者都是将某个函数绑定到某个具体对象上使用。这种情况之后下一篇专门分析。

除了以上几种情况外，还有关于事件处理函数中的this，也比较特殊，但是如果掌握里上面理解this的方法，也会变得很轻松。这部分内容我参考了这篇博客

事件处理函数的this ---yxc_gdut

浏览器有三种添加事件监听的方式。

第一种：直接在标签内写 οnclick=“fn” 

第二种：在js中 οnclick=fn

第三种：在js中 用el.attachEvent或者el.addEventListener()

 

三种方式添加的事件处理函数运行的scope是不同的，不同浏览器也不尽相同。

IE

• js: el.onclick = fn ,fn的this->el
• 在div标签中 onclick = "fn()" ,fn的this->window
• js: el.attachEvent('onclick',fn); ,fn的this->window

Firefox、Chrome、Opera

• js: el.onclick = fn ,fn的this->el
• 在标签中 onclick = "fn()" ,fn的this->window (相当于执行eval())
• js: el.addEventListener('onclick',fn); ,fn的this->el

综上总结一下：

如果在函数中使用了this，只有在该函数直接被某对象调用时（代码中肉眼可见的调用,例如a = fn()或者 a.fn() 这种），该this才指向该对象。