详解JavaScript中this的指向问题

this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言，这使得this更加扑朔迷离，让人迷惑。

this使用到的情况：

1. 纯函数

2. 对象方法调用

3. 使用new调用构造函数

4. 内部函数

5. 使用call / apply

6.事件绑定

1. 纯函数

var name = 'this is window'; //定义window的name属性 function getName(){  console.log(this); //控制台输出: Window //this指向的是全局对象--window对象  console.log(this.name); //控制台输出: this is window / } getName(); 

运行结果分析：纯函数中的this均指向了全局对象，即window。

2. 对象方法调用

var name = 'this is window'; //定义window的name属性,看this.name是否会调用到 var testObj = {  name:'this is testObj',  getName:function(){  console.log(this); //控制台输出:testObj //this指向的是testObj对象  console.log(this.name); //控制台输出: this is testObj  } } testObj.getName();

运行结果分析：被调用方法中this均指向了调用该方法的对象。

3.  使用new调用构造函数

function getObj(){  console.log(this); //控制台输出: getObj{} //this指向的新创建的getObj对象 } new getObj();

运行结果分析：new 构造函数中的this指向新生成的对象。

4. 内部函数

var name = "this is window"; //定义window的name属性,看this.name是否会调用到 var testObj = {  name : "this is testObj",  getName:function(){  //var self = this; //临时保存this对象  var handle = function(){  console.log(this); //控制台输出: Window //this指向的是全局对象--window对象  console.log(this.name); //控制台输出: this is window  //console.log(self); //这样可以获取到的this即指向testObj对象  }  handle();  } } testObj.getName();

运行结果分析：内部函数中的this仍然指向的是全局对象，即window。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self，如上述代码所示。

5. 使用call / apply

var name = 'this is window'; //定义window的name属性,看this.name是否会调用到 var testObj1 = {  name : 'this is testObj1',  getName:function(){  console.log(this); //控制台输出: testObj2 //this指向的是testObj2对象  console.log(this.name); //控制台输出: this is testObj2  } }var testObj2 = {  name: 'this is testObj2' }testObj1.getName.apply(testObj2); testObj1.getName.call(testObj2);

Note：apply和call类似，只是两者的第2个参数不同：

[1] call( thisArg [，arg1，arg2，… ] );  // 第2个参数使用参数列表：arg1，arg2，...