JS中的this指向问题

1、普通函数

function foo() {
    console.log(this);
}
function goo() {
    'use strict'
    console.log(this);
}
let hoo = () => {
    console.log(this);
}
// 非严格模式指向Window,严格模式下指向undefined
foo(); // Window
goo(); // undefined
// 箭头函数本身没有this,会捕获声明时上下文的this作为自己的this，而且无法改变
hoo(); // Window

2、对象

let obj = {
    name: '张三',
    foo: function() {
        console.log(this)
    },
    goo: function() {
        'use strict'
        console.log(this)
    },
    hoo: ()=>{
        console.log(this)
    }
}
obj.foo(); // obj
obj.goo(); // obj
// 在箭头函数中，this的指向是由外层（函数或者全局）作用域来决定
// 所以即使包裹了一层对象，hoo中的this还是指向Window。
obj.hoo(); // Window

3、构造函数

function Person(name) {
   this.name = name;
}
Person.prototype.foo = function() {
    console.log(this,this.name);
}
Person.prototype.goo = function() {
    'use strict'
    console.log(this,this.name);
}
Person.prototype.hoo = () => {
    console.log(this)
}
let Tom = new Person('Tom');
// 指向实例化的对象
Tom.foo(); // Tom
Tom.goo(); // Tom
// 指向构造函数Person所在上下文的this
Tom.hoo(); // Window

4、类

class Son {
    constructor(name) {
        this.name = name;
    }
    foo() {
        console.log(this);
    }
    goo() {
        'use strict'
        console.log(this);
    }
    hoo = () => {
        console.log(this);
    }
}
let Jack = new Son('Jack');
// 指向实例化的对象
Jack.foo(); // Jack
Jack.goo(); // Jack
Jack.hoo(); // Jack

在构造函数与类中，挂载到函数上的箭头函数指向该函数，挂载到函数原型上的箭头函数指向Window。当通过引用调用方法时：

class Son {
    constructor(name) {
        this.name = name;
    }
    foo() {
        console.log(this);
    }
    hoo = () => {
        console.log(this);
    }
}
let Jack = new Son('Jack');
let foo = Jack.foo;
let hoo = Jack.hoo;
foo(); // undefined
hoo(); // Jack
foo.apply(Jack); // Jack

通过类声明箭头函数时，箭头函数会被自动挂载到函数上，并且箭头函数的this始终指向声明时的上下文即实例化对象，但普通函数的this是动态绑定的，而foo是在全局作用域执行的，又因为class默认严格模式，所以会指向undefined，但可以通过apply、call、bind来改变this指向。