浅谈call、apply和bind

最新推荐文章于 2024-01-25 12:07:32 发布

原创最新推荐文章于 2024-01-25 12:07:32 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

博客主要介绍了JavaScript中call()、apply()、bind()方法的定义。call()用指定this值和单独参数调用函数，apply()用数组参数调用，bind()创建新函数并指定this值。还分析了三者相同点是可指定this值和提供参数，不同点在于参数形式和是否创建新函数，且可用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：转载请注明出处