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

Xin chào các bạn tương lai của các pháp sư JavaScript! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những phương thức mạnh mẽ và linh hoạt nhất trong JavaScript: phương thức apply(). Cuối cùng của bài hướng dẫn này, bạn sẽ sử dụng apply() như một chuyên gia! Hãy cùng bắt đầu hành trình thú vị này.

什么是 Function apply() Phương thức?

Phương thức apply() là một hàm nội tại của JavaScript cho phép chúng ta gọi một hàm với một giá trị this được chỉ định và các đối số được cung cấp dưới dạng một mảng (hoặc một đối tượng giống như mảng). Nó giống như một枝 cành ma thuật giúp bạn kiểm soát cách một hàm được thực thi!

Tại sao apply() lại quan trọng?

1. Nó cho chúng ta sự linh hoạt trong cách gọi hàm.
2. Nó cho phép chúng ta mượn các phương thức từ các đối tượng khác.
3. Nó超级有用 khi làm việc với số lượng đối số thay đổi.

Bây giờ, hãy cùng nhìn vào cú pháp và sau đó đi vào một số ví dụ!

Cú pháp của apply()

Dưới đây là cú pháp cơ bản của phương thức apply():

functionName.apply(thisArg, [argsArray])

Hãy phân tích này:

• functionName: Hàm bạn muốn gọi.
• thisArg: Giá trị của this được cung cấp cho cuộc gọi hàm.
• argsArray: Một mảng hoặc đối tượng giống như mảng chỉ định các đối số mà functionName nên được gọi với.

Nó có thể trông hơi rối rắm bây giờ, nhưng đừng lo lắng! Chúng ta sẽ đi qua rất nhiều ví dụ để làm cho nó rõ ràng.

Ví dụ về apply() trong hành động

Ví dụ 1: Sử dụng cơ bản

Hãy bắt đầu với một ví dụ đơn giản:

function greet(name) {
console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

Kết quả:

Hello, Bob! My name is Alice.

Trong ví dụ này:

1. Chúng ta định nghĩa một hàm greet sử dụng this.name.
2. Chúng ta tạo một đối tượng person với thuộc tính name.
3. Chúng ta sử dụng apply() để gọi greet, đặt this thành person và truyền 'Bob' làm đối số.

Phép màu ở đây là apply() cho phép chúng ta xác định this tham chiếu đến bên trong hàm. Đ Cooler, phải không?

Ví dụ 2: Sử dụng apply() với Math.max()

Dưới đây là một ví dụ thực tế sử dụng Math.max():

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

Kết quả:

7

Trong trường hợp này:

1. Chúng ta có một mảng số.
2. Chúng ta sử dụng apply() để truyền mảng này trực tiếp vào Math.max().
3. null được sử dụng làm đối số đầu tiên vì Math.max() không sử dụng this.

Điều này超级 hữu ích khi bạn có một mảng số và muốn tìm giá trị lớn nhất!

Ví dụ 3: Mượn các phương thức mảng

Bây giờ, hãy xem cách chúng ta có thể sử dụng apply() để mượn các phương thức:

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

Kết quả:

['a', 'b', 'c']

Điều gì đang xảy ra ở đây?

1. Chúng ta có một đối tượng trông giống như mảng nhưng không phải là một mảng.
2. Chúng ta mượn phương thức slice() từ Array.prototype.
3. apply() cho phép chúng ta sử dụng slice() trên đối tượng giống như mảng của chúng ta, chuyển đổi nó thành một mảng thực sự.

Điều này超级 hữu ích khi làm việc với các phần tử DOM hoặc các đối tượng giống như mảng khác!

Ví dụ 4: Áp dụng các hàm với nhiều đối số

Hãy thử một điều gì đó phức tạp hơn:

function introduce(greeting, hobby) {
console.log(`${greeting}, I'm ${this.name}. I love ${hobby}!`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Hi there', 'coding']);
introduce.apply(person2, ['Hello', 'painting']);

Kết quả:

Hi there, I'm Charlie. I love coding!
Hello, I'm Diana. I love painting!

Trong ví dụ này:

1. Chúng ta định nghĩa một hàm introduce nhận hai đối số.
2. Chúng ta tạo hai đối tượng person.
3. Chúng ta sử dụng apply() để gọi introduce cho từng người, truyền các đối số khác nhau.

Điều này cho thấy cách apply() có thể được sử dụng với nhiều đối số và các giá trị this khác nhau.

So sánh các phương thức hàm

Hãy so sánh apply() với các anh em của nó call() và bind():

Phương thức	Cú pháp	Mô tả
apply()	func.apply(thisArg, [argsArray])	Gọi một hàm với một giá trị this được chỉ định và các đối số dưới dạng một mảng
call()	func.call(thisArg, arg1, arg2, ...)	Tương tự như apply(), nhưng các đối số được truyền riêng lẻ
bind()	func.bind(thisArg, arg1, arg2, ...)	Tạo một hàm mới với một giá trị this cố định và các đối số ban đầu

Mỗi phương thức đều có trường hợp sử dụng của riêng mình, nhưng apply() tỏa sáng khi bạn có các đối số trong một mảng hoặc cần làm việc với các đối tượng giống như mảng.

Kết luận

Chúc mừng! Bạn vừa mới đi sâu vào thế giới của apply(). Từ sử dụng cơ bản đến mượn phương thức và làm việc với nhiều đối số, bạn đã thấy sự linh hoạt và mạnh mẽ của phương thức này.

Nhớ rằng apply() giống như một cây kéo đa năng trong bộ công cụ JavaScript của bạn. Nó có thể cần một chút thời gian để làm chủ, nhưng một khi bạn làm được, bạn sẽ thấy mình sử dụng nó trong nhiều tình huống khác nhau.

Tiếp tục thử nghiệm với apply(), và đừng ngại sáng tạo. Ai biết được? Bạn có thể sẽ apply() chính mình trở thành một pháp sư JavaScript! Chúc may mắn, các nhà phát triển tương lai!

Credits: Image by storyset