理解 JavaScript 中的 this

type

Post

status

Published

date

Dec 2, 2016

slug

summary

javascript 中的this 是一个老生常谈的话题

一、结论在前

javascript 中的this是一个老生常谈的话题，但不知道是之前那些作者没讲清楚还是我太笨没能理解，始终没能真正理解它，随着自己在项目过程中的大量实践，终于对this比较理解，这里作个总结，也与大家分享一下。

别的文章一来就举例子，我这里首先告诉大家一个结论：

this 指向的是调用函数的那个对象。

要是觉得理解了就可以不用看后面的文章了：）

二、经典栗子


var name = "The Window";
var object = {  
	name: "My Object",
	getName: function() {    
		return this.name;  
	}
};
alert(object.getName());

这是一个所有讲this都会使用的简单而又经典的例子，我们根据一开始的结论—-this 指向的是调用函数的那个对象，很容易就知道输出结果是My Object，接下来我们将这个经典例子升级。


var name = "The Window";
var object = {  
	name: "My Object",  
	getName: function() {    
		return function() {      
			return this.name;    
		};  
	}
};
alert(object.getName()());

请告诉我输出结果是什么。

许多人会说还是My Object，那么你就进入陷阱了。其实这也是 JS 新手常有的误区，他们总简单地以为 this 指向 this 所在的对象，这是错误的！一定要牢记结论this 指向的是调用函数的那个对象，这个重要的结论我终于说满三遍。那么我们再来分析上面的代码：

首先我们创建了一个全局变量name，为它赋值"The Window"；接下来我们创建了对象object，它有个属性name，属性值"My Object"，这个对象还包含一个方法getName()，而这个方法会返回一个匿名函数，而匿名函数又返回this.name。

逻辑理清后，我来告诉大家陷阱在哪：

匿名函数执行具有全局性，其 this 对象通常会指向 window

说“通常”就是说有例外，在通过call()或apply()改变函数执行环境的情况下，this就会指向其他对象了，这些函数我之后会讲到，这里不做展开。

ok，我们知道了这个陷阱，但这也只是个没用的知识点，有用的是怎么解决这种尴尬的情况。虽然我之前说很多新手会犯总简单地以为 this 指向 this 所在的对象这样的错误，但是我们在实际开发中就是想让this有这样的效果，那么我们该怎么做呢？

三、this 的绑定

1.var _this=this

这是最基础的绑定this的方式，将this赋值给一个变量，这个变量可以取任何名字，我喜欢取名_this,有些人喜欢取名that，我们再回顾之前升级的例子：


var name = "The Window";
var object = {  
	name: "My Object",  
	getName: function() {    
		var _this = this;    
		return function() {      
			return _this.name;    
		};  
	}
};
alert(object.getName()());

2.bind()

稍微高级点的方法是使用bind()函数，这是一个 ECMAScript 5.1 出来的扩展方法，与call()、apply()是“同期生”，他们的关系和差别之后我会专门谈。这里依然是之前的例子：


var name = "The Window";
var object = {  
	name: "My Object",  
	getName: function() {    
		return function() {      
			return this.name;    
		}.bind(this);  
	}
};
alert(object.getName()());

3.ES6 中的`()=>`

()=>俗称箭头函数，使用它来定义匿名函数，同样可以解决this的绑定问题


var name = "The Window";
var object = {  
	name: "My Object",  
	getName: function() {    
		return () => {      
			return this.name;    
		};  
	}
};
alert(object.getName()());

这是由于()=>函数体内的this就是定义时所在的对象，而不是执行时所在的对象。

以上，想到再补充吧…