卡卡網(wǎng)

在這篇文章中，我整理了關于this關鍵字的6個面試問題，這些問題在JavaScript面試中常常會被問到，你能回答嗎？

注意：下面的 JavaScript 片段在非嚴格模式下運行。

1、以下代碼片段在控制臺輸出什么？

const object = {
  message: 'Hello, World!',
  getMessage() {
    const message = 'Hello, Earth!';
    return this.message;
  }
};
console.log(object.getMessage()); // 輸出什么?

答案

Hello, World! 被記錄到控制臺。查看演示。

object.getMessage()是一個方法調用，這就是為什么this在方法內(nèi)部等于object。

方法內(nèi)部還有一個變量聲明const message = 'Hello, Earth!'。該變量無論如何都不會影響this.message的值。

2、以下代碼片段在控制臺輸出什么？

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());     // 輸出什么?

答案

'Fluffy'和'Fluffy'記錄到控制臺。查看演示。

當函數(shù)作為構造函數(shù)new Pet('Fluffy')調用時，構造函數(shù)內(nèi)部的this等于構造的對象。

Pet構造函數(shù)中的表達式 this.name = name 在構造對象上創(chuàng)建name屬性。

this.getName = () => this.name 在構造對象上創(chuàng)建一個方法getName。并且由于使用了箭頭函數(shù)，箭頭函數(shù)內(nèi)部的this等于外部作用域(構造函數(shù)Pet)的this。

調用cat.getName()以及getName()返回this.name計算結果為'Fluffy'的表達式。

3、以下代碼片段在控制臺輸出什么？

const object = {
  message: 'Hello, World!',
  logMessage() {
    console.log(this.message); // 輸出什么?
  }
};
setTimeout(object.logMessage, 1000);

答案

延遲 1 秒后，undefined記錄到控制臺。查看演示。

雖然setTimeout()函數(shù)將object.logMessage用作回調，但object.logMessage仍然是作為常規(guī)函數(shù)調用而不是方法。

在常規(guī)函數(shù)調用期間，this等于全局對象，window在瀏覽器環(huán)境中也是如此。

這就是為什么logMessage內(nèi)部的console.log(this.message)方法輸出window.message是undefined。

挑戰(zhàn)一下：如何修復此代碼以便將'Hello, World!'輸出到控制臺？查看演示

4、以下代碼片段在控制臺輸出什么？

const object = {
  who: 'World',
  greet() {
    return `Hello, ${this.who}!`;
  },
  farewell: () => {
    return `Goodbye, ${this.who}!`;
  }
};
console.log(object.greet());    // 輸出什么?
console.log(object.farewell()); // 輸出什么?

答案

'Hello, World!'和'Goodbye, undefined!'記錄到控制臺。查看演示。

調用object.greet()時，greet()方法內(nèi)部的this值等于object因為greet是一個常規(guī)函數(shù)。從而object.greet()返回'Hello, World!'。

但是farewell()是一個箭頭函數(shù)，箭頭函數(shù)內(nèi)部的this值總是等于外部范圍的this。

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

5、以下代碼片段在控制臺輸出什么？

var length = 4;
function callback() {
  console.log(this.length); // 輸出什么?
}
const object = {
  length: 5,
  method(callback) {
    callback();
  }
};
object.method(callback, 1, 2);

答案

4被記錄到控制臺。查看演示。

callback()使用method()內(nèi)部的常規(guī)函數(shù)??調用來調用， 由于在常規(guī)函數(shù)調用期間this值等于全局對象，因此callback()函數(shù)內(nèi)部的this.length被評估為window.length。

第一條語句var length = 4位于最外層范圍內(nèi)，在全局對象上創(chuàng)建一個length屬性：window.length 等于 4。

最后，在callback()函數(shù)內(nèi)部，this.length評估為window.length——4被記錄到控制臺。

6、以下代碼片段在控制臺輸出什么？

var length = 4;
function callback() {
  console.log(this.length); // 輸出什么?
}
const object = {
  length: 5,
  method() {
    arguments[0]();
  }
};
object.method(callback, 1, 2);

答案

3被記錄到控制臺。查看演示。

obj.method(callback, 1, 2)使用3個參數(shù)調用：callback、1和2，結果，method()內(nèi)部的arguments特殊變量是如下結構的類似數(shù)組對象：

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

因為arguments[0]()是callback對參數(shù)對象的方法調用，callback內(nèi)部的this，等于arguments。結果callback()內(nèi)部的this.length與arguments.length相同，等于3。

總結

本文通過6個關于this關鍵字的面試問題，介紹了this的一些基礎知識，通過本文的介紹，你應該對this關鍵字的認識有了進一步的了解。 

相關文章

• [實例]演示區(qū)別箭頭函數(shù)和常規(guī)函數(shù)的this值
• 實例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法
• 詳解JS call() apply()和bind() this的用法區(qū)別
• 【示例】詳解JS里this的上下文對象及用法

標簽: this