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 ý:
this
khô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
this
khác với bình thường. Ví dụ,this
sẽ làundefined
trong 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.