call()与java脚本中的Vs bind(); 为什么即使在call()存在的情况下引入bind()

Question

在我所了解到的其中一个博客中,它.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

但是,将.call()分配给其他变量将实现相同的目的.

不,我不知道你在哪里阅读,但这是完全错误的.分配结果call分配调用函数的结果.它不会做什么bind.

在你的代码中,foocall是undefined.为什么？因为您已调用 foo并将其返回值分配给foocall.由于foo从不使用return值,因此调用的结果foo是undefined.

call 调用该函数(线索在名称中:-)),设置this调用期间的值.

bind如果不调用该函数,它将返回一个新函数,当调用该函数时,将调用this设置为特定值的原始函数(如果this在调用时提供除了值之外的参数,则可选择使用初始参数bind).

这些链接是MDN(我曾经链接到规范,当规范对普通人来说是可理解的时候),这有进一步的解释和例子.(谢谢你提醒,奥斯卡!)

这是一个更正的例子:

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>