apply() 和 call() 详解示例

最新推荐文章于 2024-10-21 22:51:33 发布

weixin_34255055

最新推荐文章于 2024-10-21 22:51:33 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c78e2375188251961019a38

本文深入探讨了JavaScript中apply和call方法的应用场景，包括如何使用它们进行对象属性的继承，数组的合并，以及获取数组中的最大和最小值。通过具体示例，详细解释了这两种方法的工作原理和使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、apply()方法，示例：

// 定义一个name1 类
function fun1(name1,name2){
    this.name1 = name1; 
    this.name2 = name2；
};
// 定义一个name2 类
function fun2(name1,name2,name3){
    fun1.apply(this, arguments);
    this.name3 = name3;
};

var obj = new fun2('张三','李四','王五');
console.log(obj);  // fun2 {name1: "张三", name2: "李四", name3: "王五"}  
// name2类里没有给name1和name2属性赋值,为什么又存在这两个属性的值呢？这个就是apply的神奇之处.  
// 通俗一点讲就是:用name2去执行name1这个类里面的内容,在name1这个类里面存在this.name1等之类的语句,这样就将属性创建到了obj 对象里面。
复制代码

二、apply() / call() 实现两个数组合并，示例：

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN)所以同样也可以通过apply来装换一下这个数组,即:

// apply() 方法：
var arr1 = [1, 2, 3, 4, 5];
var arr2 = ['a','b','c','d','e'];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);  // [1, 2, 3, 4, 5, 'a','b','c','d','e']
console.log(arr2);  // ['a','b','c','d','e']
// 上面例子可以理解为，arr1调用了push方法，参数是通过apply讲数组转换为参数列表的集合。

// call() 方法：
var arr3 = [1,2];
var arr4 = ['a','b','c'];
Array.prototype.push.call(arr4,arr3[0],arr3[1]);
console.log(arr3);  // [1, 2]
console.log(arr4);  // ["a", "b", "c", 1, 2]

// 如果按照上面apply()的方法：
var arr3 = [1,2];
var arr4 = ['a','b','c'];
Array.prototype.push.call(arr4,arr3);
console.log(arr3);  // [1, 2]
console.log(arr4);  // ["a", "b", "c", [1, 2]]
复制代码

三、apply() / call() 得到数组中最大 / 最小一项，示例：

apply() 适合一个数组的集合，而call() 适合数组的单个元素

// apply()方法，获取数组最大一项：
var arr1 = [100, 200, 300, 500];
var max = Math.max.apply(null, arr1);
console.log(max);  // 500

// apply()方法，获取数组最小一项：
var arr2 = [100, 200, 300, 500];
var min = Math.min.apply(null, arr2);
console.log(min);  // 100

// call()方法，获取数组最大一项：
var arr3 = [100, 200, 300, 500];
var max = Math.max.call(null, arr3[0],arr3[1],arr3[2],arr3[3]);
console.log(max);  // 500

// call()方法，获取数组最小一项：
var arr4 = [100, 200, 300, 500];
var min = Math.min.call(null, arr4[0],arr4[1]);
console.log(min);  // 100
复制代码