這段神奇的代碼很有意思

當(dāng)你看到這段代碼時(shí)，你的心情是怎樣的呢！

這是幾個(gè)同學(xué)給我的答復(fù)，嗯，就很好

能不能搞點(diǎn)陽間的代碼 ！

指定有什么大病

哪個(gè)人才寫出這樣的代碼

//第一塊 function Foo() { getName = function() { console.log(1); } return this } //第二塊 Foo.getName = function() { console.log(2); } //第三塊 Foo.prototype.getName = function() { console.log(3); } //第四塊 var getName = function() { console.log(4); } //第五塊 function getName() { console.log(5); } //寫出以下各式的輸出結(jié)果 Foo.getName(); getName(); Foo().getName(); getName(); new Foo.getName(); new Foo().getName(); new new Foo().getName();

作為菜鳥的我，在面試的時(shí)候，看到了這陰間代碼，心里想著誰無聊寫這樣的代碼呀，屁點(diǎn)用沒有，卻只能默默的分析題目，但最終還是錯(cuò)了幾個(gè)，回來之后又好好分析了一下，其實(shí)也不是很難，只是在面試的時(shí)候看到這樣的東西，實(shí)在是有點(diǎn)搞心態(tài)了！

大家可以先自己嘗試寫一下這道題

一下是本菜鳥的小題解，有什么錯(cuò)誤的地方歡迎大家指出，共同進(jìn)步！！！！

第一個(gè)

Foo.getName()輸出2

第一個(gè)并不難，主要和一二，兩塊代碼有關(guān)

function Foo() { getName = function() { console.log(1); } return this } Foo.getName = function() { console.log(2); }

其實(shí)這前面的只是一個(gè)迷惑作用，給函數(shù)直接添加屬性和方法，實(shí)際上是可以的，但是和數(shù)組一樣，不會(huì)改變?cè)葘傩缘闹担簿褪荈oo.getName是給Foo對(duì)象下添加一個(gè)屬性，值是一個(gè)函數(shù)，和Foo對(duì)象下的getName是不影響的，所以Foo.getName()實(shí)際上是訪問Foo對(duì)象下的getName輸出2

第二個(gè)

getName()輸出4

這個(gè)考察的是預(yù)編譯的知識(shí)，直接執(zhí)行了getName，這里就摘取4，5兩塊代碼來講

var getName = function() { console.log(4); } function getName() { console.log(5); }

在預(yù)編譯的過程中會(huì)經(jīng)歷以下幾步

第一步：創(chuàng)建一個(gè)Go對(duì)象，因?yàn)檫@里是在全局下 Go {} 第二步：找形參和變量聲明，值給undefined Go { getName:undefined; } 第三步：實(shí)參形參統(tǒng)一,這里沒有形參 Go { getName:undefined } 第四步：找函數(shù)聲明，值賦予函數(shù)體 Go { getName:getName(); }

當(dāng)預(yù)編譯執(zhí)行完成后，才開始執(zhí)行代碼,也就是那條函數(shù)表達(dá)式，getName被賦予了新的函數(shù)體，也就是輸出4

第三個(gè)

Foo().getName()輸出1

Foo()先執(zhí)行，全局下的getName被重新賦值，返回了一個(gè)this，這里的this指向的是window，此時(shí)的getName實(shí)際上是window.getName也就是輸出1

function Foo() { getName = function() { console.log(1); } return this }

第四個(gè)

getName()輸出1

因?yàn)樵趫?zhí)行上一個(gè)函數(shù)時(shí)，由于getName是定義在全局的，所以在執(zhí)行時(shí)，實(shí)際上改變了全局作用域下的getName的值，所以再次執(zhí)行g(shù)etName(),輸出的是1

function Foo() { getName = function() {//在執(zhí)行上一條語句時(shí)，改變了全局變量的值 console.log(1); } return this } //這里聲明了變量getName，為全局變量 var getName = function() { console.log(4); }

第五個(gè)

new Foo.getName()輸出

在做這道題之前需要知道，運(yùn)算符的優(yōu)先級(jí)，這是從MDN文檔上的截圖，可以看到成員訪問運(yùn)算符的優(yōu)先級(jí)大于new一個(gè)無參列表的有限級(jí)，也就是new Foo.getName()實(shí)際上是new (Foo.getName())，括號(hào)內(nèi)輸出2

new Foo屬于new無參數(shù)列表

第六個(gè)

new Foo().getName()輸出 3

相當(dāng)于執(zhí)行(new Foo()).getName()

new Foo()實(shí)例化了Foo這個(gè)構(gòu)造函數(shù)，返回的是繼承有Foo()原型的新對(duì)象，在執(zhí)行g(shù)etName()時(shí)，由于新對(duì)象下沒有這個(gè)方法，會(huì)沿著原型鏈上尋找，能夠在原型上找到并輸出3

new關(guān)鍵字

創(chuàng)建一個(gè)空對(duì)象

空對(duì)象的繼承構(gòu)造函數(shù)的原型

讓this指向構(gòu)造函數(shù)的對(duì)象實(shí)例，執(zhí)行構(gòu)造函數(shù)內(nèi)容為新對(duì)象添加屬性和方法

返回this

Foo.prototype.getName = function() { console.log(3); }

第七個(gè)

終于到最后一個(gè)了

new new Foo().getName()輸出 3

相當(dāng)于執(zhí)行new (new Foo().getName())先執(zhí)行括號(hào)里的，也就是上一題的，也就是輸出3

終于！！

其實(shí)寫完感覺也不是很難，思路清晰，不要亂套還是可以拿下的，希望大家在碰到這種陰間代碼時(shí)，能夠把它妥妥拿下！！

JavaScript 面向?qū)ο缶幊?/p>

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。