相關推薦：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中文網其他相關文章！
