js面向对象之this指向

对于前端开发者来说，this是一个让人又爱又恨的小妖精。应用得好，项目事半功倍，应用得不好，项目可能漏洞百出。接下来本文就将揭开this的神秘面纱。（鄙人第一次鼓足了胆子写博客，望路过的大神轻踩）

首先强调的一点是,在函数中this指向不是在定义的时候确定的，而是在真正运行此函数时确定的。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。

第一种情况，构造函数中，关于构造函数的概念在此不赘述了，如想了解可自行百度谷歌。

1. function Pp(){
   
2.     this.name = 'pp';
   
3.     this.age = 18;
   
4.     console.log(this); 
   
5. }
   
6. var pp = new Pp(); //Pp {name:'pp',age:18}

如上述代码，当通过new关键字运行Pp构造函数时，this的指向为即将new出去的对象，即{name:'pp',age:18}这个对象。但如果不采用new关键字，即直接执行Pp()，此时Pp函数内的this将指向window。后面会说明。

第二种情况，函数作为对象的一个属性。

1. var obj = {
   
2.     age : 18,
   
3.     pp : function(){
   
4.         console.log(this.age); 
   
5.     }
   
6. }

如上述代码，当pp函数作为obj对象的一个属性被调用时，this的指向为obj对象。但如果pp不作为obj的一个属性被调用,那么pp内this的指向将不再是obj,比如上面的fn()调用，this同样将指向window。

第三种情况，函数用call或apply调用。

1. var obj = {
   
2.     age:18
   
3. };
   
4. function pp(){
   
5.     console.log(this.age);
   
6. } 
   
7. pp.call(obj); //18

如上述代码，当使用call或者apply时,函数内部this的指向将变成call函数或apply函数内的参数对象。

第四种情况，也是最常见的一种情况，调用普通函数。

1. console.log(this === window); //true
2. 
   
3. 
   

 (代码被吞了，用图片展示 )
如上述代码,全局环境或调用普通函数，this指向都为window。So第一种情况中，当把Pp构造函数当做普通函数调用时，Pp函数内的this同样会指向为window。另外需要注意的一点是，上述obj.pp()代码，pp函数被当做obj的一个属性调用，故其中的this指向为obj对象，但pp函数内的fn函数调用并非当做obj对象的一个属性，故fn函数内部的this指向为window。