Question

我正在学习JS中的硬绑定并对其进行试验。因此，我制作了自定义的绑定实用程序函数，并根据官方JavaScript绑定方法给出的结果来使用它。

function foo(a, b) {
  this.a = a;
  this.b = b;

  console.log(this.a);
  console.log(this.b);
}

function customBind(fn, obj) {
  return function(args) {
    fn.apply(obj, args);
  }
}

var obj = {
  a: 1,
  b: 2
}

var obj2 = {
  a: 2,
  b: 3
}

var myFunc = foo.bind(obj, 200, 300);
var myNewFunc = customBind(myFunc, obj2);
myNewFunc([400, 500]);

在控制台中的结果是：

200
300

那么这段代码会发生什么呢？您能为我解释bind方法用来防止这种重新分配的算法吗？

Answer 1

请看看https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

如果我要自己编写绑定功能，它将看起来像这样：

Function.prototype.bind = function(thisArg, ...args) {

  // bind is a function on the Function's prototype, therefore it will be
  // in the 'this' variable of this function. For further reference see link 1. below.
  var originalFunc = this;

  // A new function is returned wrapping the original function. When this new function is
  // called it will call the original function with the thisArg and other args passed
  // to the bind function and appends the args passed to this new function after
  // the arguments passed to `bind`.
  return function(...secondaryArgs) {
     return originalFunc.call(thisArg, ...args, ...secondaryArgs);
  }
}

^{注意：这并不完全符合规范，但是它应该使您全面了解其工作原理。}

如您所见，使用另一组参数调用bind返回的函数（这是您应该尝试执行的操作）不会替换传递给bind的参数，而是附加了他们在最后。

这就是为什么您的示例无法按预期工作的原因：

function foo(a, b) {
    console.log(a, b);
}

var newFunc = foo.bind({}, 200, 300);
foo(400, 500); // prints: 200, 300 instead of what you expected: 400, 500

稍微改变一下示例以了解发生了什么事情

function bar(a, b, c, d) {
    console.log(a, b, c, d);
}

var newFunc = bar.bind({}, 200, 300);
newFunc(400, 500); // prints: 200, 300, 400, 500

请注意，将400、500附加在200、300之后。

以下内容也可以工作：

var newFunc = foo.bind({});
foo(400, 500); // prints: 400, 500

链接

How does the "this" keyword work?

编辑：

显然bind会附加参数，而不是忽略它们。

JS bind（）做什么以防止我的代码重新绑定到另一个上下文？

1 个答案: