嘗試解析js面試題(一)

說(shuō)明:這是一道比較典型的綜合考察js中作用域this指向刀崖、對(duì)象惊科、解析順序運(yùn)算符優(yōu)先級(jí)等概念的綜合性考題亮钦;話不多說(shuō)馆截,先上題;

原作者解析:小小滄海(博客園)

function Foo() {
    getName = function () {
        alert (1); 
    };
    return this;
}
Foo.getName = function () {
    alert (2);
};
Foo.prototype.getName = function () {
    alert (3);
};
var getName = function () {
    alert (4);
};
function getName() {
    alert (5);
}

//請(qǐng)寫(xiě)出以下輸出結(jié)果:
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

解析:

1、Foo.getName(); //2

1)結(jié)果執(zhí)行的是Foo對(duì)象的一個(gè)叫做getName()的屬性蜡娶,而1混卵、4、5中的getName都是作為函數(shù)存在窖张,所以可以排除1幕随、4、5

2)剩下兩個(gè)中宿接,2是Foo對(duì)象自身的屬性合陵,3是Foo對(duì)象原型鏈上的屬性,而自身屬性的優(yōu)先級(jí)高于原型鏈上的屬性澄阳,所以執(zhí)行結(jié)果是2

2拥知、getName(); //4

1)結(jié)果執(zhí)行的是getName函數(shù),而題目代碼中有3個(gè)相關(guān)函數(shù)碎赢,分別是1低剔、4、5

2)1中的getName是定義在Foo函數(shù)中的函數(shù)肮塞,由于Foo尚未執(zhí)行襟齿,因此它沒(méi)有暴露出來(lái),無(wú)法被外部調(diào)用枕赵,可以排除

3)4和5都可以被正常調(diào)用猜欺,關(guān)鍵在調(diào)用先后問(wèn)題

4)由于5是普通函數(shù)(優(yōu)先級(jí)最高),4是匿名函數(shù)拷窜;js解析時(shí)會(huì)將5提前至最上方優(yōu)先解析开皿,而后面解析的4會(huì)將5覆蓋,所以執(zhí)行結(jié)果是4

3篮昧、Foo().getName(); //1

1)結(jié)果執(zhí)行的是Foo函數(shù)赋荆,F(xiàn)oo函數(shù)中有個(gè)返回值是this;this被普通函數(shù)調(diào)用后懊昨,指向的對(duì)象一定是window對(duì)象窄潭,所以此處的結(jié)果已經(jīng)可以解析為window.getName(),即調(diào)用getName()函數(shù)

2)由于window.getName()已經(jīng)被修改為1酵颁,所以執(zhí)行結(jié)果是1(嫉你??)

上面那句話是原作者的解釋躏惋,此處還沒(méi)理解透徹為什么1沒(méi)有被2覆蓋幽污;下面舉個(gè)例子對(duì)比下:

//第一個(gè)例子是題目的類型,不明為何上邊f(xié)n1的結(jié)果未被覆蓋其掂?油挥?
function fn1 (){
    a = 1;
    return this
}
fn1()
var a = 2
console.log(fn1().a) //1

//第二個(gè)例子是我理解的會(huì)正常出現(xiàn)覆蓋的情況
function fn1 (){
    a = 1;
}
fn1()
var a = 2
console.log(a) //2

4潦蝇、getName(); //1

1)執(zhí)行g(shù)etName即是執(zhí)行window.getName款熬;所以執(zhí)行結(jié)果同上題是1

5深寥、new Foo.getName(); //2

1)此處考察到了運(yùn)算符優(yōu)先級(jí)的問(wèn)題,就題目所需來(lái)看贤牛,成員訪問(wèn)".">new(帶參數(shù))>函數(shù)調(diào)用"()"(注意惋鹅,"()"分為函數(shù)調(diào)用及優(yōu)先運(yùn)算兩種,優(yōu)先級(jí)是不同的殉簸;原作者開(kāi)始的解釋就出現(xiàn)了錯(cuò)誤)

2)結(jié)果先執(zhí)行Foo.getName()闰集,結(jié)果同第一題為2;而new 2不會(huì)有任何變化般卑,因此這里的結(jié)果也是2

6武鲁、new Foo().getName(); //3

1)從結(jié)果來(lái)看,應(yīng)該理解成(new Foo()).getName()這樣執(zhí)行

2)根據(jù)成員訪問(wèn)".">new(帶參數(shù))>函數(shù)調(diào)用"()"蝠检;成員訪問(wèn)優(yōu)先執(zhí)行沐鼠,右側(cè)是.getName()沒(méi)問(wèn)題

3)左側(cè)分為兩種可能:一種是new(帶參數(shù)),即(new Foo())叹谁;此處結(jié)果是構(gòu)建一個(gè)函數(shù)

4)另一種是先執(zhí)行Foo()函數(shù)后再將其結(jié)果new饲梭;

5)因?yàn)閚ew(帶參數(shù))>函數(shù)調(diào)用"()",所以是執(zhí)行的(new Foo())焰檩,此對(duì)象Foo()自身沒(méi)有g(shù)etName這個(gè)屬性憔涉,所以會(huì)向上追溯其原型鏈上的屬性,即在此處執(zhí)行了3析苫;因此結(jié)果是3

//這里就是模擬new Foo()的結(jié)果
function F(){return this}
new F() //F {}

