您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中關(guān)于“this”的面試題,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在 JavaScript 中,this
是函數(shù)調(diào)用上下文。正是由于 this
的行為很復(fù)雜,所以在 JavaScript 面試中,總是會(huì)問到有關(guān) this
的問題。
做好的準(zhǔn)備面試的方法是練習(xí),所以本文針對(duì) this
關(guān)鍵字整理了 7 個(gè)有趣的面試:
注意:下面的 JavaScript 代碼段以非嚴(yán)格模式運(yùn)行。
目錄:
問題1:變量 vs 屬性
問題2:Cat 的名字
問題3:延遲輸出
問題4:補(bǔ)全代碼
問題5:?jiǎn)柡蚺c告別
問題6:棘手的 length
問題7:調(diào)用參數(shù)
相關(guān)教程推薦:javascript視頻教程
以下代碼會(huì)輸出什么:
const object = { message: 'Hello, World!', getMessage() { const message = 'Hello, Earth!'; return this.message; }}; console.log(object.getMessage()); // 輸出什么??
輸出: 'Hello, World!'
object.getMessage()
是一個(gè)方法調(diào)用,這就是為什么方法中的 this
等于 object
的原因。
方法中還有一個(gè)變量聲明 const message ='Hello,Earth!'
,但這個(gè)變量不會(huì)影響 this.message
的值。
以下代碼會(huì)輸出什么:
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)一個(gè)函數(shù)被當(dāng)作構(gòu)造函數(shù)調(diào)用時(shí)( new Pet('Fluffy')
),構(gòu)造函數(shù)內(nèi)部的 this 等于構(gòu)造的對(duì)象。
Pet
構(gòu)造函數(shù)中的 this.name = name
表達(dá)式在構(gòu)造的對(duì)象上創(chuàng)建 name
屬性。
this.getName = () => this.name
在構(gòu)造的對(duì)象上創(chuàng)建方法 getName
。而且由于使用了箭頭函數(shù),箭頭函數(shù)中的 this 等于外部作用域中的 this
,也就是構(gòu)造函數(shù) Pet
。
調(diào)用 cat.getName()
和 getName()
會(huì)返回表達(dá)式 this.name
,其計(jì)算結(jié)果為 'Fluffy'
。
以下代碼輸出什么:
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 等于全局對(duì)象,即瀏覽器環(huán)境中是 window
。
這就是為什么 logMessage
方法內(nèi)的 console.log(this.message)
輸出 window.message
,即 undefined
。
如何調(diào)用logMessage函數(shù),讓它輸出 "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); // 使用函數(shù)綁定 const boundLogMessage = logMessage.bind(object); boundLogMessage();
以下代碼會(huì)輸出什么:
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!'
當(dāng)調(diào)用object.greet()
時(shí),在greet()
方法內(nèi)部,this
值等于 object,因?yàn)?code>greet是一個(gè)常規(guī)函數(shù)。因此object.greet()
返回'Hello, World!'
。
但是farewell()
是一個(gè)箭頭函數(shù),箭頭函數(shù)中的this
值總是等于外部作用域中的this
值。
farewell()
的外部作用域是全局作用域,其中 this
是全局對(duì)象。因此 object.farewell()
實(shí)際上會(huì)返回 'Goodbye, ${window.who}!'
,它的結(jié)果為 'Goodbye, undefined!'
。
以下代碼會(huì)輸出什么:
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 值等于全局對(duì)象,所以在 callback()
函數(shù)中 this.length
結(jié)果為 window.length
。
第一個(gè)語句var length = 4
,處于最外層的作用域,在全局對(duì)象上創(chuàng)建了屬性 length
,所以 window.length
變?yōu)?4
。
最后,在 callback()
函數(shù)內(nèi)部,`this.length
的值為 window.length
,最后輸出 4
。
以下代碼會(huì)輸出什么:
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)
被調(diào)用時(shí)有3
個(gè)參數(shù):callback
、1
和 2
。結(jié)果, method()
內(nèi)部的arguments
特殊變量是有如下結(jié)構(gòu)的數(shù)組類對(duì)象:
{ 0: callback, 1: 1, 2: 2, length: 3 }
因?yàn)?arguments[0]()
是 arguments
對(duì)象上 callback
的方法調(diào)用,所以 callback
內(nèi)部的 this
等于 arguments
。所以 callback()
內(nèi)部的 this.length
與 arguments.length
的結(jié)果是相同的,都是3
。
關(guān)于“JavaScript中關(guān)于“this”的面試題”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。