在javascript中硬绑定

Question

任何人都可以解释一下hard binding在javascript中的工作原理吗？。

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2
};
var bar = function() {
    foo.call(obj);
};
bar(); // 2
setTimeout(bar, 100); // 

我对这个功能更感兴趣。

var bar = function() {
    foo.call(obj);
};

为什么我们将foo.call(obj)包裹在另一个function内？我们可以直接使用它吗？。

setTimeout(foo.call(obj), 100); // still results in 2.

Answer 1

.call（和.apply）方法只是让手动在被调用的函数中设置this的值。

因此，当您执行foo.call(obj)时，this中foo的值将为obj。

关于setTimeout，您正在做的是立即调用它而不是等待100毫秒。将其更改为10000，您会更清楚地看到它不会等待。

这就是为什么需要这个功能的原因。您需要将函数传递给setTimeout，并在您提供的持续时间后调用它。

---

还有.bind()方法创建新函数，其this值永久绑定到您提供的第一个参数。所以这实际上是一个硬绑定的例子

setTimeout(foo.bind(obj), 100);

因此，在该示例中，返回一个始终将obj设置为此值的函数。所以现在setTimeout正在传递一个函数，它将在给定的持续时间之后被调用。

您还可以将参数绑定到函数。在第一个参数之后传递给.bind()的所有参数将永久绑定到返回的函数，以便传递给该函数的任何参数都将放在绑定的参数之后。

Answer 2

您不需要setTimeout来实现硬绑定。

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

var obj1 = {bar:10};
var obj2 = {bar:5};
var originalFoo = foo;

OriginalFoo现在引用了foo

现在覆盖foo函数并使用originalFoo.call将此上下文设置为始终为obj1的

foo = function() {
    originalFoo.call(obj1);
}

foo(); // returns 10
foo.call(obj2); //returns 10 even when obj2 passed as arg