成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一道JavaScript面試題：理解Function

UsherChen / 935人閱讀

摘要：關(guān)于該問題的討論今天看到的一道面試題，感覺對(duì)理解的以及原型鏈和閉包很有幫助。自己并試著講述一下自己的理解，歡迎拍磚。進(jìn)入上下文時(shí)，會(huì)獲取，函數(shù)聲明，變量聲明。

2017.3.27更新
今天在刷題的時(shí)候，突然發(fā)現(xiàn)之前已經(jīng)有人在討論這道題了，而且還涉及到了運(yùn)算符優(yōu)先級(jí)的問題，這是自己一開始沒有想到的。（其實(shí)有人也說：程序?qū)懚嗔耍匀挥涀×耸裁辞闆r下會(huì)發(fā)生什么樣的事情，但是為什么會(huì)發(fā)生這樣的事情，可能問起來一時(shí)還真回答不了。我就屬于這種狀態(tài)，所以一開始并沒有考慮到運(yùn)算符優(yōu)先級(jí)的問題）。

關(guān)于該問題的討論：

https://segmentfault.com/q/10...

https://segmentfault.com/a/11...

https://segmentfault.com/a/11...

今天看到的一道面試題，感覺對(duì)理解JavaScript的Function以及原型鏈和閉包很有幫助。自己并試著講述一下自己的理解，歡迎拍磚。
題目： 
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);
}
//調(diào)用部分
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

請(qǐng)問上述代碼的輸出結(jié)果是什么？

2,4,1,1,2,3,3
分析

Foo.getName():函數(shù)調(diào)用輸出2很好理解，直接調(diào)用的Foo.getName();

getName():函數(shù)調(diào)用輸出為4，這和變量提升有關(guān)系了，因?yàn)樵诤瘮?shù)調(diào)用分為兩個(gè)步驟，第一進(jìn)入上下文階段，第二為執(zhí)行階段。進(jìn)入上下文時(shí)，會(huì)獲取arguments，函數(shù)聲明，變量聲明。只有在執(zhí)行階段才會(huì)進(jìn)行變量賦值，而第四個(gè)是函數(shù)表達(dá)式，第五個(gè)為函數(shù)聲明，所以他們等同于下面的形式：

進(jìn)入上下文階段：function getName(){alert(5);}

執(zhí)行階段(將之前的getName函數(shù)給覆蓋掉了)：getName=function(){alert(4);}
所以不管怎么調(diào)用，答案中都應(yīng)該不會(huì)出現(xiàn)5。

Foo().getName()與第二次getName():第三個(gè)函數(shù)調(diào)用開始有迷惑性了。最后調(diào)用的getName函數(shù)，其實(shí)是全局的getName。第二次調(diào)用就成了Foo()函數(shù)中的那個(gè)，因?yàn)槠淝懊鏇]有var，也就是說這個(gè)getName并不是一個(gè)私有變量，而是全局變量，所以將之前的全局中的getName函數(shù)在執(zhí)行Foo()時(shí)會(huì)被覆蓋掉了。因此下一次再執(zhí)行getName方法的結(jié)果就變成了1，而不是之前的4了。

另外也跟new關(guān)鍵字有關(guān)，因?yàn)?b>Foo()前沒有使用new，所以不會(huì)創(chuàng)建新的對(duì)象，而且 Foo的調(diào)用應(yīng)該屬于函數(shù)調(diào)用，所以返回的this其實(shí)是window對(duì)象，而不是Foo實(shí) 例（并沒有創(chuàng)建）。

new Foo.getName():調(diào)用其實(shí)是創(chuàng)建了一個(gè)Foo.getName的新的實(shí)例（函數(shù)本身也是Object），在創(chuàng)建對(duì)象的過程中執(zhí)行到了alert(2)語句，所以就輸出為2；

new Foo().getName():調(diào)用是先根據(jù)Foo.prototyoe創(chuàng)建一個(gè)Foo的實(shí)例，調(diào)用getName方法時(shí)，因?yàn)樽陨頉]有getName方法，會(huì)去原型鏈上找，最后調(diào)用到Foo.prototype.getName,所以就是輸出為3；

