JS自定义helpers对象内方法互相调用报undefined错误如何解决

错误根因 #

对象字面量中定义的箭头函数没有独立的this指向，它的this会继承自定义时的外层作用域，当前模块环境下外层this为undefined，因此调用this.addFoo时会抛出找不到属性的错误。

解决方案 #

方案1：将对象方法改为普通函数（推荐） #

普通函数作为对象方法调用时，this会自动指向调用它的对象本身，也可以用ES6的对象方法简写语法，本质也是普通函数：

var myHelpers = {
    addFoo(name) {
        return name + 'foo';
    },
    addFooBar(name) {
        return this.addFoo(name) + 'bar';
    }
}

window.myHelpers = myHelpers;
export default myHelpers;

方案2：直接通过对象名调用内部方法 #

如果不想调整函数类型，直接调用myHelpers本身的方法即可，不需要依赖this指向：

var myHelpers = {
    addFoo: (name) => {
        return name + 'foo';
    },
    addFooBar: (name) => {
        return myHelpers.addFoo(name) + 'bar';
    }
}

window.myHelpers = myHelpers;
export default myHelpers;

方案3：单独定义函数再组装导出 #

如果担心后续修改对象名带来维护问题，可以先单独定义所有工具函数，再组装成对象导出，完全避免this依赖问题：

const addFoo = (name) => {
    return name + 'foo';
}
const addFooBar = (name) => {
    return addFoo(name) + 'bar';
}

const myHelpers = { addFoo, addFooBar };
window.myHelpers = myHelpers;
export default myHelpers;

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