JavaScript call() 方法及其实际应用

摘要：在本教程中，您将学习 JavaScript call() 方法以及如何更有效地使用它。

JavaScript call() 方法简介

在 JavaScript 中，函数是 Function 类型的实例。例如

function add(x, y) {
  return x + y;
}

console.log(add instanceof Function); // trueCode language: JavaScript (javascript)

Function.prototype 类型具有 call() 方法，其语法如下：

functionName.call(thisArg, arg1, arg2, ...);Code language: JavaScript (javascript)

在此语法中，call() 方法使用参数 (arg1, arg2, …) 调用函数 functionName，并将 this 设置为函数内部的 thisArg 对象。

thisArg 是 this 对象在函数 functionName 内部引用的对象。
arg1, arg2, .. 是传递到 functionName 的函数参数。

call() 方法返回调用 functionName() 的结果。

以下示例定义了 add() 函数并按常規调用它

function add(x, y) {
  return x + y;
}

let result = add(10, 20);
console.log(result); // 30Code language: JavaScript (javascript)

以下调用 add() 函数，但使用 call() 方法代替

function add(x, y) {
  return x + y;
}

let result = add.call(this, 10, 20);
console.log(result); // 30Code language: JavaScript (javascript)

默认情况下，函数内部的 this 设置为全局对象，即 Web 浏览器中的 window 和 Node.js 中的 global。

请注意，在严格模式下，函数内部的 this 设置为 undefined 而不是全局对象。

请考虑以下示例

var greeting = 'Hi';

var messenger = {
    greeting: 'Hello'
}

function say(name) {
    console.log(this.greeting + ' ' + name);
}Code language: JavaScript (javascript)

在 say() 函数内部，我们通过 this 值引用 greeting。如果您只是通过 call() 方法调用 say() 函数，如下所示

say.call(this,'John');Code language: JavaScript (javascript)

它将在控制台中显示以下输出

"Hi John"Code language: JavaScript (javascript)

但是，当您调用 say 函数对象的 call() 方法并将 messenger 对象作为 this 值传递时

say.call(messenger,'John');Code language: JavaScript (javascript)

输出将是

"Hello John"Code language: JavaScript (javascript)

在这种情况下，say() 函数内部的 this 值引用了 messenger 对象，而不是全局对象。

使用 JavaScript call() 方法为对象链接构造函数

您可以使用 call() 方法来链接对象的构造函数。请考虑以下示例

function Box(height, width) {
  this.height = height;
  this.width = width;
}

function Widget(height, width, color) {
  Box.call(this, height, width);
  this.color = color;
}

let widget = new Widget('red', 100, 200);

console.log(widget);Code language: JavaScript (javascript)

输出

Widget { height: 'red', width: 100, color: 200 }Code language: JavaScript (javascript)

在此示例中

首先，使用两个属性初始化 Box 对象：height 和 width。
其次，在 Widget 对象内部调用 Box 对象的 call() 方法，并将 this 值设置为 Widget 对象。

使用 JavaScript call() 方法进行函数借用

以下示例说明了如何使用 call() 方法借用函数

const car = {
  name: 'car',
  start() {
    console.log('Start the ' + this.name);
  },
  speedUp() {
    console.log('Speed up the ' + this.name);
  },
  stop() {
    console.log('Stop the ' + this.name);
  },
};

const aircraft = {
  name: 'aircraft',
  fly() {
    console.log('Fly');
  },
};

car.start.call(aircraft);
car.speedUp.call(aircraft);
aircraft.fly();Code language: JavaScript (javascript)

输出

Start the aircraft
Speed up the aircraft
FlyCode language: JavaScript (javascript)

它是如何工作的。

首先，定义一个名为 car 的对象，它具有一个名为属性和三个方法 start、speedUp 和 stop

const car = {
  name: 'car',
  start() {
    console.log('Start the ' + this.name);
  },
  speedUp() {
    console.log('Speed up the ' + this.name);
  },
  stop() {
    console.log('Stop the ' + this.name);
  },
};Code language: JavaScript (javascript)

其次，定义一个名为 aircraft 的对象，它具有一个名为属性和一个方法

const aircraft = {
  name: 'aircraft',
  fly() {
    console.log('Fly');
  },
};Code language: JavaScript (javascript)

第三，调用 car 对象的 start() 和 speedUp() 方法以及 aircraft 对象的 fly() 方法。但是，将 aircraft 作为第一个参数传递到 start() 和 speedUp() 方法中

car.start.call(aircraft);
car.speedUp.call(aircraft);
aircraft.fly();Code language: JavaScript (javascript)

在 start() 和 speedUp() 方法内部，this 引用了 aircraft 对象，而不是 car 对象。因此，this.name 返回字符串 'aircraf'。因此，这些方法输出以下消息

Start the aircraft
Speed up the aircraftCode language: plaintext (plaintext)

从技术上讲，aircraft 对象借用了 car 对象的 start() 和 speedUp() 方法。函数借用是指一个对象使用另一个对象的方法。

以下示例说明了 arguments 对象如何通过 call() 函数借用 Array.prototype 的 filter() 方法

function isOdd(number) {
  return number % 2;
}

function getOddNumbers() {
  return Array.prototype.filter.call(arguments, isOdd);
}

let results = getOddNumbers(10, 1, 3, 4, 8, 9);
console.log(results);Code language: JavaScript (javascript)

输出

[ 1, 3, 9 ]Code language: JavaScript (javascript)

它是如何工作的。

首先，定义 isOdd() 函数，如果数字为奇数则返回 true

function isOdd(number) {
  return number % 2;
}Code language: JavaScript (javascript)

其次，定义 getOddNumbers() 函数，它接受任意数量的参数并返回仅包含奇数的数组

function getOddNumbers() {
  return Array.prototype.filter.call(arguments, isOdd);
}Code language: JavaScript (javascript)

在此示例中，arguments 对象借用了 Array.prototype 对象的 filter() 方法。

第三，调用 getOddNumbers() 函数

let results = getOddNumbers(10, 1, 3, 4, 8, 9);
console.log(results);Code language: JavaScript (javascript)

在本教程中，您已经学习了 JavaScript call() 方法以及如何更有效地使用它。

本教程是否有帮助？