javascript - java 脚本中的 call() 与 bind() ；为什么即使存在call()也要引入bind()

Question

在一篇博客中，我了解到 .bind() 只会将传递的对象硬绑定(bind)到“this”，而 .call() 将执行另外还有这个功能。但是，将 .call() 分配给其他变量将达到相同的目的。我试图理解为什么引入 .bind() 还是我遗漏了一些东西？以下是证明我上面所说的代码:

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

let obj = {
    a: 2,
    foo: foo
};

let a = 'oops! global';

let foocall = foo.call (obj);
let foobind = foo.bind (obj);

foo.call (obj);

setTimeout ( foocall , 100);
setTimeout ( foo , 100);

输出:

[xyz: ~/sandboxes/js]$ node --use-strict binding.js 2 2 2

Answer 1

However, assigning the .call() to other variable will achieve the same purpose.

没有。我不知道你在哪里读到的，但这是完全错误的。赋值call的结果就是赋值调用函数的结果。它不做 bind 所做的事情。

在您的代码中，foocall 是未定义。为什么？因为您已调用 foo 并将其返回值分配给 foocall。由于 foo 从不使用带有值的 return，因此调用 foo 的结果是 undefined。

call 调用函数(线索就在名称中:-))，设置this在调用期间将具有的值。

bind 不调用该函数，它返回一个新函数，在调用时，将调用原始函数，并将 this 设置为特定值(并且可以选择使用初始参数，如果您在调用 bind 时除了 this 值之外还提供这些值)。

这些链接指向 MDN(我曾经链接到规范，当时规范对普通人来说是可以理解的)，其中有进一步的解释和示例。 (谢谢提醒，Oskar!)

这是一个更正的示例:

function foo(label) {
  snippet.log(label + ", " + this.a);
}

var obj = {
  a: 2,
  foo: foo
};

var a = 'oops! global';

// CALLS `foo`, setting `this` during the call to `obj`.
// Result: Outputs "call1, 2" to the console.
var foocall = foo.call(obj, "call1");

// Since `foo` doesn't return anything, `foocall` is `undefined`
snippet.log("foocall's value: " + foocall);

// Calls `foo`, just like we did earlier
// Result: Outputs "call2, 2" to the console.
foo.call(obj, "call2");

// DOES NOT call `foo`. Just creates a new function that,
// when called, will call `foo` with `this` set to `obj`.
var foobind = foo.bind(obj, "bound");

// Calls the bound version of `foo` after 100ms
// Result: "bound, 2" 100ms later
setTimeout(foobind, 100);

// Calls `foo` after 100ms. Since we're in loose mode,
// `foo` will get called with `this` set to the global object.
// Result: "undefined, oops! global" because we haven't passed
// a value for the `label` argument, and `this` is the global object
setTimeout(foo, 100);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>