這是前端面試問題系列的第 5 個(gè)問題。如果您希望提高準(zhǔn)備水平或保持最新狀態(tài)，請考慮注冊前端訓(xùn)練營。

---

this 關(guān)鍵字始終引用函數(shù)或腳本的當(dāng)前上下文。

對于我們大多數(shù)人來說，這是一個(gè)令人困惑的話題（雙關(guān)語），但事實(shí)并非如此。您所需要做的就是記住一些規(guī)則。

以下規(guī)則（按優(yōu)先順序排列）規(guī)定了運(yùn)行時(shí)如何確定 this 的值：

在函數(shù)構(gòu)造函數(shù)中的用法

如果使用 new 關(guān)鍵字調(diào)用函數(shù)，則函數(shù)內(nèi)的 this 指的是新創(chuàng)建的對象實(shí)例。

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() 可用于在函數(shù)內(nèi)顯式設(shè)置 this 的值。

• call() 和 apply() 用于需要立即調(diào)用函數(shù)的情況。
• bind() 返回一個(gè)新函數(shù)供稍后使用。

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!

在方法調(diào)用中的用法

如果函數(shù)是對象的方法，則 this 引用該對象。

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

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

常規(guī)函數(shù)調(diào)用中的用法（自由函數(shù)調(diào)用）

如果在全局上下文中調(diào)用函數(shù)，則 this 引用全局對象（在非嚴(yán)格模式下）或 undefined（在嚴(yán)格模式下）。

對于瀏覽器來說，全局對象是window。

// Browser

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

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

當(dāng)一個(gè)函數(shù)在全局上下文中聲明時(shí)，它就成為 window 對象的一個(gè)??屬性。調(diào)用 window.showThis() 將產(chǎn)生相同的結(jié)果。這就是為什么它是隱式方法調(diào)用。 （參考上面這條規(guī)則）

如果適用多個(gè)規(guī)則，則優(yōu)先級較高的規(guī)則將適用。

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

const obj2 = { value: 2 };

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

在上面的示例中，應(yīng)用了兩個(gè)規(guī)則：方法調(diào)用和顯式綁定。由于顯式綁定具有更高的優(yōu)先級，因此可以設(shè)置 this 的值。

箭頭功能

箭頭函數(shù)不遵循上述規(guī)則，因?yàn)樗鼈儧]有自己的 this 值。他們從父范圍中選擇這個(gè)值。

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 }

這就是為什么您應(yīng)該避免對事件偵聽器使用箭頭函數(shù)。事件監(jiān)聽器將 HTML 元素綁定到 this 值，但如果處理程序是箭頭函數(shù)，則不可能。

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. 在函數(shù)構(gòu)造函數(shù)（new Person()）中，這將是新創(chuàng)建的對象實(shí)例。
2. 如果使用bind()、call()或apply()顯式綁定，函數(shù)內(nèi)的this將被設(shè)置為提供的值。
3. 在方法內(nèi)部，這被設(shè)置為該方法所屬的對象。
4. 在自由函數(shù)調(diào)用中，this 指向全局對象（非嚴(yán)格模式）或 undefined（嚴(yán)格模式）。
5. 如果適用多個(gè)規(guī)則，則適用第一個(gè)規(guī)則 (1-4)。
6. 箭頭函數(shù)沒有自己的 this。它的值是從父作用域中選取的。

---

喜歡你剛剛讀到的內(nèi)容嗎？考慮加入前端訓(xùn)練營的候補(bǔ)名單??

以上是JavaScript 中的 `this` 解釋的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！