JavaScript——call、apply和bind的区别

最新推荐文章于 2024-09-12 20:25:13 发布

原创最新推荐文章于 2024-09-12 20:25:13 发布 · 534 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文详细讲解了JavaScript中call()、apply()和bind()函数的作用、区别，以及它们在实际编程中的应用场景，如类型判断和求最大值。通过比喻理解它们像奥特曼的光线技能，call相当于现场教学，apply是预设指令，而bind则是保存技能。

一、作用

动态修改当前函数内部环境对象this的指向。

二、区别

2.1 call和apply的异同

2.1.1 相同点：

都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同）

2.1.2 不同点：

call()：

第一个参数是this要指向的对象，后面传入的是参数列表，参数可以是任意类型，当第一个参数不存在时，默认指向window

apply()：

第一个参数是this要指向的对象，第二个参数是数组

const obj = {};
function fa(x, y) {
  console.log(x);
  console.log(y);
  console.log(this);
}
fa.apply(obj, [1]);
fa.call(obj, 1, 2);

可以看到apply里的参数是以数组的形式解析传入的。

bind()：

对于bind来说修改过指向之后并不会像bind和apply立即执行，而是会返回一个绑定新this的函数。

const obj = {};
function fa(x, y) {
  console.log(x);
  console.log(y);
  console.log(this);
}
const a = fa.bind(obj, 1, 2);
console.log(a);

如上图所示，bind并不会传参执行，只是单纯的改变this指向返回一个新函数，在需要的时候进行调用。

三、常见用法

3.1 利用call()判断数据类型

在判断数据类型时使用typeof，会出现不准确的情况，可以使用Object.prototype.toString.call()方法来判断一个数据的数据类型

console.log(Object.prototype.toString.call("qq"))

3.2 利用apply()求最大值

var arr =[2,6,8,3,4,9,7,23,56,889]; 
console.log(Math.max.apply(arr,arr))

那么最后对于这三个api的使用用一个形象一点的小故事就可以串起来，奥特曼用光线打怪兽，这天奥特曼不在，我也想打怪兽，想起之前奥特曼写的光线秘籍我学会了也能发光线就是apply()，但是我没学会奥特曼回来后一步步的亲自教我发光线就是call()，最后还是没学会，最后只好算了奥特曼用bind()把技能存了一份在我体内要用的时候直接发射就好。