[[386485]]

本文已經過原作者 Shadeed 授權翻譯。

在JavaScript中，this 表示函數調用上下文。this難點在于它有一個復雜的行為，這也是面試中經常被考的點。

本文列舉7個關于this有趣的面試問題:

• 問題1：變量 vs 屬性
• 問題2：Cat 的名字
• 問題3：延遲打招呼
• 問題4：人工方法
• 問題5：問候和告別
• 問題6：棘手的 length
• 問題7：調用參數

問題1：變量 vs 屬性

下面的打印結果是啥：

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

答案：'Hello, World!'

object.getmessage()是一個方法調用，此時的 this 表示 object。

方法還有一個變量聲明const message = 'Hello, Earth!'。這個變量都不會影響this.message的值。

問題2：Cat 的名字

下面代碼打印什么：

function Pet(name) { 
  this.name = name; 
 
  this.getName = () => this.name; 
} 
 
const cat = new Pet('Fluffy'); 
 
console.log(cat.getName()); // What is logged? 
 
const { getName } = cat; 
console.log(getName());     // What is logged? 

答案：'Fluffy' 和 'Fluffy'

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

Pet構造函數中的this.name = name表達式在構造的對象上創建name屬性。

this.getName = () => this.name在構造的對象上創建方法getName。而且由于使用了箭頭函數，箭頭函數內部的this值等于外部作用域的this值, 即 Pet。

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

問題3：延遲打招呼

下面代碼打印什么：

const object = { 
  message: 'Hello, World!', 
 
  logMessage() { 
    console.log(this.message); // What is logged? 
  } 
}; 
 
setTimeout(object.logMessage, 1000); 

答案：1秒后，打印 undefined。

盡管setTimeout()函數使用object.logMessage作為回調，但仍將object.logMessage用作常規函數，而不是方法。

在常規函數調用期間，this等于全局對象，即瀏覽器環境中的 window。

這就是為什么logMessage方法中的 this.message等于 window.message,即undefined。

問題4：人工方法

如何調用logMessage函數，讓它打印 "Hello, World!" ?

 message: 'Hello, World!' 
}; 
 
function logMessage() { 
  console.log(this.message); // "Hello, World!" 
} 

答案:

至少有 3 種方式，可以做到：

 message: 'Hello, World!' 
}; 
 
function logMessage() { 
  console.log(this.message); // logs 'Hello, World!' 
} 
 
// Using func.call() method 
logMessage.call(object); 
 
// Using func.apply() method 
logMessage.apply(object); 
 
// Creating a bound function 
const boundLogMessage = logMessage.bind(object); 
boundLogMessage(); 

問題5：問候和告別

下面代碼打印什么：

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

答案: 'Hello, World!' 和 'Goodbye, undefined!'。

當調用object.greet()時，在greet()方法內部，this值等于 object，因為greet是一個常規函數。因此object.greet()返回'Hello, World!'。

但是farewell()是一個箭頭函數，箭頭函數中的this值總是等于外部作用域中的this值。

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

問題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); 

答案: 4

callback()是在method()內部使用常規函數調用來調用的。由于在常規函數調用期間的this值等于全局對象，所以this.length結果為window.length。。

第一個語句var length = 4，處于最外層的作用域，在全局對象 window 上創建一個屬性length。

問題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); 

答案: 3

obj.method(callback, 1, 2)被調用時有3個參數:callback, 1和2。結果，method()內部的參數特殊變量是如下結構的數組類對象:

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

因為arguments[0]()是arguments對象上的回調的方法調用，所以回調內部的參數等于arguments。所以 callback()中的this.length與arguments.length相同，即3。

~ 完，我是小智，我們下期見!

作者：Shadeed 譯者：前端小智 來源：dmitripavlutin原文：https://dmitripavlutin.com/javascript-this-interview-questions/