javascript - 在 JavaScript 中链接 .bind() 调用。意想不到的结果？

Question

来自MDN :

The bind() method creates a new function that, when called, has its this keyword set to the provided value

我可以很高兴地看到它在这个例子中工作:

(function () {
   console.log(this);
}).bind({foo:"bar"})();

记录 Object { foo="bar"}。

但是，如果我链接另一个绑定(bind)调用，甚至是“call”调用，我仍然会使用分配给传递给第一个绑定(bind)的对象的“this”来调用函数。示例:

(function () {
   console.log(this);
}).bind({foo:"bar"}).bind({oof:"rab"})();

&

(function () {
   console.log(this);
}).bind({foo:"bar"}).call({oof:"rab"});

两者都记录 Object { foo="bar"} 而不是我期望的:Object { oof="rab"}。

无论我链接了多少个绑定(bind)调用，似乎只有第一个有效。

为什么？

这可能会有所帮助。我刚刚发现 jQuery 版本的行为方式相同! :O

jQuery.proxy(
  jQuery.proxy(function() {
      console.log(this);
  },{foo:"bar"})
,{oof:"rab"})();

记录 对象 { foo="bar"}

Answer 1

很容易将bind 视为以某种方式修改 函数以使用新的this。在这种(不正确的)解释中，人们认为 bind 是向函数添加某种魔法标志，告诉它在下次调用时使用不同的 this。如果真是这样，那么应该可以“覆盖”并更改魔法标志。那么有人会问，为什么要任意限制这样做的能力？

但事实上，它不是它是如何工作的。 bind 创建并返回一个新 函数，该函数在被调用时会调用具有特定 this 的第一个函数。这个新创建的函数使用指定的 this 调用原始函数的行为在创建函数时被嵌入。它无法更改，就像函数返回的任何其他函数的内部结构在事后无法更改一样。

查看 bind 的真正简单实现可能会有所帮助:

// NOT the real bind; just an example
Function.prototype.bind = function(ctxt) {
    var fn = this;
    return function bound_fn() {
        return fn.apply(ctxt, arguments);
    };
}

my_bound_fn = original_fn.bind(obj);

如您所见，bound_fn 中的任何地方，从bind 返回的函数，是否引用绑定(bind)函数的this被称为。它被忽略了，所以

my_bound_fn.call(999, arg)            // 999 is ignored

或

obj = { fn: function () { console.log(this); } };
obj.fn = obj.fn.bind(other_obj);
obj.fn();                            // outputs other_obj; obj is ignored

因此我可以“再次”绑定(bind)从bind 返回的函数，但那是不重新绑定(bind)原始函数；它只是绑定(bind)外部函数，这对内部函数没有影响，因为它已经设置为使用传递给 bind 的上下文(this 值)调用底层函数>。我可以一次又一次地绑定(bind)，但我最终所做的只是创建更多的外部函数，这些函数可能绑定(bind)到某些东西，但最终仍会调用从第一个 bind 返回的最内层函数。

因此，说bind“不能被覆盖”是有点误导的。

如果我想“重新绑定(bind)”一个函数，那么我可以在原来的函数上做一个新的绑定(bind)。所以如果我绑定(bind)了一次:

function orig() { }
my_bound_fn = orig.bind(my_obj);

然后我想安排用其他一些this调用我的原始函数，然后我不重新绑定(bind)绑定(bind)函数:

my_bound_fn = my_bound_fn.bind(my_other_obj);     // No effect

相反，我只是创建一个绑定(bind)到原始函数的新函数:

my_other_bound_fn = orig.bind(my_other_obj);