JavaScript .bind 方法没有赶上上下文

Question

在用户的 sendTo 方法中，我尝试绑定之前定义的函数并将 this.name 作为第一个参数发送。但如果我尝试控制台日志记录，this.name 将返回 undefind。如何将用户对象的上下文正确绑定到 sendTo() 方法？

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

let user = {
    name: "Alex",
    sendTo: sendFrom.bind(this, this.name),
}


user.sendTo = user.sendTo.bind(user);

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

{}
undefined's packet --> John  
message: some message

Answer 1

我猜你可以通过不使用任何绑定来实现预期的行为：

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

let user = {
    name: "Alex",
    sendTo: sendFrom
}

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

但是，如果您想在绑定时发挥作用的其他地方执行用户的方法：

let alexeSendTo = user.sendTo
alexesSendTo('John', 'Hey John!') // it will loose Alex's user context link

let alexeSendTo = user.sendTo.bind(user)
alexesSendTo('John', 'Hey John!') // now it is marked as Alex message

Answer 2

要了解为什么这不起作用，您必须查看 user 对象：

sendTo: sendFrom.bind(this, this.name),

user 中的这个属性是导致问题的原因。当这段代码运行时this属于窗口对象而不是用户。

所以最后sendTo 是一个方法，其上下文为window，第一个参数为window.name

这就是console.log(this) 返回窗口对象的原因。

当你这样做时： console.log(user.sendTo("John", "some message"));

您在已经附加的参数之后添加参数"John" 和"some message"。

所以最终参数变成：

从，到，文本 -> window.name（在你的情况下未定义），约翰，一些消息

只要你在这段代码中使用this，它指的是window。实际上这里没有办法理解 binding 并且这个例子不是你应该使用 bind

的地方