關(guān)于這點(diǎn)兜叨,原作者有解釋如下(還是可以理解的):

構(gòu)造函數(shù)的返回值

在傳統(tǒng)語(yǔ)言中,構(gòu)造函數(shù)不應(yīng)該有返回值衩侥,實(shí)際執(zhí)行的返回值就是此構(gòu)造函數(shù)的實(shí)例化對(duì)象浪腐。

而在js中構(gòu)造函數(shù)可以有返回值也可以沒(méi)有。

1顿乒、沒(méi)有返回值則按照其他語(yǔ)言一樣返回實(shí)例化對(duì)象议街。

2、若有返回值則檢查其返回值是否為引用類型璧榄。如果是非引用類型特漩,如基本類型(string,number,boolean,null,undefined)則與無(wú)返回值相同,實(shí)際返回其實(shí)例化對(duì)象骨杂。

3涂身、若返回值是引用類型,則實(shí)際返回值為這個(gè)引用類型搓蚪。

原題中蛤售,返回的是this,而this在構(gòu)造函數(shù)中本來(lái)就代表當(dāng)前實(shí)例化對(duì)象,遂最終Foo函數(shù)返回實(shí)例化對(duì)象悴能。

7揣钦、new new Foo().getName(); //3

1)這題我其實(shí)是懵逼的(懵逼臉??)

2)求高手指教了 _ (:з」∠)_

還是貼下原作者解釋,感覺(jué)有點(diǎn)不對(duì)

第七問(wèn), new new Foo().getName(); 同樣是運(yùn)算符優(yōu)先級(jí)問(wèn)題漠酿。

最終實(shí)際執(zhí)行為:

new ((new Foo()).getName)();

先初始化Foo的實(shí)例化對(duì)象冯凹,然后將其原型上的getName函數(shù)作為構(gòu)造函數(shù)再次new。

遂最終結(jié)果為3


最后炒嘲,引用一張?jiān)髡咛峁┑南喈?dāng)實(shí)用的運(yùn)算符優(yōu)先級(jí)表格(鼓掌)

運(yùn)算符優(yōu)先級(jí)--博客園
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末宇姚,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子夫凸,更是在濱河造成了極大的恐慌浑劳,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,723評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件夭拌,死亡現(xiàn)場(chǎng)離奇詭異呀洲,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)啼止,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門道逗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人献烦,你說(shuō)我怎么就攤上這事滓窍。” “怎么了巩那?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,998評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵吏夯,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我即横,道長(zhǎng)噪生,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,323評(píng)論 1 279
  • 正文 為了忘掉前任东囚,我火速辦了婚禮跺嗽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘页藻。我一直安慰自己桨嫁,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布份帐。 她就那樣靜靜地躺著璃吧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪废境。 梳的紋絲不亂的頭發(fā)上畜挨,一...
    開(kāi)封第一講書(shū)人閱讀 49,079評(píng)論 1 285
  • 那天筒繁,我揣著相機(jī)與錄音,去河邊找鬼巴元。 笑死毡咏,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的务冕。 我是一名探鬼主播,決...
    沈念sama閱讀 38,389評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼幻赚,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼禀忆!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起落恼,我...
    開(kāi)封第一講書(shū)人閱讀 37,019評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤箩退,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后佳谦,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體戴涝,經(jīng)...
    沈念sama閱讀 43,519評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評(píng)論 2 325
  • 正文 我和宋清朗相戀三年钻蔑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了啥刻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,100評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡咪笑,死狀恐怖可帽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情窗怒,我是刑警寧澤映跟,帶...
    沈念sama閱讀 33,738評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站扬虚,受9級(jí)特大地震影響努隙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辜昵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評(píng)論 3 307
  • 文/蒙蒙 一荸镊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧堪置,春花似錦贷洲、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,289評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至雁竞,卻和暖如春钦椭,著一層夾襖步出監(jiān)牢的瞬間拧额,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,517評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工彪腔, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留侥锦,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,547評(píng)論 2 354
  • 正文 我出身青樓德挣,卻偏偏與公主長(zhǎng)得像恭垦,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子格嗅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理番挺,服務(wù)發(fā)現(xiàn),斷路器屯掖,智...
    卡卡羅2017閱讀 134,600評(píng)論 18 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法玄柏,類相關(guān)的語(yǔ)法,內(nèi)部類的語(yǔ)法贴铜,繼承相關(guān)的語(yǔ)法粪摘,異常的語(yǔ)法,線程的語(yǔ)...
    子非魚(yú)_t_閱讀 31,587評(píng)論 18 399
  • 最近在網(wǎng)上看了一道有關(guān)前端的面試題感覺(jué)很不錯(cuò)绍坝,就在這里分享給大家徘意。 題目: function Foo() { g...
    穿越人海遇見(jiàn)你閱讀 991評(píng)論 0 12
  • Github原文 題目 這幾天面試上幾次碰上這道經(jīng)典的題目,特地從頭到尾來(lái)分析一次答案轩褐,這道題的經(jīng)典之處在于它綜合...
    秋風(fēng)喵閱讀 903評(píng)論 0 19
  • 題目如下: 答案是: 此題涉及的知識(shí)點(diǎn)眾多映砖,包括變量定義提升、this指針指向灾挨、運(yùn)算符優(yōu)先級(jí)邑退、原型、繼承劳澄、全局變量...
    WEB攻程獅閱讀 1,007評(píng)論 4 39