JS bind() 做什么来防止我的代码重新绑定到另一个上下文?

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

那么这段代码会发生什么呢？你能解释一下绑定方法用来防止这种重新分配给我的算法吗？

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

---

链接

1. "this"关键字如何工作？

编辑：

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