JavaScript 中的 `this` 解釋

這是前端面試問題系列的第 5 個問題。如果您希望提高準備程度或保持最新狀態，請考慮註冊前端訓練營。

---

this 關鍵字始終引用函數或腳本的當前上下文。

對我們大多數人來說，這是一個令人困惑的話題（雙關語），但事實並非如此。您所需要做的就是記住一些規則。

以下規則（按優先順序排列）規定了運行時如何決定 this 的值：

在函數建構函式中的用法

如果使用 new 關鍵字呼叫函數，則函數內的 this 指的是新建立的物件實例。

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

顯式綁定此

call()、apply() 或 bind() 可用來在函數內明確設定 this 的值。

• call() 和 apply() 用於需要立即呼叫函數的情況。
• bind() 傳回一個新函數供稍後使用。

const obj = { name: 'Ben' };

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

const sayHelloToBen = sayHello.bind(obj);

sayHelloToBen(); // Hello, Ben!
sayHello.call(obj); // Hello, Ben!
sayHello.apply(obj); // Hello, Ben!

在方法呼叫中的用法

如果函數是物件的方法，則 this 引用該物件。

const person = {
  name: 'Ben',
  logThis: function() {
    console.log(this);
  }
}

person.logThis(); // { name: 'Ben', logThis: fn() }

常規函數呼叫中的用法（自由函數呼叫）

如果在全域上下文中呼叫函數，則 this 引用全域物件（在非嚴格模式下）或 undefined（在嚴格模式下）。

對瀏覽器來說，全域物件是window。

// Browser

function showThis() {
  console.log(this);
}

showThis(); // Window { open: fn, alert: fn, ... }

當一個函數在全域上下文中宣告時，它就成為 window 物件的屬性。呼叫 window.showThis() 將產生相同的結果。這就是為什麼它是隱式方法呼叫。 （參考上面這條規則）

如果適用多個規則，則優先順序較高的規則將適用。

const obj1 = {
    value: 1,
    showThis: function() {
        console.log(this);
    },
};

const obj2 = { value: 2 };

obj1.showThis.call(obj2); // { value: 2 }

在上面的範例中，應用了兩個規則：方法呼叫和明確綁定。由於明確綁定具有更高的優先權，因此可以設定 this 的值。

箭頭功能

箭頭函數不遵循上述規則，因為它們沒有自己的 this 值。他們從父範圍中選擇這個值。

const person = {
  name: 'Ben',
  showThis: () => {
    console.log(this);
  },
  showThisWrapped: function() {
    const arrowFn = () => console.log(this);
    arrowFn();
  }
}

person.showThis(); // Window { open: fn, alert: fn, ... }
person.showThisWrapped(); // { name: 'Ben', showThis: fn, showThisWrapped: fn }

這就是為什麼您應該避免對事件偵聽器使用箭頭函數。事件監聽器將 HTML 元素綁定到 this 值，但如果處理程序是箭頭函數，則不可能。

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

---

概括

1. 在函數建構函式（new Person()）中，這將是新建立的物件實例。
2. 如果使用bind()、call()或apply()明確綁定，函數內的this將被設定為提供的值。
3. 在方法內部，這被設定為該方法所屬的物件。
4. 在自由函數呼叫中，this 指向全域物件（非嚴格模式）或 undefined（嚴格模式）。
5. 如果適用多個規則，則適用第一個規則 (1-4)。
6. 箭頭函數沒有自己的 this。它的值是從父作用域中選取的。

---

喜歡你剛剛讀到的內容嗎？考慮加入前端訓練營的候補名單✌️

以上是JavaScript 中的 `this` 解釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！