浅谈call、apply和bind

定义

call() ：

使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

apply() ：

调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

bind()：

创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

分析：

先上栗子

var module = {
  x: 42,
  getSite: function(y, z) {
	console.log(this);
    return `${this.x},${y},${z}`;
  }
};

var getSiteCopy = module.getSite;

console.log(getSiteCopy(142, 21)); // undefined,142,21

console.log(getSiteCopy.call(module, 142, 21)); // 42,142,21

console.log(getSiteCopy.apply(module, [142, 21])); // 42,142,21

var getSiteBind = getSiteCopy.bind(module, 142, 21);
console.log(getSiteBind ()); // 42,142,21

运行截图

接下来针对这个栗子进行分析

相同点：

call()、apply()、bind()三者，都是可以对一个函数指定this值，并且可以提供参数。

console.log(getSiteCopy(142, 21)) // undefined,142,21

因为这里getSiteCopy(142, 21)的执行环境是window，window中获取不到this.x，所以结果为undefined。

console.log(getSiteCopy.call(module, 142, 21)); // 42,142,21
console.log(getSiteCopy.apply(module, [142, 21])); // 42,142,21
var getSiteBind = getSiteCopy.bind(module, 142, 21);
console.log(getSiteBind ()); // 42,142,21

但是使用了call()、apply()、bind()就能顺利取到this.x，因为它们将this指向module了。

不同点：

call()：

参数的形式是单独给出

console.log(getSiteCopy.call(module, 142, 21));

apply()：
参数的形式是一个数组（或类数组对象）

console.log(getSiteCopy.apply(module, [142, 21]));

bind()：
创建一个新的函数

var getSiteBind = getSiteCopy.bind(module, 142, 21);
console.log(getSiteBind ()); // 42,142,21

在了解bind()和call()/apply()的区别之后，其实我们可以使用call()/apply()来实现bind()。
详见： 使用apply()，实现bind()

ps：转载请注明出处