JavaScript中apply()与call()方法的用法及区别详解

apply()与call()方法概述

本文通过具体实例，对JavaScript中apply()和call()方法的用法及其异同进行了深入分析，旨在为读者提供清晰的参考与学习思路。

在JavaScript中，函数本质上也是对象，因此它们拥有自身的属性和方法。每个函数都内置了length和prototype两个属性，同时包含两个非继承自原型的特有方法：apply()和call()。

接下来，我们将重点探讨在前端开发面试中常被问及的apply()与call()之间的具体区别。

apply()与call()的参数传递区别

这两个方法的核心作用是在函数调用时修改其执行上下文，即改变函数内部this的指向。其中，apply()方法接受两个参数：第一个参数指定函数运行的作用域，第二个参数可以是arguments对象，也可以是一个包含参数的数组。

call()方法与apply()方法的作用相同，它们的区别仅在于接收参数的方式不同，第一个参数不变，变化的是其余参数都直接传递给函数，也就是说，传递给函数的参数必须逐个列举出来。

JavaScript内部使用数组来表示函数参数。基于这一特性，的使用频率往往高于，因为使用时无需关心具体传入参数的数量，只需将参数数组整体传入即可。如果明确知道函数接收的参数个数，且希望清晰地表达形参与实参的对应关系，则更适合使用。

特殊场景：this指向与null处理

在使用或时，如果传入的第一个参数为null，函数体内的this将指向默认的宿主对象，在浏览器环境中即为window对象；但在严格模式下，this仍保持为null。有时，使用这两个方法的目的并非为了指定this指向，而是为了借用其他对象的方法，此时可以传入null来替代具体的对象，例如：Math.max.apply(null, [1,5,2,4,3]]);。

下面通过一个具体示例来演示上述概念：

function sum(num1, num2) {
  return num1 + num2;
}
function applyFunc1(num1, num2) {
  return sum.apply(this, arguments);
}
function applyFunc2(num1, num2) {
  return sum.apply(this, [num1, num2]);
}
function callFunc(num1, num2) {
  return sum.call(this, num1, num2);
}
alert(applyFunc1(10, 20));//输出：30
alert(applyFunc2(10, 20));//输出：30
alert(callFunc(10, 20));//输出：30

函数作为对象的本质

在JavaScript中，函数实际上是对象，而函数名则是对Function对象的引用。

function add(a,b) {
  alert(a+b);
}
function sub(a,b) {
  alert(a-b);
}
add.call(sub,3,1); //输出：30

如果认为apply()和call()仅用于传递参数，那就误解了它们真正的强大之处。它们更重要的功能在于能够扩展函数赖以运行的作用域。

核心用途：改变this与方法借用

和的主要用途包括：

第一，改变this的指向。

和最常见的应用场景是改变函数内部的this指向，如前文示例所示。

第二，借用其他对象的方法。

借用方法的第一种典型场景是利用其他对象的构造函数。

var Student = function(name) {
  this.name = name;
};
var Teacher = function(name) {
  Student.apply(this,arguments);
};
Teacher.prototype.getName = function() {
  return this.name;
};
var teacher = new Teacher("Alice");
console.log(teacher.getName()); // 输出：Alice

借用方法的第二种典型场景是直接借用其他对象的方法。

当执行showColor.call(obj)时，函数的执行环境便切换到了指定的对象中。

window.color = "white";
var obj = {color: "black"};
function showColor() {
  alert(this.color);
}
showColor();//输出："white"
showColor.call(this);//输出："white"
showColor.call(window);//输出："white"
showColor.call(obj);//输出："black"

此时无需将showColor()函数定义到对象obj内部，再通过obj进行调用，从而简化了代码结构。

window.color = "white";
var obj = {color : "black"};
function showColor() {
  alert(this.color);
}
showColor();//输出："white"
obj.showColor = showColor;
obj.showColor();//输出："black"

如果您对更多JavaScript相关内容感兴趣，建议查阅本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文的阐述能对您的JavaScript程序设计工作有所帮助。