[JavaScript] this 關鍵字

Himmelbleu發表於2024-10-03
JavaScript

全域性作用域

在瀏覽器中，如果在全域性作用域下使用 this，它將指向 window 物件；在 Node.js 環境中，則指向 global 物件。

方法呼叫

當一個函式作為物件的方法被呼叫時，this 會指向該物件。

const obj = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, ${this.name}`);
  }
};
obj.greet(); // Hello, Alice

建構函式

使用 new 關鍵字呼叫函式建立新例項時，this 會指向新建立的物件。

function Person(name) {
  this.name = name;
}
const alice = new Person("Alice");
console.log(alice.name); // Alice

箭頭函式

箭頭函式沒有自己的 this 繫結，它會從父作用域繼承 this 值。

const obj = {
  name: "Alice",
  greet: () => {
    console.log(`Hello, ${this.name}`); // undefined, 因為箭頭函式的 this 指向全域性物件
  }
};
obj.greet();

繫結方法

.call(), .apply(), .bind() 這些方法可以顯式地設定函式執行時 this 的值。

const person = {
  name: "Alice"
};

function greet() {
  console.log(`Hello, ${this.name}`);
}

greet.call(person); // Hello, Alice

總結

this 關鍵字的值取決於函式如何被呼叫，而不是如何被定義。掌握 this 的行為可以幫助你更好地控制程式碼中的上下文，並避免常見的陷阱。

相關文章