apply、call、bind方法的区别和模拟实现

最新推荐文章于 2024-08-12 20:41:59 发布

小火柴FE

最新推荐文章于 2024-08-12 20:41:59 发布

阅读量1.1k

点赞数

分类专栏：手撸代码文章标签： javascript

本文为博主原创文章，欢迎转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/weixin_42429672/article/details/105923107

版权

本文详细介绍了JavaScript中的apply、call和bind方法的区别、使用场景及模拟实现。它们都能改变函数执行时的上下文，但用法各异：apply接受一个数组作为参数，call直接传递参数，bind则返回新函数。文章还提供了具体的模拟实现代码，帮助理解其内部工作原理。

摘要由CSDN通过智能技术生成

1 区别

这三个方法都是Function原型对象里面的方法（Function.prototype），都可以指定方法的第一个参数来改变某个函数或方法运行时的上下文（指向当前this的指向）的作用。bind与apply、call方法不同的是，它返回一个新函数，等执行新函数时才会去改变上下文，常用于回调函数，而后两者是直接运行的，只是传参的方式不一样：apply的第2个参数是一个数组或类数组，call是正常传参。下面是一个例子：

var a = {
   
  value: 1
}
var value = 2
var b = function(a, b) {
   
  console.log(a + b + this.value)
}

b.call(a, 2, 3) //输出：6，this指向了a，等同于b.apply(a, [2, 3])
b(2, 3) // 输出：7，this指向了window
var c = b.bind(a, 2, 3) // 返回一个新函数
c() // 调用新函数再绑定this指向

注意：在严格模式下不指定this指向的话，this值为undefined。

2 使用场景和用法

2.1 apply

数组拼接

var array = [1, 2, 3, 4];
array.push.apply(array, [4, 5, 6]);
console.log(array);

数组拼接有一个concat方法，但是不改变原数组，只是返回了一个新数组。而使用apply就可以在原数组后面依次添加另一个数组里面的元素。

求数组求最大值

var array = [41, 25, 23, 54, 58];
var max = Math.max.apply(null, array);
console.log(max);

有时候我们想求数组的最大值，而数组原型对象里面没有求最大值的方法，要么在原型里面添加一个max方法，要么就得循环数组依次比较，很是麻烦，而使用apply方法第二个参数的特性，可以把这个数组作为Math对象中max方法的参数，就可以很容易求出最大值。求最小值也是一样的方法。

2.2 call

调用父构造函数，实现继承

//定义父类
function Person(name, age) {
   
    this.name = name;
    this.age = age;
    this.sayHi = function() {
   
        console.log('hello,' + 'name'