JavaScript中Call与Apply方法的原理及用法详解

作者：异步漫步时间：2026-10-23 15:52:11浏览：491

本文深入解析JavaScript中call和apply方法的原理与区别。通过对象方法重用的实例，展示如何利用这两个方法改变函数执行时的this指向。文章详细对比了call接受参数列表与apply接受数组参数的不同用法，并探讨了在严格模式下第一个参数的行为差异，帮助开发者掌握函数绑定的核心技巧。

本文详细解析JavaScript中call和apply方法的原理，并通过具体示例代码进行说明，旨在为读者的学习和工作提供有价值的参考。

方法重用与函数作为对象方法

一、方法重用

借助call()方法，开发者可以编写出可在不同对象间复用的函数逻辑。

1、函数作为对象方法

在JavaScript语言体系中，函数本质上属于对象的方法。

若某个函数未绑定于特定JavaScript对象，则其默认归属于全局对象（具体可参考相关章节）。

以下示例构建了一个包含三个属性（firstName、lastName、fullName）的对象。


var person = {
  firstName:"Bill",
  lastName: "Gates",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
person.fullName();    // 将返回 "Bill Gates"

其中，fullName属性被定义为一个方法，而person对象则是该方法的拥有者。

换言之，fullName属性是依附于person对象的方法。

call()方法的原理与参数传递

二、call() 方法

call()是JavaScript预定义的方法。

它允许调用者将拥有该方法的对象作为参数传入，从而执行该方法。

通过call()，开发者可以借用属于其他对象的方法。

本例演示了调用person对象的fullName方法，并将其应用于person1对象：


var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates",
}
var person2 = {
  firstName:"Steve",
  lastName: "Jobs",
}
person.fullName.call(person1); // 将返回 "Bill Gates"

本例演示了调用person对象的fullName方法，并将其应用于person2对象：


var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe",
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe",
}
person.fullName.call(person2); // 将返回 "Steve Jobs"

1、带参数的call()方法

call()方法支持接收额外的参数：


var person = {
 fullName: function(city, country) {
  return this.firstName + " " + this.lastName + "," + city + "," + country;
 }
}
var person1 = {
 firstName:"Bill",
 lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

apply()方法与call()的区别

三、apply() 方法

apply()方法与call()方法在功能上高度相似：

在本例中，person对象的fullName方法被应用到了person1对象上：


var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName: "Bill",
  lastName: "Gates",
}
person.fullName.apply(person1); // 将返回 "Bill Gates"

1、call()与apply()的区别

两者的主要区别在于：

call()方法接收独立的参数列表。

apply()方法接收一个包含参数的数组。

当需要将数组作为参数传递时，apply()方法显得尤为便捷。

2、带参数的apply()方法

apply()方法接收数组形式的参数：


var person = {
 fullName: function(city, country) {
  return this.firstName + " " + this.lastName + "," + city + "," + country;
 }
}
var person1 = {
 firstName:"John",
 lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

与call()方法对比：


var person = {
 fullName: function(city, country) {
  return this.firstName + " " + this.lastName + "," + city + "," + country;
 }
}
var person1 = {
 firstName:"John",
 lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");

利用apply模拟数组最大值及严格模式行为

3、在数组上模拟max方法

您可以使用Math.max()方法来找出数字列表中的最大值：


Math.max(1,2,3); // 会返回 3

由于JavaScript原生数组没有max()方法，我们可以借用Math.max()方法来实现此功能。


Math.max.apply(null, [1,2,3]); // 也会返回 3

此处的第一个参数（null）在此例中并不重要，因为并未实际使用它。

以下示例均会返回相同的结果：


Math.max.apply(Math, [1,2,3]); // 也会返回 3
Math.max.apply(" ", [1,2,3]); // 也会返回 3
Math.max.apply(0, [1,2,3]); // 也会返回 3

4、JavaScript严格模式

在JavaScript严格模式下，若apply()方法的第一个参数不是对象，则该参数将成为被调用函数的所有者（即this指向该参数）。而在非严格模式下，它则指向全局对象。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

D3.js 比例尺与坐标轴的配置详解

2026-11-05 16:54:46

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19