面试题：JavaScript 定时器中this绑定的多种方式及场景

Question

在JavaScript定时器场景下，阐述使用bind、箭头函数、that = this这几种方式绑定this的原理及各自适用场景，并且分别用代码示例说明如何解决如下场景中的this指向问题： 有一个类`MyClass`，包含一个`start`方法，在`start`方法内设置一个定时器，需要在定时器回调中访问类实例的属性。

Answer 1

使用bind绑定this

1. 原理：bind方法会创建一个新函数，这个新函数内部的this被永久绑定到调用bind时传入的第一个参数。
2. 适用场景：当你希望明确指定某个函数内部this的指向，并且这个指向在函数的整个生命周期内不会改变时适用。
3. 代码示例：

class MyClass {
    constructor() {
        this.value = 42;
    }
    start() {
        const self = this;
        setTimeout(function() {
            console.log(self.value);
        }.bind(this), 1000);
    }
}
const myClass = new MyClass();
myClass.start();

使用箭头函数绑定this

1. 原理：箭头函数没有自己的this，它的this继承自外层作用域（词法作用域）。
2. 适用场景：在需要简洁语法并且希望this指向外层作用域的场景下适用。
3. 代码示例：

class MyClass {
    constructor() {
        this.value = 42;
    }
    start() {
        setTimeout(() => {
            console.log(this.value);
        }, 1000);
    }
}
const myClass = new MyClass();
myClass.start();

使用that = this绑定this

1. 原理：在外部作用域声明一个变量（如that），将this赋值给它，由于变量的作用域链特性，在内部函数中可以通过这个变量访问到外部的this。
2. 适用场景：在不支持箭头函数，或者需要兼容旧版JavaScript环境时适用。
3. 代码示例：

class MyClass {
    constructor() {
        this.value = 42;
    }
    start() {
        const that = this;
        setTimeout(function() {
            console.log(that.value);
        }, 1000);
    }
}
const myClass = new MyClass();
myClass.start();