Rate this post

Bind trong JavaScript là một method của đối tượng Function mà giúp bạn giữ lại một tham chiếu đến một hàm và đặt các tham số mặc định cho nó. Nó trả về một hàm mới với các tham số đã được cố định, và khi bạn gọi hàm đó, nó sẽ luôn giữ các tham số đó như là giá trị mặc định.

Các bài viết liên quan:

Tại sao nên sử dụng bind() ? 

Có một số lý do tại sao bạn nên sử dụng bind() trong JavaScript:

  1. Giữ lại context: Khi bạn truyền một hàm như một tham số cho một hàm khác hoặc khi bạn gán một hàm cho một biến, context (tức là this) của hàm đó sẽ thay đổi. Sử dụng bind() sẽ giúp bạn giữ lại context của hàm ban đầu.
  2. Cố định tham số: bind() cho phép bạn đặt các tham số mặc định cho một hàm. Điều này có thể hữu ích khi bạn muốn sử dụng một hàm nhiều lần với các giá trị tham số khác nhau.
  3. Tái sử dụng hàm: Khi bạn sử dụng bind() để cố định tham số cho một hàm, bạn có thể tái sử dụng hàm đó nhiều lần với các giá trị tham số khác nhau mà không cần phải tạo ra một hàm mới.
  4. Cách tiếp cận cho các hàm callback: Trong JavaScript, chúng ta thường sử dụng hàm callback để thực hiện một hành động sau khi một hành động khác hoàn thành. Ví dụ, khi tải xong một tài nguyên từ mạng, chúng ta có thể sử dụng hàm callback để thực hiện một hành động tiếp theo. Nếu bạn muốn sử dụng một hàm nhất định như một hàm callback, bạn có thể sử dụng bind() để giữ lại context của hàm đó.
  5. Sử dụng trong các thư viện/framework: Nhiều thư viện và framework trong JavaScript sử dụng bind() để giúp cho việc lập trình trở nên dễ dàng hơn. Ví dụ, nhiều thư viện React sử dụng bind() để giữ lại context của các hàm trong một component, để tránh việc thay đổi context khi hàm đó được truyền vào như một prop.

Hướng dẫn sử dụng bind() trong javascript ?

Cách sử dụng bind() trong JavaScript là rất đơn giản. Bạn chỉ cần gọi bind() trên một hàm và truyền vào các tham số mặc định mà bạn muốn sử dụng. Ví dụ:

function sayHello(name) {

  console.log(`Hello, ${name}!`);

}

let boundSayHello = sayHello.bind(null, "John");

boundSayHello(); // Output: "Hello, John!"

Trong ví dụ trên, chúng ta gọi bind() trên hàm sayHello và truyền vào “John” làm tham số mặc định cho name. Kết quả là một hàm mới tên là boundSayHello, mà khi gọi sẽ in ra “Hello, John!”

Ngoài ra, bạn có thể truyền vào tham số cho hàm mới sau khi gọi bind.

boundSayHello(“Mary”); // Output: “Hello, Mary!”

Bạn cũng có thể sử dụng bind() để giữ lại context của một hàm bằng cách truyền vào đối tượng mà bạn muốn sử dụng làm this trong hàm ban đầu.

let obj = {name: "John"};

let boundSayHello = sayHello.bind(obj);

boundSayHello(); // Output: "Hello, John!"

Trong ví dụ trên, chúng ta truyền đối tượng obj vào bind() để giữ lại context của hàm sayHello obj , và khi gọi boundSayHello() sẽ in ra “Hello, John!”

