关于Function.prototype.bind连续调用的JavaScript行为疑问

先看你的代码示例：

function f() {
  return this;
}

const g=f.bind({foo:'foo'});
const h=g.bind({bar:'bar'});

console.log(h());    // expected {bar:'bar'} but get {foo:'foo'}

出现这个结果的核心原因是：bind 方法绑定的 this 是永久生效的，后续再次调用 bind、call 或 apply 都无法覆盖第一次绑定的 this 值。

具体拆解：

• 当你执行 f.bind({foo:'foo'}) 创建函数 g 时，g 已经被固定了 this 指向 {foo:'foo'}，这个绑定是不可逆的。
• 后续调用 g.bind({bar:'bar'}) 得到 h，此时 bind 试图给 g 重新绑定 this，但因为 g 已经是一个被绑定过的函数，新的绑定参数会被忽略，h 执行时依然会沿用 g 最初绑定的 {foo:'foo'}。
• 另外你预期的对象合并也不会发生，bind 本身没有合并上下文对象的逻辑，它只会直接固定 this，不存在多次绑定合并的机制。

如果需要实现类似“动态修改上下文”的效果，可以通过闭包接收外部变量、或者在函数内部通过参数传递上下文的方式实现，而不是依赖多次 bind。

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