JavaScript中關於「this」的7個有趣面試題，你能全答對嗎？

相關推薦：2021年大前端面試題總結（收藏）

在JavaScript 中， this 是函數呼叫上下文。正是因為 this 的行為很複雜，所以在 JavaScript 面試中，總是會問到  this 的問題。

做好的準備面試的方法是練習，所以本文針對this 關鍵字整理了7 個有趣的面試：

#注意：下面的JavaScript 程式碼片段以非嚴格模式運作。

目錄：

• #問題1：變數vs 屬性

• 問題2：Cat 的名字

• 問題3：延遲輸出

• 問題4：補全程式碼

• 問題5：問候與告別

• #問題6：棘手的length

• 問題7：呼叫參數

相關教學建議：javascript影片教學

#問題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()); // 输出什么？？

const { getName } = cat;
console.log(getName());     // 输出什么？？

答案：

輸出：'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); // 输出什么？？
  }
};

setTimeout(object.logMessage, 1000);

答案：

延遲1秒鐘後，輸出：undefined

儘管 setTimeout() 函數使用object.logMessage 作為回調，但仍把object.logMessage 作為常規函數而非方法呼叫。

在常規函數呼叫期間， this 等於全域對象，即瀏覽器環境中是 window。

這就是為什麼logMessage 方法內的console.log(this.message) 輸出window.message ，即 undefined。

問題4：補全程式碼

如何呼叫logMessage函數，讓它輸出 "Hello，World!" 。

const object = {
  message: 'Hello, World!'
};

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

// 把你的代码写在这里.....

答案：

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

const object = {
  message: 'Hello, World!'
};

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

// 使用 func.call() 方法
logMessage.call(object);

// 使用 func.apply() 方法
logMessage.apply(object);

// 使用函数绑定
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());    // 输出什么？？
console.log(object.farewell()); // 输出什么？？

#答案：

#輸出： 'Hello, World!' 和'Goodbye, undefined!'

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

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

farewell() 的外部作用域是全域作用域，其中 this 是全域物件。因此 object.farewell() 實際上會回傳'Goodbye, ${window.who}!' ，它的結果為'Goodbye, undefined!' 。

問題6：棘手的length

以下程式碼會輸出什麼：

var length = 4;
function callback() {
  console.log(this.length); // 输出什么？？
}

const object = {
  length: 5,
  method(callback) {
    callback();
  }
};

object.method(callback, 1, 2);

答案：

# #輸出：

4

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

第一个语句var length = 4，处于最外层的作用域，在全局对象上创建了属性 length，所以 window.length 变为 4。

最后，在 callback()  函数内部，`this.length 的值为 window.length ，最后输出 4。

问题7：调用参数

以下代码会输出什么：

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个参数：callback、1 和 2。结果， method() 内部的arguments 特殊变量是有如下结构的数组类对象：

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

因为 arguments[0]()  是 arguments 对象上 callback 的方法调用，所以 callback 内部的 this 等于 arguments。所以 callback() 内部的 this.length 与 arguments.length 的结果是相同的，都是3。

总结

如果你答对了 5 个以上，那么你对 this 关键字掌握的情况是很不错的。否则，你就需要好好复习一下 this 关键字。

本文翻译于：https://dmitripavlutin.com/javascript-this-interview-questions/

更多编程相关知识，请访问：编程视频！！

以上是JavaScript中關於「this」的7個有趣面試題，你能全答對嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！