this là một từ khóa quan trọng trong JavaScript, nó đề cập đến một đối tượng. Tuy nhiên, đối tượng mà this đề cập đến thay đổi tùy thuộc vào cách sử dụng của nó.
Các cách sử dụng this:
- Trong một phương thức đối tượng:
thisđề cập đến đối tượng mà phương thức đó thuộc về. - Độc lập:
thisđề cập đến đối tượng toàn cục (trừ khi ở chế độ strict mode). - Trong một hàm: Mặc định,
thisđề cập đến đối tượng toàn cục. Tuy nhiên, có thể thay đổi hành vi này bằng cách sử dụng các phương thức nhưcall(),apply()hoặcbind(). - Trong một sự kiện:
thisđề cập đến phần tử HTML đã nhận sự kiện đó. - Với các phương thức
call(),apply(),bind()':** Những phương thức này cho phép bạn **chỉ định đối tượng màthis` sẽ tham chiếu khi gọi một hàm.
Lưu ý:
thiskhông phải là một biến. Bạn không thể thay đổi giá trị của nó.- Trong chế độ strict mode, hành vi của
thiskhác với bình thường. Ví dụ,thissẽ làundefinedtrong một hàm nếu không được chỉ định.
Dưới đây là một số ví dụ.
Trong phương thức đối tượng.
const person = {
firstName: "John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // Output: John Doe
Độc lập.
console.log(this); // Output: Window { ... } (global object)Trong một hàm.
function myFunction() {
console.log(this); // Output: Window { ... } (global object)
}
myFunction();
Trong một sự kiện.
<button onclick="this.style.display = 'none'">Click to remove me!</button>
Với các phương thức call(), apply(), `bind()’:
const person1 = {
fullName: function () {
return this.firstName + " " + this.lastName;
}
};
const person2 = {
firstName: "Jane",
lastName: "Doe"
};
console.log(person1.fullName.call(person2)); // Output: Jane Doe
Kết luận.
Hiểu cách sử dụng this là điều cần thiết để viết JavaScript code chính xác và hiệu quả. Luôn nhớ về thứ tự ưu tiên khi xác định this và sử dụng các phương thức như call(), apply(), bind() để kiểm soát hành vi của this theo ý muốn.
