|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
JavaScript面試題：關(guān)于this關(guān)鍵字的6個面試問題
作者:admin 時間:2022-6-8 19:55:48 瀏覽:在這篇文章中，我整理了關(guān)于this關(guān)鍵字的6個面試問題，這些問題在JavaScript面試中常常會被問到，你能回答嗎？
注意：下面的 JavaScript 片段在非嚴(yán)格模式下運(yùn)行。
1、以下代碼片段在控制臺輸出什么？
const object = {
message: 'Hello, World!',
getMessage() {
const message = 'Hello, Earth!';
return this.message;
}
};
console.log(object.getMessage()); // 輸出什么?答案
Hello, World! 被記錄到控制臺。查看演示。
object.getMessage()是一個方法調(diào)用，這就是為什么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'記錄到控制臺。查看演示。
當(dāng)函數(shù)作為構(gòu)造函數(shù)new Pet('Fluffy')調(diào)用時，構(gòu)造函數(shù)內(nèi)部的this等于構(gòu)造的對象。
Pet構(gòu)造函數(shù)中的表達(dá)式 this.name = name 在構(gòu)造對象上創(chuàng)建name屬性。
this.getName = () => this.name 在構(gòu)造對象上創(chuàng)建一個方法getName。并且由于使用了箭頭函數(shù)，箭頭函數(shù)內(nèi)部的this等于外部作用域(構(gòu)造函數(shù)Pet)的this。
調(diào)用cat.getName()以及getName()返回this.name計算結(jié)果為'Fluffy'的表達(dá)式。
3、以下代碼片段在控制臺輸出什么？
const object = {
message: 'Hello, World!',
logMessage() {
console.log(this.message); // 輸出什么?
}
};
setTimeout(object.logMessage, 1000);答案
延遲 1 秒后，undefined記錄到控制臺。查看演示。
雖然setTimeout()函數(shù)將object.logMessage用作回調(diào)，但object.logMessage仍然是作為常規(guī)函數(shù)調(diào)用而不是方法。
在常規(guī)函數(shù)調(diào)用期間，this等于全局對象，window在瀏覽器環(huán)境中也是如此。
這就是為什么logMessage內(nèi)部的console.log(this.message)方法輸出window.message是undefined。
挑戰(zhàn)一下：如何修復(fù)此代碼以便將'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!'記錄到控制臺。查看演示。
調(diào)用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}!'，其計算結(jié)果為'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ù)??調(diào)用來調(diào)用， 由于在常規(guī)函數(shù)調(diào)用期間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ù)調(diào)用：callback、1和2，結(jié)果，method()內(nèi)部的arguments特殊變量是如下結(jié)構(gòu)的類似數(shù)組對象：
{
0: callback,
1: 1,
2: 2,
length: 3
}因為arguments[0]()是callback對參數(shù)對象的方法調(diào)用，callback內(nèi)部的this，等于arguments。結(jié)果callback()內(nèi)部的this.length與arguments.length相同，等于3。
總結(jié)
本文通過6個關(guān)于this關(guān)鍵字的面試問題，介紹了this的一些基礎(chǔ)知識，通過本文的介紹，你應(yīng)該對this關(guān)鍵字的認(rèn)識有了進(jìn)一步的了解。
相關(guān)文章
標(biāo)簽: this
- 站長推薦
