在本教程中，您将了解类型JavaScript  Function 的 apply() 方法以及如何有效地使用它。

JavaScript apply()方法介绍

Function.prototype.apply() 方法允许使用指定的 this 值和一个类数组对象的参数调用函数。下面是 apply() 方法的语法：

fn.apply(thisArg, [args]);

apply() 方法接受两个参数：

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

apply() 方法与 call() 方法类似，只是它将函数的参数作为数组而不是每个参数都都单独传递。

JavaScript apply() 方法示例

让我们举一些使用 apply() 方法的例子。

简单的 JavaScript apply() 方法示例

假设你有一个person对象：

const person = {
    firstName: 'John',
    lastName: 'Doe'
}

和一个命名为 greet() 的函数，如下：

function greet(greeting, message) {
    return `${greeting} ${this.firstName}. ${message}`;
}

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

下面的示例展示如何使用 apply() 方法调用 greet() 函数并设置 greet() 函数的 this 值为 person对象：

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

console.log(result);

输出：

Hello John. How are you?

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

该apply()方法调用了greet()函数，并将this值设置为person对象并将参数设置为数组['Hello', 'How are you?']。

如果使用 call() 方法，则需要单独传递  greet()  函数的参数，如下所示：

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

函数借用

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`;
    }
};

和 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);

输出：

The Dell PowerEdge T30 is On

在这个例子中，server 对象借用 computer 对象的 turnOn() 方法。同样，你可以在 server 对象调用 computer 对象的 turnOff() 方法。

let result = computer.turnOff.apply(server);
console.log(result);

输出：

The Dell PowerEdge T30 is Off

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

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

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

arr.push.apply(arr, numbers);

console.log(arr);

在此示例中，apply() 方法修改原始数组 arr。值得一提的是，Array.prototype.concat() 方法也有同样的效果，只是它返回新数组而不是修改原始数组。

结论

  • apply() 方法调用函数使用指定的 this 值和一个类数组对象的参数。
  • apply() 方法与 call() 方法类似，只是 apply()  接受的参数是数组而不是单个参数