JavaScript apply() 方法

摘要: 本教程将介绍 JavaScript apply() 方法（Function 类型）以及如何有效地使用它。

JavaScript apply() 方法简介

Function.prototype.apply() 方法允许您使用给定的 this 值和作为 数组 提供的参数来调用 函数。以下是 apply() 方法的语法

fn.apply(thisArg, [args]);
Code language: JavaScript (javascript)

apply() 方法接受两个参数

• thisArg 是为调用函数 fn 提供的 this 值。
• args 参数是一个数组，指定函数 fn 的参数。从 ES5 开始，args 参数可以是类数组对象或数组对象。

apply() 方法类似于 call() 方法，只是它将函数的参数作为数组而不是单独的参数。

JavaScript apply() 方法示例

让我们来看一些使用 apply() 方法的示例。

1) 简单的 JavaScript apply() 方法示例

假设你有一个 person 对象

const person = {
    firstName: 'John',
    lastName: 'Doe'
}
Code language: JavaScript (javascript)

…以及一个名为 greet() 的函数，如下所示

function greet(greeting, message) {
    return `${greeting} ${this.firstName}. ${message}`;
}
Code language: JavaScript (javascript)

greet() 函数接受两个参数：greeting 和 message。在 greet() 函数内部，我们引用一个具有 firstName 属性的对象。

以下示例展示了如何使用 apply() 方法调用 greet() 函数，并将 this 设置为 person 对象

let result = greet.apply(person, ['Hello', 'How are you?']);

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

输出

Hello John. How are you?
Code language: JavaScript (javascript)

在这个例子中，我们将函数内部的 this 值设置为 person 对象。greet() 函数的参数作为数组传递给 apply() 方法。

apply() 方法使用 this 值设置为 person 对象和作为数组 ['Hello', 'How are you?'] 的参数来调用 greet() 函数。

如果您使用 call() 方法，则需要分别传递 greet() 函数的参数，如下所示

let result = greet.call(person, Hello', 'How are you?');
Code language: JavaScript (javascript)

2) 函数借用

apply() 方法允许一个对象借用另一个对象的方法，而无需重复代码。

假设你有以下 computer 对象

const computer = {
    name: 'MacBook',
    isOn: false,
    turnOn() {
        this.isOn = true;
        return `The ${this.name} is On`;
    },
    turnOff() {
        this.isOn = false;
        return `The ${this.name} is Off`;
    }
};
Code language: JavaScript (javascript)

…以及以下 server 对象

const server = {
    name: 'Dell PowerEdge T30',
    isOn: false
};
Code language: JavaScript (javascript)

server 对象没有 turnOn() 和 turnOff() 方法。

要对 server 对象执行 computer 对象的 turnOn() 方法，您可以使用 apply() 方法，如下所示

let result = computer.turnOn.apply(server);

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

输出

The Dell PowerEdge T30 is On
Code language: JavaScript (javascript)

在这个例子中，server 对象借用了 computer 对象的 turnOn() 方法。

同样，您可以在 server 对象上调用 computer 对象的 turnOff() 方法

let result = computer.turnOff.apply(server);
console.log(result);Code language: JavaScript (javascript)

输出

The Dell PowerEdge T30 is OffCode language: JavaScript (javascript)

3) 使用 apply() 方法将一个数组追加到另一个数组

apply() 方法允许您将一个数组的元素追加到另一个数组

let arr = [1, 2, 3];
let numbers = [4, 5, 6];

arr.push.apply(arr, numbers);

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

在这个例子中，apply() 方法修改了原始数组 arr。请注意，Array.prototype.concat() 方法也提供相同的结果，只是它返回新的数组而不是修改原始数组。

总结

• apply() 方法使用给定的 this 值和作为数组提供的参数来调用函数。
• apply() 方法类似于 call() 方法，只是它接受函数的参数作为数组而不是单独的参数。