new new Foo().getName():第七個(gè)就是第五和第六個(gè)的結(jié)合，先創(chuàng)建一個(gè)Foo實(shí)例，然后再創(chuàng)建Foo實(shí)例的getName函數(shù)（也就是Foo.prototype.getName）的實(shí)例。在創(chuàng)建的過程中，執(zhí)行到alert(3)語句，所以輸出3。

變化 
通過修改Foo()函數(shù)體，可以呈現(xiàn)出不同的調(diào)用變化。

Foo函數(shù)體內(nèi)的getName前加上var（getName變成了私有變量），答案會(huì)變成：2,4,4,4,2,3,3。

Foo函數(shù)體內(nèi)的getName前加上this（getName變成了屬性），答案會(huì)變成：2,4,1,1,2,1,1。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82203.html

相關(guān)文章

  • 從一道面試題談?wù)労瘮?shù)柯里化(Currying)

    摘要：忍者秘籍一書中，對(duì)于柯里化的定義如下在一個(gè)函數(shù)中首先填充幾個(gè)參數(shù)然后再返回一個(gè)新函數(shù)的技術(shù)稱為柯里化。回到我們的題目本身，其實(shí)根據(jù)測(cè)試用例我們可以發(fā)現(xiàn)，函數(shù)的要求就是接受單一函數(shù)，例如但是與柯里化不同之處在于，柯里化返回的一個(gè)新函數(shù)。 　　歡迎大家再一次來到我的文章專欄:從面試題中我們能學(xué)到什么，各位同行小伙伴是否已經(jīng)開始了悠閑的春節(jié)假期呢?在這里提前祝大家雞年大吉吧~哈哈，之前有人說...

    cppprimer 評(píng)論0 收藏0

  • JavaScript中的map方法，以及一道js面試題

    摘要：今天看見一道面試題答案是多少答案是對(duì)方法不太了解就去搜了一下，里面也包含了對(duì)這道面試題的詳解。方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后返回值組成的新數(shù)組。使用方法處理數(shù)組時(shí)，數(shù)組元素的范圍在方法第一次調(diào)用之前就已經(jīng)確定了。 今天看見一道面試題：[1,2,3].map(parseInt)答案是多少？答案是[1,NaN,NaN] 對(duì)map()方法不太了解就去搜了一下：Array....

    LittleLiByte 評(píng)論0 收藏0

  • 「前端面試題系列4」this的原理以及用法

    摘要：但是有一個(gè)總的原則那就是總會(huì)指向，調(diào)用函數(shù)的那個(gè)對(duì)象。作為對(duì)象方法的調(diào)用函數(shù)作為某個(gè)對(duì)象的方法調(diào)用，這時(shí)就指這個(gè)上級(jí)對(duì)象。 showImg(https://segmentfault.com/img/bVbnvF7?w=750&h=422); 這是前端面試題系列的第 4 篇，你可能錯(cuò)過了前面的篇章，可以在這里找到： 偽類與偽元素的區(qū)別及實(shí)戰(zhàn) 如何實(shí)現(xiàn)一個(gè)圣杯布局？ 今日頭條 面試題和思...

    fnngj 評(píng)論0 收藏0

  • 一道面試題引發(fā)的思考 --- 理解 new 運(yùn)算符

    摘要：首先，我先去上搜索了的定義運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。 今天看到一道面試題，如下，問: 實(shí)例化 Person 過程中，Person返回什么（或者 p 等于什么）？ function Person(name) { this.name = name return name; } let p = new Person(Tom); 說實(shí)...

    shengguo 評(píng)論0 收藏0

  • 一道前端面試題引發(fā)的思考

    摘要：直接開始題目是厲害了說句實(shí)話開發(fā)中誰寫成這樣保證會(huì)被打死。不過面試就是面試，有面試官的考量點(diǎn)。官方是這么說的。結(jié)果完美，不過小姐姐的意思是數(shù)組的方法會(huì)自動(dòng)觸發(fā)數(shù)組的。 直接開始題目是 if(a==1 && a==2 && a==3){ alert(厲害了) } 說句實(shí)話開發(fā)中誰寫成這樣保證會(huì)被打死。 不過面試就是面試，有面試官的考量點(diǎn)。 我理解的點(diǎn)有兩個(gè) 1、隱式類型轉(zhuǎn)換 先說...

    gaomysion 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<