为何无法从数组中的函数访问对象的属性？

问题代码 #

var problem = {
    something: {thing:23},
    somethingElse: [function(){return this.something.thing}]
};
console.log(problem.somethingElse[0]()); // 抛出undefined错误

原因分析 #

核心问题是函数中this的绑定规则。当你直接调用problem.somethingElse[0]()时，这个普通函数的this并没有绑定到problem对象：

• 非严格模式下，这种直接调用的函数this会指向全局对象（浏览器为window，Node.js为global）；
• 严格模式下this会是undefined。

不管哪种情况，全局对象/undefined里都没有something属性，所以会触发undefined相关错误。

解决方案 #

1. 使用箭头函数

箭头函数不会创建自己的this，它的this继承自定义时的上下文（也就是problem对象）：

var problem = {
    something: {thing:23},
    somethingElse: [() => this.something.thing]
};
console.log(problem.somethingElse[0]()); // 输出23

2. 手动绑定this

用bind在定义函数时绑定this到problem：

var problem = {
    something: {thing:23},
    somethingElse: [function(){return this.something.thing}.bind(this)]
};
console.log(problem.somethingElse[0]()); // 输出23

或者调用时用call/apply指定this：

console.log(problem.somethingElse[0].call(problem)); // 输出23

3. 保存对象自身引用

在对象内部定义一个变量指向自身，函数中用该变量代替this：

var problem = {
    something: {thing:23},
    init: function() {
        var self = this;
        this.somethingElse = [function(){return self.something.thing}];
    }
};
problem.init();
console.log(problem.somethingElse[0]()); // 输出23

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