JavaScript里箭头函数的this指向问题

在JavaScript语言里面，this一般用于以下四种情况：

1、在普通函数中；
2、当函数作为对象的属性，函数中的this；
3、在构造函数中；
4、在call和apply中；

所以本文也用以上四种情况来展示function函数和箭头函数的this指向异同。

1. 普通函数中的this

1.1 function函数

var a = 123;
function test(){
        console.log(this);
        console.log(this.a);
}
test(); // 1. window; 2. 123

1.2 箭头函数

var a = 123;
var test = () => {
        console.log(this);
        console.log(this.a)
};
test();// 1. window; 2. 123

 由此可见，普通函数中不管是function函数还是箭头函数，this指向都是window。

2. 函数作为对象的属性

2.1 function函数

const obj = {
    myname: 'zhangsan',
    say: function (){
        console.log(this);
        console.log(`my name is ${this.myname}`);
    }
};
obj.say(); // 1. obj; 2. my name is zhangsan

2.2 箭头函数

const obj = {
   myname: 'zhangsan',
    say:()=> {
        console.log(this);
        console.log(`my name is ${this.myname}`);
    }
};
obj.say(); // 1. window; 2. my name is undefined

在函数作为对象的属性时，function函数中的this指向调用它的对象，而箭头函数中的this则不再是指向调用该函数的对象，而是指向window。

3. 在构造函数中

3.1 function函数

const Info = function (name, age){
    //1. 创建一个空对象
    // let this=new Object();
    //2. 设置对象
    this.color=color;
    this.type=type;
    //3. 返回该对象
    // return this;
}
const info = new Info('human', 99);
console.log(info); // {name: 'human', age: 99}

3.2 箭头函数

const Info = (name, age) => {
    this.name = name;
    this.age = age;
}
const info = new Info('human', 99);
console.log(info); // Uncaught TypeError: Info is not a constructor

在构造函数中，function函数和箭头函数中，this的指向也不相同。如果箭头函数作为构造函数，则会报错，提示该函数不是一个构造器。因此，箭头函数不能作为构造函数来使用。

4. call和apply

const obj = {
    myname: 'zhangsan',
};

4.1 function函数

function getPer (perName){
    console.log(this);
    console.log(this[perName]);
}
getPer.call(obj, 'myname'); // 1. obj; 2. zhangsan

4.2 箭头函数

const getPer = (perName) => {
    console.log(this);
    console.log(this[perName]);
}
getPer.call(obj,'myname'); // 1. obj; 2. zhangsan

 在call和apply的场景下，箭头函数中的this并不会指向call或者apply函数中的第一个参数，而是指向了window对象。

总结：

1、普通函数中，this指向window对象；
2、函数作为对象的属性，函数中的this指向调用函数的对象；
3、在构造函数中。此时this指向构造函数正在构造的实例对象；
4、在call和apply中，this指向第一个参数，即被扩展的作用域对象；