JS this Keyword

In a Method

Từ khóa this khi nằm bên trong phương thức thì nó tham chiếu đến là đối tượng đang gọi thực hiện phương thức đó.

Khái niệm này giống với C++ khi this của C/C++ giữ địa chỉ của đối tượng đang gọi thực hiện phương thức.

Info

Về bản chất, this cũng giữ địa chỉ vùng nhớ, nhưng trong JS chúng ta không được phép kiểm soát vùng nhớ (tham khảo JS Data Types). Vì vậy mà giá trị khi truy xuất của this sẽ là một đối tượng mà nó đang trỏ đến thay vì là địa chỉ giống C/C++.

Ví dụ 1:

const pikachu = {
  level: 1,
  type: "electric",
 
  evolve() {
    // 'this' references to pikachu object
    this.level += 1
  },
}
 
pikachu.evolve()
 
console.log(pikachu.level) // 2

Ví dụ 2:

<button>Click me!</button>

const button = document.querySelector("button")
 
button.onclick = function () {
  // 'this' reference to button object
  console.log(this) // <button>Clickme</button>
}

Nếu this ở bên trong constructor, nó sẽ trỏ đến đối tượng sắp được tạo ra vì bản chất của constructor cũng là một phương thức.

In a Function

Khi sử dụng this bên trong một hàm và không thông qua đối tượng thì this sẽ tham chiếu đến đối tượng window (là đối tượng global).

function f() {
  console.log(this)
}
 
f() // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

Lý do là vì bản chất của hàm là một phương thức được khai báo bên trong đối tượng window.

Nếu sử dụng bên trong strict mode, this bên trong hàm sẽ có giá trị là undefined.

"use strict"
 
function f() {
  console.log(this)
}
 
f() // undefined

Tuy nhiên, nếu chúng ta gọi hàm f như là phương thức của đối tượng window, this sẽ trả về đối tượng window.

"use strict"
 
function f() {
  console.log(this)
}
 
window.f() // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

Stand Alone

Từ khóa this khi nằm ngoài phương thức thì cũng sẽ tham chiếu đến đối tượng global.

Điều này cũng đúng kể cả khi sử dụng strict mode:

"use strict"
 
console.log(this) // Window { window: Window, self: Window, document: document, name: '', location: Location, … }

In an Arrow Function

Khi đặt this trong arrow function thì từ khóa this sẽ tham chiếu đến object trong scope gần nhất.

Ví dụ:

<button>Click me!</button>

const button = document.querySelector("button")
 
const app = {
  clickCounter: 0,
  handleEvents() {
    button.addEventListener("click", () => {
      // `this` references to `app` object instead of `button` object
      console.log(++this.clickCounter)
    })
  },
}
 
app.handleEvents()

Các phương thức bind, call và apply có thể gán tham chiếu của this tới đối tượng khác (tham khảo bind Method in JS, call Method in JS, apply Method in JS).