Những lưu ý khi sử dụng bind trong javascript ?

  1. Không nên sử dụng bind() quá nhiều: Sử dụng bind() quá nhiều có thể gây ra vấn đề hiệu suất vì nó tạo ra nhiều bản sao của hàm ban đầu. Nên chỉ sử dụng bind() khi thực sự cần thiết.
  2. Chú ý với context: Khi sử dụng bind() để giữ lại context của hàm, hãy chắc chắn rằng context mà bạn truyền vào là chính xác và phù hợp với hàm đang sử dụng.
  3. Chú ý với tham số: Khi sử dụng bind() để truyền tham số cho hàm, hãy chắc chắn rằng các tham số được truyền vào đúng với hàm đang sử dụng và không gây ra lỗi.
  1. Chú ý với closure: Khi sử dụng bind() trong các closure, hãy chú ý rằng context của closure có thể thay đổi khi hàm được gọi, nên hãy chắc chắn rằng context mà bạn truyền vào là chính xác.
  2. Tìm hiểu thêm về các phương thức khác: Ngoài bind(), còn có các phương thức khác như call() apply() có thể giúp giải quyết các vấn đề với context và tham số trong javascript.

Ví dụ về cách sử dụng bind() trong javascript ?

  1. Sử dụng bind() trong hàm constructor:
class MyClass {

  constructor(name) {

    this.name = name;

    this.greet = this.greet.bind(this);

  }

  greet() {

    console.log(`Hello, ${this.name}!`);

  }

}

let myClass = new MyClass("John");

myClass.greet(); // Output: "Hello, John!"

Trong ví dụ trên, chúng ta sử dụng bind() trong hàm constructor để giữ lại context của hàm greet là this của class MyClass.

  1. Sử dụng bind() với setTimeout():
function sayHello() {

  console.log(`Hello, ${this.name}!`);

}

let obj = {name: "John"};

setTimeout(sayHello.bind(obj), 1000);

Trong ví dụ trên, chúng ta sử dụng bind() để giữ lại context của hàm sayHello là đối tượng obj, đảm bảo rằng khi hàm được gọi sau 1s, context của hàm vẫn là đối tượng obj và in ra “Hello, John!”

  1. Sử dụng bind() với các hàm arrow:
let obj = {name: "John"};

let sayHello = (name) => console.log(`Hello, ${name}!`);

let boundSayHello = sayHello.bind(obj, "John");

boundSayHello(); // Output: "Hello, John!"

Trong ví dụ trên, chúng ta sử dụng bind() để giữ lại context của hàm arrow sayHello là đối tượng obj và tham số “John” để in ra “Hello, John!”

  1. Sử dụng bind() trong các sự kiện:
let obj = {name: "John"};

let button = document.querySelector("button");

button.addEventListener("click", sayHello.bind(obj));

Trong ví dụ trên, chúng ta sử dụng bind() để giữ lại context của hàm sayHello là đối tượng obj khi sự kiện click xảy ra và in ra “Hello, John!”

  1. Sử dụng bind() trong các promise:
let obj = {name: "John"};

let promise = new Promise(function(resolve, reject) {

  setTimeout(resolve.bind(obj, "Success"), 1000);

});

promise.then(function(value) {

  console.log(`${value}, ${this.name}!`);

}); // Output: "Success, John!"

Trong ví dụ trên, chúng ta sử dụng bind() để giữ lại context của hàm resolve là đối tượng obj và in ra “Success, John!” sau 1s.

Các ví dụ trên chỉ là một số ví dụ về cách sử dụng bind() trong các trường hợp nhất định, còn rất nhiều trường hợp khác mà bạn có thể sử dụng bind() để giải quyết. 

Tuy nhiên, luôn luôn là một ý tưởng tốt để áp dụng bind() chỉ khi cần thiết và cẩn thận khi sử dụng nó, đặc biệt là với các hàm được gọi thường xuyên hoặc trong các môi trường có yêu cầu hiệu suất cao, vì nó có thể gây ra vấn đề hiệu suất.

Kết luận 

bind() là một phương thức rất hữu ích trong javascript, giúp giữ lại context và truyền tham số cho hàm một cách dễ dàng. Nó có thể giúp cho việc lập trình trở nên dễ dàng hơn và giảm thiểu các lỗi do thay đổi context. Tuy nhiên, khi sử dụng bind() luôn cần cẩn thận và chỉ sử dụng khi cần thiết.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now