JavaScript中bind方法无法正确捕获对象上下文如何解决

根因分析 #

• 对象字面量初始化阶段，内部的this不会指向正在创建的user实例，而是指向外层作用域上下文（Node.js环境为模块空导出对象，浏览器环境为window），因此你在定义sendTo时取到的this.name本身就是undefined，该值会作为预设参数被永久绑定到生成的新函数上。
• Function.prototype.bind为一次性绑定：首次绑定生成的新函数，后续再次调用bind既无法修改已经固定的this指向，也无法覆盖已经预设的参数，因此你后续执行的user.sendTo = user.sendTo.bind(user)没有任何效果。

可行解决方案 #

方案1：对象初始化完成后再绑定 #

先完成user基础属性的定义，再单独绑定sendTo方法，此时可以拿到正确的user上下文和name属性：

function sendFrom(from, to, text) {
    console.log(this);
    return `${from}'s packet --> ${to}  
message: ${text}`;
}

let user = {
    name: "Alex",
}
// 此时user已初始化完成，this指向和属性值都正确
user.sendTo = sendFrom.bind(user, user.name);

console.log(user.sendTo("John", "some message"));

运行输出：

{ name: 'Alex', sendTo: [Function: bound sendFrom] }
Alex's packet --> John  
message: some message

方案2：通过getter在对象字面量内完成绑定 #

如果希望所有定义逻辑都放在对象字面量内，可以用getter在首次访问sendTo时动态完成绑定，避免初始化阶段的this指向错误：

let user = {
    name: "Alex",
    get sendTo() {
        // getter内的this固定指向当前user实例
        const boundSendTo = sendFrom.bind(this, this.name);
        // 绑定完成后覆盖getter，避免后续调用重复绑定
        Object.defineProperty(this, 'sendTo', {
            value: boundSendTo
        });
        return boundSendTo;
    }
}

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