Monday, January 20, 2025

[Javascript] – Phần 49: This trong JavaScript là gì?

-

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ặc bind().
  • 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4,956FansLike
256FollowersFollow
223SubscribersSubscribe
spot_img

Related Stories