使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。

下面分几种情况谈论下

1、普通函数调用

这个情况没特殊意外，就是指向全局对象-window。

1、let username='cn'
2、function fn(){
3、    alert(this.username);//undefined
4、}
5、fn();

可能大家会困惑，为什么不是输出守候，但是在细看一看，我声明的方式是let，不会是window对象如果输出守候，要这样写

1、var username='cn'
2、function fn(){
3、    alert(this.username);//cn
4、}
5、fu();
6、//---------------
7、window.username='cn'
8、function fn(){
9、    alert(this.username);//cn
10、}
11、fn();
12、//可以理解为
13、//window.fn();

2、对象函数调用

这个相信不难理解，就是那个函数调用，this指向哪里

1、window.b=2222
2、let obj={
3、    a:111,
4、    fn:function(){
5、        alert(this.a);//111
6、        alert(this.b);//undefined
7、    }
8、}
9、obj.fn();

很明显，第一次就是输出obj.a，就是111。而第二次，obj没有b这个属性，所以输出undefined，因为this指向obj。

但是下面这个情况得注意

1、let obj1={
2、    a:222
3、};
4、let obj2={
5、    a:111,
6、    fn:function(){
7、        alert(this.a);
8、    }
9、}
10、obj1.fn=obj2.fn;
11、obj1.fn();//222

这个相信也不难理解，虽然obj1.fn是从obj2.fn赋值而来，但是调用函数的是obj1，所以this指向obj1。

3、构造函数调用

1、let TestClass=function(){
2、   this.name='111';
3、}
4、let subClass=new TestClass();
5、subClass.name='cn';
6、console.log(subClass.name);//cn
7、let subClass1=new TestClass();
8、console.log(subClass1.name)//111

这个也是不难理解，回忆下（new的四个步骤）就差不多了！

但是有一个坑，虽然一般不会出现，但是有必要提一下。

在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象

4、apply和call调用

apply和call简单来说就是会改变传入函数的this。

1、let obj1={
2、    a:222
3、};
4、let obj2={
5、    a:111,
6、   fn:function(){
7、        alert(this.a);
8、    }
9、}
10、obj2.fn.call(obj1);

此时虽然是 obj2 调用方法，但是使用了call，动态的把 this 指向到 obj1。相当于这个 obj2.fn 这个执行环境是 obj1 。apply 和 call 详细内容在下面提及。

5、箭头函数调用

首先不得不说，ES6 提供了箭头函数，增加了我们的开发效率，但是在箭头函数里面，没有 this ，箭头函数里面的 this 是继承外面的环境。

一个例子

1.let obj={
2.    a:222,
3.    fn:function(){    
4.        setTimeout(function(){console.log(this.a)})
5.    }
6.};
7.obj.fn();//undefined

不难发现，虽然 fn() 里面的 this 是指向 obj ，但是，传给 setTimeout 的是普通函数， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。

换成箭头函数

1、let obj={
2、    a:222,
3、    fn:function(){    
4、        setTimeout(()=>{console.log(this.a)});
5、    }
6、};
7、obj.fn();//222

这次输出 222 是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj 。所以输出 222

6、call和apply

call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。 call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。 apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

1、let fn=function(a,b,c){
2、console.log(a,b,c);
3、}
4、let arr=[1,2,3];

如上面这个例子

1、let obj1={
2、    a:222
3、};
4、let obj2={
5、    a:111,
6、    fn:function(){
7、        alert(this.a);
8、   }
9、}
10、obj2.fn.call(obj1);

call 和 apply 两个主要用途就是

1.改变 this 的指向（把 this 从 obj2 指向到 obj1 ）

2.方法借用（ obj1 没有 fn ，只是借用 obj2 方法）

JS this指向总结