js的一道經典題

wemallshop 發布于2019-08-19 17:38 / 950人閱讀

摘要：它的特性是先進后出。執行第一行代碼該行代碼執行后會變成這樣。對于來說，點運算級最高，所以先進行計算表達式的值。如果先運算的話，就證明了優先級高于點號，與規范不和。最后一個問題同理倒數第二個。謝謝李衛的提醒。

題

    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)};

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

答

    2 ----Foo.getName();
    4 ----getName();
    1 ----Foo().getName();
    1 ----getName();
    2 ----new Foo.getName();
    3 ----new Foo().getName();
    3 ----new new Foo().getName();

概念

為了閱讀效益最大化，請先了解執行環境和變量對象的文字性概念。

執行環境挺常見的，它是長這樣的。它的特性是先進后出(stack)。

上述圖片是來源于代碼執行到Foo( ).getName( )。

(anonymous function) 其實就是global context

表示方法：

    ECStack = [
        functionContext(Foo),    /*這不是函數*/
        GlobalContext    
    ]

變量對象也挺常見，在Chrome中長這樣。

表示方法通常是：

//以上述代碼尚未執行時為例
    VO = {    
        Foo: {
            ,
            return this
        }
        getName: 
    }

分析

代碼執行有兩個階段

進入環境（代碼未執行，已編譯）

代碼執行

現在一起來看看每一行代碼的執行

上述代碼未執行時，變量對象是這樣的。

    VO = {
        Foo: {
            ,
            return this
        }
        getName: 
    }

執行"第一行"代碼

該行代碼執行后VO會變成這樣。

    VO = {
        Foo: { 
            ,
            getName: 
    }

VO的Foo圖示是這樣的

執行"第二行"代碼

該行代碼執行后VO會變成這樣。

    VO = {
        Foo: { 
            ,
            getName: 
    }

VO的Foo圖示是這樣

執行"第三行"代碼

該行代碼執行后VO會變成這樣。

    VO = {
        Foo: { 
            ,
            getName: 
    }

執行"第四行"代碼（第一問）

直接去VO里尋找結果發現alert 2。

執行"第五行"代碼（第二問）

getName() //等于
window.getName();

同樣直接在VO里可以直接找到答案 alert 4。

執行"第六行"代碼（第三問）

這里比上述多了一個函數調用，Foo()調用返回this(指向window)，所以此時

Foo().getName()； ／／等于
window.getName()

同時注意：
由于Foo()調用，導致VO發生了變化。最后alert 1.

    VO = {
        Foo: { 
            ,
            getName: 
    }

執行"第七行"代碼（第四問）

結果同上

執行"最后三行"代碼（第五、六、七問）

最后三問考察了new、屬性訪問符、及函數調用優先順序和new運算符的作用。

優先順序參考如下,或點這

無論是用哪種屬性訪問表達式，在"."和"[]"之前的表達式總是會先計算的。

對于new Foo.getName()來說，點運算級最高，所以先進行計算表達式Foo的值。如果先運算new的話，就證明了new優先級高于點號，與規范不和。

而對于new Foo().getName()來說，Foo()與new Foo()相比，new優先級更高，所以先算new Foo()，new出來的新對象繼承了Foo.prototype屬性，因此新對象訪問getName時會彈出3.

此處要明白new的作用

創建新的空對象

將新對象繼承構造函數的prototype屬性，并調用構造函數初始化

將構造函數的this指針指向新建對象。

最后一個問題同理倒數第二個。

謝謝ID:李衛的提醒。

原題和分析鏈接

GPU云服務器云服務器 s循環經典邏輯題 js的基礎面試題第一道 js邏輯題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78728.html

前端計劃——一道經典的JavaScript問題（含閉包、事件輪詢、作用域等概念解釋）

摘要：作用域和作用域鏈關于作用域這里不做過多解釋，中根據作用域可分為全局變量和局部變量。好吧，不是這部分核心，核心是解釋的單線程和事件輪詢機制。這部分就涉及到閉包的理解了。前言：這是一道很經典的Js面試題，涉及到閉包、變量作用域、setTimeout等知識，對于深入理解這些內容很有幫助題目描述 //問題描述：請寫出最終的輸出值，并解釋原因 var value1 = 0, value2 ...

EdwardUp 2019-08-21 11:29 評論0 收藏0
由一道題圖解JavaScript的作用域

摘要：當我將此題的作用域鏈畫出來之后，終于感覺作用域入門了。創建函數的作用域鏈，并初始化為函數的所包含的對象，即包含了的作用域鏈。作用域為了理解作用域，跪看了好幾篇大神的博文，終于略知一二。 1.題目其中，看到這樣一道題（稍作修改）： function factory() { var name = laruence; var intro = function(){...

nevermind 2019-08-19 17:56 評論0 收藏0
一道js閉包面試題的學習

摘要：然后最外層這個函數會返回一個新對象，對象里面有一個屬性，名為，而這個屬性的值是一個匿名函數，它會返回。最近看到一條有意思的閉包面試題，但是看到原文的解析，我自己覺得有點迷糊，所以自己重新做一下這條題目。閉包面試題原題 function fun(n, o) { // ① console.log(o); return { // ② fun: function(m) ...

plus2047 2019-08-26 12:15 評論0 收藏0
由淺入深的前端面試題和矯情的“浪漫主義”詩句

摘要：好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。這一星期陸陸續續面試了不少于個人，其中不乏工作履歷突出的候選者。這樣做的問題在于循環并沒有要求枚舉對象的修改與當前循環保持一致。好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。傳統的佛學經典里，被世人熟知的有這樣一句話：一花一世...

JerryZou 2019-08-21 11:33 評論0 收藏0
由淺入深的前端面試題和矯情的“浪漫主義”詩句

摘要：好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。這一星期陸陸續續面試了不少于個人，其中不乏工作履歷突出的候選者。這樣做的問題在于循環并沒有要求枚舉對象的修改與當前循環保持一致。好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。傳統的佛學經典里，被世人熟知的有這樣一句話：一花一世...

lk20150415 2019-08-01 16:27 評論0 收藏0