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

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của phương thức bind(). Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ khám phá khái niệm này từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau lặn sâu vào!

Phương thức bind()

Hãy tưởng tượng bạn đang tham gia một buổi tiệc hóa trang, và bạn có khả năng thay đổi bất kỳ ai bạn muốn. Có vẻ thú vị phải không? Well, trong JavaScript, các hàm có một siêu năng lực tương tự gọi là bind(). Nó cho phép một hàm thay đổi ngữ cảnh của nó - nói cách khác, để quyết định this sẽ trỏ đến gì khi hàm được gọi.

Nhưng đợi đã, this là gì? Đừng lo lắng, chúng ta sẽ đến đó! Hiện tại, chỉ cần nghĩ về this như là cảm giác tự nhận dạng của hàm.

Cú pháp

Hãy cùng nhìn vào cách chúng ta sử dụng phương thức bind():

let boundFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]])

Đừng để điều này làm bạn hoảng sợ! Nó đơn giản hơn bạn nghĩ. Hãy cùng phân tích nó:

• originalFunction: Đây là hàm mà bạn muốn liên kết.
• thisArg: Đây là điều bạn muốn this trỏ đến bên trong hàm.
• arg1, arg2, ...: Đây là các đối số tùy chọn mà bạn có thể đặt trước cho hàm.

Khi không sử dụng phương thức bind()

Trước khi chúng ta thấy bind() trong hành động, hãy nhìn vào một tình huống mà chúng ta có thể cần nó:

const person = {
name: "Alice",
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

person.greet(); // Output: Hello, my name is Alice

const greetFunction = person.greet;
greetFunction(); // Output: Hello, my name is undefined

Whoa! Điều gì đã xảy ra ở đó? Khi chúng ta gọi person.greet(), nó hoạt động tốt. Nhưng khi chúng ta gán hàm vào greetFunction và gọi nó, đột nhiên this.name trở thành undefined. Như thể hàm của chúng ta đã丢失的记忆!

Điều này là vì khi chúng ta gọi greetFunction(), this không còn trỏ đến person nữa. Nó như thể hàm của chúng ta đã quên mất nó thuộc về ai.

Khi sử dụng phương thức bind()

Bây giờ, hãy nhìn cách bind() có thể cứu nguy:

const person = {
name: "Alice",
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

const greetFunction = person.greet.bind(person);
greetFunction(); // Output: Hello, my name is Alice

Ta-da! Bằng cách sử dụng bind(person), chúng ta đã nói với hàm, "Hey, không matter where you go, always remember that this refers to person." Bây giờ hàm của chúng ta sẽ luôn biết được danh tính của nó!

Ví dụ: Liên kết các đối tượng khác nhau vào cùng một hàm

Hãy cùng nhau vui chơi và xem cách chúng ta có thể sử dụng cùng một hàm với các đối tượng khác nhau:

function introduce() {
console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
}

const alice = { name: "Alice", age: 25 };
const bob = { name: "Bob", age: 30 };

const introduceAlice = introduce.bind(alice);
const introduceBob = introduce.bind(bob);

introduceAlice(); // Output: Hi, I'm Alice and I'm 25 years old.
introduceBob();   // Output: Hi, I'm Bob and I'm 30 years old.

Có phải điều đó rất tuyệt vời không? Nó như thể hàm introduce của chúng ta là một con rùa chameleon, thay đổi danh tính dựa trên đối tượng mà chúng ta liên kết nó!

Ví dụ: Đặt giá trị mặc định của các tham số hàm

bind() còn một chiêu trò khác - nó có thể đặt trước các đối số cho hàm:

function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Charlie" };

const casualGreet = greet.bind(person, "Hey");
casualGreet("!"); // Output: Hey, Charlie!

const formalGreet = greet.bind(person, "Good day", ".");
formalGreet(); // Output: Good day, Charlie.

Ở đây, chúng ta đã sử dụng bind() không chỉ để đặt this, mà còn để đặt trước một số đối số. Nó như thể chuẩn bị một biểu mẫu đã điền một phần - rất tiện lợi!

Bảng phương thức

Dưới đây là bảng tham khảo nhanh các phương thức chúng ta đã thảo luận:

Phương thức	Mô tả	Cú pháp
bind()	Tạo một hàm mới với giá trị this cố định	function.bind(thisArg[, arg1[, arg2[, ...]]])

Nhớ rằng bind() chỉ là một trong nhiều công cụ mạnh mẽ trong JavaScript. Khi bạn tiếp tục hành trình lập trình của mình, bạn sẽ khám phá nhiều tính năng thú vị khác!

Cuối cùng, bind() như một loại keo ma thuật có thể dính một hàm vào một đối tượng, đảm bảo chúng luôn làm việc cùng nhau một cách hài hòa. Nó là một công cụ mạnh mẽ có thể làm cho mã của bạn linh hoạt và tái sử dụng hơn.

Tiếp tục thực hành, 保持好奇心, và sớm bạn sẽ liên kết hàm như một chuyên gia! Chúc mừng lập trình, các nhà vô địch JavaScript tương lai!

Credits: Image by storyset