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

Question

在用户的 sendTo 方法中，我尝试绑定先前定义的函数并将 this.name 作为第一个参数发送。但是如果我尝试控制台日志记录，this.name returns 未定义。如何正确地将用户对象的上下文绑定到 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 属于 window 对象而不是用户。

所以最后 sendTo 是一个上下文为 window 且第一个参数为 window.name

的方法

这就是 console.log(this) returns window 对象的原因。

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

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

最后参数变成：

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

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

的地方

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

JavaScript .bind mehtod doesn't catch up a context

javascript

node.js

ecmascript-6