TypeScript中对象内部方法访问属性时this为undefined如何解决

问题原因 #

• 箭头函数没有独立的this绑定，它的this继承自定义时所在的外层作用域，而非调用时的执行上下文。
• 你在对象字面量中直接定义箭头函数作为方法时，外层作用域是全局作用域，严格模式下全局作用域的this值为undefined，因此无法访问到对象本身的ids属性。
  注意：原代码的参数语法也存在错误，如果是TypeScript场景，参数类型标注应该写为newIds: number[]而非newIds: []

解决方案 #

方案1：使用普通函数作为对象方法（最推荐） #

将add改为普通函数，普通函数的this会在调用时自动绑定到调用它的对象：

let obj = {
    ids: [],
    add: function(newIds) {
        this.ids.push(...newIds)
    }
}

TypeScript版本修正写法：

let obj = {
    ids: [] as number[],
    add: function(newIds: number[]) {
        this.ids.push(...newIds)
    }
}

方案2：使用ES6对象方法简写（写法更简洁） #

可以直接用对象方法的简写语法，本质和普通函数逻辑一致：

let obj = {
    ids: [],
    add(newIds) {
        this.ids.push(...newIds)
    }
}

以上两种方案调用obj.add([1, 2, 3])后，obj.ids的值就会变为[1, 2, 3]，符合预期。

方案3：直接引用对象本身（不推荐） #

如果一定要保留箭头函数写法，可以直接通过变量名访问对象，无需使用this，但缺点是对象变量名修改后代码会失效：

let obj = {
    ids: [],
    add: (newIds) => {
        obj.ids.push(...newIds)
    }
}

内容的提问来源于stack exchange，提问作者Thusitha