14. This Trong Lập Trình JavaScript

Trong lập trình JavaScript, từ khóa “this” tham chiếu đến đối tượng hiện tại mà một hàm đang được gọi từ hoặc nơi mà một sự kiện xảy ra. Giá trị của “this” thay đổi dựa trên cách hàm được gọi và nơi mà nó được gọi từ. Hiểu rõ cách “this” hoạt động là quan trọng để viết mã JavaScript hiệu quả và tránh các lỗi thường gặp.

Các quy tắc sau đây giúp bạn xác định giá trị của “this” trong các trường hợp phổ biến:

Trong phạm vi của hàm: Khi “this” xuất hiện trong một hàm thông thường, giá trị của nó phụ thuộc vào cách hàm được gọi. Nếu hàm được gọi từ một đối tượng, “this” sẽ tham chiếu đến đối tượng đó. Nếu không, “this” sẽ tham chiếu đến đối tượng toàn cục (trong trường hợp của trình duyệt, đối tượng “window”).

javascript

const person = {
  name: "John",
  greet: function() {
    console.log("Xin chào, " + this.name);
  },
};

person.greet(); // Kết quả: Xin chào, John

const sayHello = person.greet;
sayHello(); // Kết quả: Xin chào, (undefined hoặc lỗi nếu không sử dụng strict mode)

Trong các hàm xử lý sự kiện: Khi bạn sử dụng “this” trong một hàm xử lý sự kiện (như khi sử dụng addEventListener), “this” sẽ tham chiếu đến phần tử mà hàm xử lý sự kiện đang được gắn kết.

html

<button id="myButton">Click me</button>

javascript

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", function() {
  console.log(this); // "this" sẽ tham chiếu đến phần tử button
});

Trong hàm xử lý arrow (mũi tên): Hàm arrow (mũi tên) không có ngữ cảnh “this” riêng của mình và nó sẽ kế thừa “this” từ phạm vi bên ngoài của nó.

javascript

const person = {
  name: "John",
  greet: function() {
    setTimeout(() => {
      console.log("Xin chào, " + this.name);
    }, 1000);
  },
};

person.greet(); // Kết quả: Xin chào, John (do arrow function kế thừa "this" từ hàm greet)

Trong các tình huống khác nhau, giá trị của “this” sẽ khác nhau. Nắm vững cách “this” hoạt động sẽ giúp bạn viết mã JavaScript chính xác và tránh các lỗi phổ biến liên quan đến ngữ cảnh của “this”.

Leave a Comment Cancel Reply