谈谈JavaScript中的this

1、函数调用

（1）在严格模式下（'use strict'），this是undefined。

（2）非严格模式下，此时this默认是全局对象，在浏览器中就是window，因此下面的代码将打印true：

function f(){
	console.log(this == window);
}

f();

由于非严格模式下函数调用时this总是被绑定到全局对象，于是有可能出现下面的问题：

let obj = {
	num : 0,
	copy: function(x){
		let func = function(){
			this.num = x;
		};
		func();
	}
}

obj.copy(2);
console.log(obj.num);
console.log(num);

2并不会被copy到num，因为调用了func，所以this被绑定到了window，第二个console.log打印的其实是window.num。针对这种情况，一个常用的trick是用先用一个变量that来保存this，如下所示：

let obj = {
	num : 0,
	copy: function(x){
		let that = this;
		let func = function(){
			that.num = x;
		};
		func();
	}
}

obj.copy(2);
console.log(obj.num);

这下就能正确打印2了。

（3）对于箭头函数，它没有自己的this，只会从作用域链的上层继承this。如下的例子：

const obj = {
	a: () => {
		console.log(this);
	},
	b: {
		c: () => {
			console.log(this);
		},
	}
}

obj.a();

obj.b.c();

都会打印window对象。

2、对象调用本类的方法

this被绑定到当前对象上，没什么好说的。

3、apply，call和bind

（1）apply和call可以动态改变this的绑定，如下，现在狗狗也可以说自己的名字了：

let cat = {
	name: "cat",
	sayHi: function(){
		console.log("hi i'm a " + this.name);
	}
}

let dog = {
	name: "dog"
}

cat.sayHi(); // hi i'm a cat
cat.sayHi.apply(dog); // hi i'm a dog
cat.sayHi.call(dog); // hi i'm a dog

但是两者传入参数的方式略有不同：

let cat = {
	name: "cat",
	sayHi: function(){
		console.log("hi i'm a " + this.name);
	},
	makeNoise: function(noise){
		console.log(noise);
	}
}

let dog = {
	name: "dog"
}

cat.makeNoise("miao"); // miao
cat.makeNoise.apply(dog, ["wang"]); // wang, 参数通过列表传入
cat.makeNoise.call(dog, "wang"); // wang, 参数一个个按调用顺序传入

（2）使用f.bind(params)来创建一个与f具有相同函数体和作用域的函数，但是函数的this被绑定到第一个参数上。

在React里我们会这样干：

this.el.addEventListener('click', this.changeLikeText.bind(this), false);

上面的代码让一个el元素（比如一个button）去监听click事件，如果事件发生，就去调用changLikeText方法，回调函数会导致函数丢失自己的上下文，从而回退到默认绑定的情况，所以需要用bind。

参考：

参考1

参考2

还有一个很棒的解释，比我这个文章清晰：https://zhuanlan.zhihu.com/p/23804247  

总结起来，js里的函数调用都可以变成这种形式：func.call(context, para1, para2, ...)，这个context就是this。