JavaScript: Phương thức apply()

Phương thức áp Apply() trong JavaScript

Phương thức Function.prototype.apply() này cho phép bạn gọi một hàm với một giá trị  this nhất định và các đối số được cung cấp dưới dạng một mảng. Đây là cú pháp của phương thức apply():

fn.apply(thisArg, [args]);

Phương thức này apply() chấp nhận hai đối số:

• Giá trị thisArg này được cung cấp cho lệnh gọi hàm fn.
• Đối số args là một mảng xác định các đối số của hàm fn. Kể từ ES5, đối số args có thể là một đối tượng giống như mảng hoặc một đối tượng mảng.

Phương thức apply() tương tự như phương thức call() ngoại trừ việc nó lấy các đối số của hàm dưới dạng một mảng thay vì các đối số riêng lẻ.

Ví dụ

1) Ví dụ về phương thức apply() đơn giản

Giả sử bạn có một đối tượng person:

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

…và một hàm có greet()như sau:

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

Hàm greet() chấp nhận hai tham số: greeting và message. Bên trong hàm greet(), chúng ta tham chiếu một đối tượng có thuộc tính firstName.

Ví dụ sau đây cho thấy cách sử dụng phương thức apply() để gọi hàm greet() với this được truyền vào là đối tượng person:

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

Output

Hello John. How are you?

Trong ví dụ này, chúng ta đặt giá trị this bên trong hàm là đối tượng person. Các đối số của hàm greet() được truyền vào phương thức apply() dưới dạng một mảng.

Phương thức apply() này đã gọi hàm  greet() với giá trị this được đặt cho đối tượng person và các đối số là một mảng ['Hello', 'How are you?'].

Nếu bạn sử dụng phương thức call(), bạn cần truyền riêng các đối số của hàm greet() như sau:

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

2) Function borrowing (hàm mượn)

Phương thức pply() cho phép một đối tượng mượn phương thức của đối tượng khác mà không cần sao chép mã.

Giả sử bạn có đối tượng computer sau:

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

… và đối tượng server sau:

const server = {
    name: 'Dell PowerEdge T30',
    isOn: false
};

Đối tượng server không có phương thức turnOn() và turnOff().

Để thực thi phương thức turnOn() của đối tượng computer trên đối tượng server, bạn có thể sử dụng phương thức apply() như sau:

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

console.log(result);

Output

The Dell PowerEdge T30 is On

Trong ví dụ này, đối tượng server mượn phương thức turnOn() của đối tượng computer.

Tương tự, bạn có thể gọi phương thức turnOff() của đối tượng computer trên đối tượng server:

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

Output

The Dell PowerEdge T30 is Off

3) Sử dụng phương thức apply() nối mảng vào mảng khác

Phương thức apply() cho phép bạn nối các phần tử của một mảng vào một mảng khác:

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

arr.push.apply(arr, numbers);

console.log(arr); // output là mảng arr với 6 phần tử [1, 2, 3, 4, 5, 6]

Trong ví dụ này, phương thức apply() sửa đổi mảng arr ban đầu. Lưu ý rằng phương thức Array.prototype.concat() cũng cung cấp kết quả tương tự ngoại trừ việc nó trả về mảng mới thay vì sửa đổi mảng ban đầu.

Tóm tắt

• Phương thức này apply() gọi một hàm có giá trị this cho trước và các đối số được cung cấp dưới dạng một mảng.
• Phương thức này apply() tương tự như phương thức call() ngoại trừ việc nó chấp nhận các đối số của hàm dưới dạng một mảng thay vì các đối số riêng lẻ.