在JavaScript中链接.bind（）调用。出乎意料的结果？

小编典典

在JavaScript中链接.bind（）调用。出乎意料的结果？

javascript

从MDN：

bind（）方法创建一个新函数，该函数在调用时将其this关键字设置为提供的值

我可以很高兴地看到它在此示例中有效：

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

哪个日志Object { foo="bar"}。

但是，如果我链接了另一个绑定调用，甚至是“调用”调用，我仍然会使用分配给第一个绑定的对象的“ 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"}。

无论我链接多少个绑定调用，似乎只有第一个都起作用。

为什么？

这可能会有所帮助。我刚刚发现jQuery的版本行为相同！：O

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

日志 Object { foo="bar"}

阅读 431

2020-05-01

共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没有地方引用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“再次”返回的函数，但这不是重新绑定原始函数。它仅绑定外部函数，而对内部函数没有影响，因为已经设置为使用this传递给的上下文（值）调用基础函数bind。我可以一次又一次地绑定，但最终要做的是创建更多的外部函数，这些函数可以绑定到某些东西上，但仍然最终调用从第一个返回的最里面的函数bind。

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

如果我想“重新绑定”一个函数，那么我可以对原始函数进行新的绑定。因此，如果我绑定一次：

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

然后我想安排我的原始函数与其他函数调用this，那么我不重新绑定绑定函数：

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

相反，我只是创建了一个绑定到原始函数的新函数：

my_other_bound_fn = orig.bind(my_other_obj);

2020-05-01