更多文章詳見公眾號【前端css和js乾貨】

在 JavaScript 中，this是函數的調用上下文。
難度在於this具有複雜的行為。
本文，整理了一個關於this關鍵字的7個有趣面試問題的列表。
注意：下面的 JavaScript 片段在非嚴格模式下運行，也稱為 sloppy 模式。

1: 變量 vs 屬性

以下代碼會在控制枱打印什麼：

const object = {

message: 'Hello, World!',

getMessage() {

const message = 'Hello, Earth!';

return this.message;

}

};

console.log(object.getMessage()); // 會打印什麼？

<details>
<summary>點擊查看答案</summary>

'Hello, World!' 被打印到控制枱。
object.getMessage() 是一個方法調用，所以this指向object。
方法裏面還有一個變量聲明 const message = 'Hello, Earth!'。 該變量並不會影響this.message的值。
</details>

2: Cat name

function Pet(name) {

this.name = name;

this.getName = () => this.name;

}

const cat = new Pet('Fluffy');

console.log(cat.getName()); // 會打印什麼？

const { getName } = cat;

console.log(getName()); // 會打印什麼?

<details>
<summary>點擊查看答案</summary>

控制枱會打印出'Fluffy' 和 'Fluffy'。
當一個函數作為構造函數調用 new Pet('Fluffy') 時，構造函數內部的 this 等於構造的對象。
Pet構造函數中的 this.name = name 代碼會在構造的對象上創建 name 屬性。
this.getName = () => this.name 在構造的對象上創建一個方法 getName 。 並且由於使用了箭頭函數，所以箭頭函數內部的 this 就等於外部作用域的 this——構造函數 Pet。
調用 cat.getName() 和 getName()，返回的結果都是為“Fluffy”。
</details>

3.setTimeout和this

const object = {
  message: 'Hello, World!',
  logMessage() {
    console.log(this.message); // 會打印什麼?
  }
};
setTimeout(object.logMessage, 1000);

<details>
<summary>點擊查看答案</summary>

延遲 1 秒後， undefined 會打印到控制枱。
雖然 setTimeout() 函數使用 object.logMessage 作為回調，但它會將 object.logMessage 作為常規函數而不是方法。

並且在常規函數調用期間，this指向全局對象，在瀏覽器環境的情況下是window。

這就是 logMessage 方法中的 console.log(this.message) 打印undefined的 的原因。

</details>

附帶挑戰：如何修復此代碼以便'Hello，World！' 打印到控制枱？

4.人工方法

如何調用 logMessage 函數才能使他打印出“Hello, World！”？

const object = {

message: 'Hello, World!'

};

function logMessage() {

console.log(this.message); // "Hello, World!"

}

// 這裏寫下你的代碼...

<details>
<summary>點擊查看答案</summary>

至少有 3 種方法可以對象的方法調用 logMessage() 。

const object = {

message: 'Hello, World!'

};

function logMessage() {

console.log(this.message); // logs 'Hello, World!'

}

// 使用 func.call() 

logMessage.call(object);

// 使用 func.apply() 

logMessage.apply(object);

// Creating a bound function

const boundLogMessage = logMessage.bind(object);

boundLogMessage();

</details>

5.箭頭函數

const object = {

who: 'World',

greet() {

return `Hello, ${this.who}!`;

},

farewell: () => {

return `Goodbye, ${this.who}!`;

}

};

console.log(object.greet()); // 會打印什麼?

console.log(object.farewell()); // 會打印什麼?

<details>
<summary>點擊查看答案</summary>

'Hello, World!' 和 'Goodbye, undefined!' 會被打印到控制枱。
當調用 object.greet() 時，在方法greet() 中，因為greet 是一個常規函數，this指向object。 因此 object.greet() 返回 'Hello, World!'。

但是farewell() 是一個箭頭函數，所以箭頭函數內部的this總是等同於外部作用域的this。

farewell() 的外部作用域是全局作用域，這裏 this 是全局對象。 因此 object.farewell() 實際上返回“Goodbye, ${window.who}!”，其計算結果為“Goodbye, undefined!”。

</details>

 6.困惑的length

以下代碼會打印什麼？

var length = 4;

function callback() {

console.log(this.length); // What is logged?

}

const object = {

length: 5,

method(callback) {

callback();

}

};

object.method(callback, 1, 2);

<details>
<summary>點擊查看答案</summary>

4會被打印到控制枱中。
callback() 是以常規函數方式來調用的。 由於在常規函數調用時this指向全局對象，因此在callback()函數內的this.length 被評估為 window.length。

在最外層的作用域中，第一條語句 var length = 4，在全局對象上創建了一個屬性 length：window.length 變為 4。

最後，在 callback() 函數中 this.length 計算為 window.length ,所以4 被記錄到控制枱。
</details>

7.調用參數

var length = 4;

function callback() {

console.log(this.length); // What is logged?

}

const object = {

length: 5,

method() {

arguments[0]();

}

};

object.method(callback, 1, 2);

<details>
<summary>點擊查看答案</summary>

3 會被打印到控制枱。
obj.method(callback, 1, 2) 使用 3 個參數調用：callback, 1 和 2。因此，method() 中的arguments變量是以下結構的類數組對象：

{
0: callback,
1: 1,
2: 2,
length: 3
}

因為arguments[0]() 是arguments對象的callback方法的調用，所以回調中的this指向arguments。 因此 callback() 中的 this.length 與 arguments.length 相同，即 3。
</details>

總結

如果您正確回答了 5 個或更多問題，那麼您就對this關鍵字有了很好的理解！

否則，您需要好好複習一下this關鍵字。

作者：Dmitri Pavlutin 譯者：前端css和js乾貨 來源：dmitripavlutin