JavaScript类调用数组存储的方法时this指向丢失报错如何解决？

该报错本质是类方法的this绑定丢失问题：你将类实例方法直接存入functionTable数组时，方法本身和原类实例的上下文关联被切断，执行this.functionTable[index]()时，方法内部的this默认指向全局对象（严格模式下为undefined），自然无法找到挂载在实例上的log方法。

以下三种方案都可以解决该问题，你可以根据项目场景选择：

• 方案1：存入数组时手动绑定实例this
  在构造函数中将方法和当前实例绑定后再存入数组，是兼容性最好的实现：

class ArrayWithFunctions {
    constructor() {
        this.functionTable = [
            this.function1.bind(this), // 绑定当前实例this
            this.function2.bind(this),
        ];
    }
    
    execute(index) {
        return (this.functionTable[index])();
    }
    
    log(chars) {
        console.log(chars);
    }
    
    function1() {
        console.log('I am Function 1.');
    }
    
    function2() {
        this.log('I am Function 2.');
    }
}

• 方案2：用箭头函数定义类方法
  类属性写法的箭头函数会自动继承实例创建时的上下文，不会丢失this绑定，代码更简洁：

class ArrayWithFunctions {
    constructor() {
        this.functionTable = [
            this.function1,
            this.function2,
        ];
    }
    
    execute(index) {
        return (this.functionTable[index])();
    }
    
    log(chars) {
        console.log(chars);
    }
    
    // 改用箭头函数定义方法
    function1 = () => {
        console.log('I am Function 1.');
    }
    
    function2 = () => {
        this.log('I am Function 2.');
    }
}

• 方案3：执行方法时手动指定this
  如果不需要修改方法定义和数组存储逻辑，可以在执行时用call/apply手动绑定当前实例的this：

class ArrayWithFunctions {
    constructor() {
        this.functionTable = [
            this.function1,
            this.function2,
        ];
    }
    
    execute(index) {
        // 调用时绑定当前实例this
        return this.functionTable[index].call(this);
    }
    
    log(chars) {
        console.log(chars);
    }
    
    function1() {
        console.log('I am Function 1.');
    }
    
    function2() {
        this.log('I am Function 2.');
    }
}

内容的提问来源于stack exchange，提问作者Robert W.