|
|
|
|
|
|
JavaScript面試題：關于this關鍵字的6個面試問題
作者:admin 時間:2022-6-8 19:55:48 瀏覽:在這篇文章中，我整理了關于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在方法內部等于object。
方法內部還有一個變量聲明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'記錄到控制臺。查看演示。
當函數作為構造函數new Pet('Fluffy')調用時，構造函數內部的this等于構造的對象。
Pet構造函數中的表達式 this.name = name 在構造對象上創建name屬性。
this.getName = () => this.name 在構造對象上創建一個方法getName。并且由于使用了箭頭函數，箭頭函數內部的this等于外部作用域(構造函數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()函數將object.logMessage用作回調，但object.logMessage仍然是作為常規函數調用而不是方法。
在常規函數調用期間，this等于全局對象，window在瀏覽器環境中也是如此。
這就是為什么logMessage內部的console.log(this.message)方法輸出window.message是undefined。
挑戰一下：如何修復此代碼以便將'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()方法內部的this值等于object因為greet是一個常規函數。從而object.greet()返回'Hello, World!'。
但是farewell()是一個箭頭函數，箭頭函數內部的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()內部的常規函數??調用來調用， 由于在常規函數調用期間this值等于全局對象，因此callback()函數內部的this.length被評估為window.length。
第一條語句var length = 4位于最外層范圍內，在全局對象上創建一個length屬性：window.length 等于 4。
最后，在callback()函數內部，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個參數調用：callback、1和2，結果，method()內部的arguments特殊變量是如下結構的類似數組對象：
{
0: callback,
1: 1,
2: 2,
length: 3
}因為arguments[0]()是callback對參數對象的方法調用，callback內部的this，等于arguments。結果callback()內部的this.length與arguments.length相同，等于3。
總結
本文通過6個關于this關鍵字的面試問題，介紹了this的一些基礎知識，通過本文的介紹，你應該對this關鍵字的認識有了進一步的了解。
相關文章
標簽: this
