JavaScript中call()与apply()的功能、区别及应用场景详解

本文通过具体实例详细解析JavaScript中call()和apply()的功能与用法，供读者参考学习。

call()和apply()的核心作用

一、call()和apply()的核心作用

首先探讨一个关键问题：在JavaScript开发中，使用call()和apply()的主要目的是什么？

为了说明这一点，我们先看一个常见的JavaScript面向对象编程场景：

function cat(){
}
cat.prototype={
  food:"fish",
  say: function(){
    alert("I love "+this.food);
  }
}
var blackCat = new cat;
blackCat.say();

假设我们有一个对象whiteDog = {food:"bone"}，此时我们并不想为该对象重新定义say方法，而是希望直接复用其他对象的say方法。此时可以通过call或apply来实现：blackCat.say.call(whiteDog);

由此可见，call和apply的存在主要是为了动态改变函数执行时的this指向。当某个对象缺乏特定方法，而其他对象拥有该方法时，我们可以借助call或apply来借用其他对象的方法进行操作。

在实际开发中，一个常见的应用场景是处理document.getElementsByTagName返回的DOM节点集合。这类集合属于类数组对象，无法直接使用Array原型下的push、pop等方法。我们可以通过以下方式解决：

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

经过上述处理，domNodes变量即可使用Array原型下的所有方法。

call()与apply()的具体区别

二、call()与apply()的具体区别

首先明确apply方法的定义如下：

• apply方法能够劫持另一个对象的方法，从而继承该对象的属性。
• Function.apply(obj,args)方法接收两个参数：第一个参数是函数运行的作用域，第二个参数是参数数组。其中，第二个参数既可以是数组，也可以是arguments对象。
  • obj：该参数将替代Function内部代码中的this对象。
  • args：这是一个数组，它将作为参数传递给Function（args对应arguments）。

apply()的具体用法

三、apply()的具体用法

//定义一个人类
function Person(name,age){
  this.name = name;
  this.age = age;
}
//定义一个学生类
function Student(name,age,grade){
  Person.apply(this,arguments);//传入arguments对象
  //Person.apply(this,[num1,num2]);//传入数组
  this.grade = grade;
}
//创建一个学生类
var student = new Student('A','10','一年级');
//测试
console.log('name:'+student.name+'age:'+student.age+'grade:'+student.grade);

在上述学生类中，并未显式给name和age属性赋值，为何这两个属性依然存在？这正是apply方法的神奇之处。

具体分析如下：Person.apply(this,arguments);

• 这里的this指向student对象，意味着将Person构造函数中的this绑定到student上。
• arguments是一个数组，在示例中表示为['A','10','一年级']。

通俗来说，就是让student去执行Person构造函数内的逻辑。由于Person内部存在this.name等语句，这些属性最终被创建到了student对象中。

apply()和call()的作用本质相同，主要区别在于接收参数的方式不同：call()要求将参数逐个列出。

call()的具体用法

四、的具体用法

在Student函数中，可以将apply替换为如下写法：

Person.call(this,name,age);

何时使用apply()，何时使用call()？

五、何时使用apply()，何时使用call()？

选择使用apply()还是call()，主要取决于哪种给函数传递参数的方式更为便捷。

如果计划直接传入arguments对象或数组，且参数列表一致，则使用apply()；否则，选择call()可能更为合适。

例如：在apply示例中，传递了arguments参数，且在调用Person时参数列表对应一致（即Person和Student的前两个参数顺序相同），此时可以采用apply。

如果Person的参数列表顺序为（age, name），而Student的参数列表顺序为（name, age, grade），这种情况下则适合使用call来实现：Person.call(this,age,name,grade);

关于apply()的更多应用案例，可参考：//www.jb51.net/article/164140.htm

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码的运行效果。

更多关于JavaScript相关内容，可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》。

希望本文所述的知识点能对大家的JavaScript程序设计有所帮助。