一道頗有難度的JavaScript題

alexnevsky 發(fā)布于2019-08-21 11:28 / 1411人閱讀

摘要：所以，這次再分享一道稍微有難度的題目。首先運行全局的被覆蓋成輸出并且返回的此時代表的是。隨后相當(dāng)于執(zhí)行的那么輸出的實際就是被覆蓋。首先帶參數(shù)的操作符優(yōu)先級最高，第一步劃分為第二步劃分為所以執(zhí)行這個函數(shù)是對應(yīng)的所以執(zhí)行肯定輸出的是。

　　上次分享了一道題，大家反響不錯，很開心自己寫的東西有人愿意花時間去看，也給了自己莫大的鼓舞，其實做題雖然不比真正的編程，但是也能夠讓你發(fā)現(xiàn)一些你之前沒有注意到的語言層面的問題。所以，這次再分享一道稍微有難度的JavaScript題目。

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

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

　　請問上述代碼在瀏覽器環(huán)境下，輸出結(jié)果是多少？
　　揭曉一下最終答案:

2 4 1 1 2 3 3

　　前四道難度不是很大，主要是后三道，基本是全軍覆沒，感嘆實在是太繞了了。后面慢慢分析了一下，逐個講一下吧。
　　首先必須注意一個問題

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

　　在函數(shù)內(nèi)部聲明的getName變量，前面是不帶有var、let,const的，所以其實根據(jù)LHS(這個的介紹可以去的我博客看一下關(guān)于LHS和RHS的總結(jié))，聲明的getName是在全局范圍內(nèi)(也是就window)。
　　其次需要明確你是否知道下面代碼在瀏覽器中的執(zhí)行結(jié)果：

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

　　上述代碼的執(zhí)行結(jié)果是:4。原因是這樣的，var聲明的變量和函數(shù)聲明function都會被提升，但是函數(shù)聲明的提升的級別是比
var要高的，所以上面的代碼的實際執(zhí)行結(jié)果是：

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

　　后一個函數(shù)表達(dá)式getName覆蓋了前面的函數(shù)聲明getName,實際執(zhí)行的是函數(shù)表達(dá)式（也就是是為什么JavaScript永遠(yuǎn)不會有函數(shù)重載這么一說了），所以輸出的是4。
　　首先我給下面的代碼添加一下必要的注釋：

//函數(shù)聲明
function Foo() {
    //全局變量
    getName = function () { 
        console.log("1");
    };
    return this;
}
//為函數(shù)添加屬性getName,其類型是Function，所以這里也可以看出來，F(xiàn)unction也是一種Object
Foo.getName = function () {
    console.log("2");
};
//為Foo的原型添加方法getName
Foo.prototype.getName = function () { 
    console.log("3");
};
var getName = function () { 
    console.log("4");
};
function getName() { 
    console.log(5);
}

　　下面執(zhí)行第一條語句：

Foo.getName();

　　函數(shù)Foo本身并沒有執(zhí)行，執(zhí)行的是函數(shù)的屬性getName，當(dāng)然輸出的是：2.
　　接下來執(zhí)行：

getName();

　　這是在全局范圍內(nèi)執(zhí)行了getName()，有兩條對應(yīng)的getName的聲明，根據(jù)前面我們所提到的提升的級別來看實際執(zhí)行是函數(shù)表達(dá)式：

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

　　所以輸出的是4。
　　接下來執(zhí)行

Foo().getName();

首先看一下JavaScript的操作符優(yōu)先級,從高到低排序

　　從上面可以看出來()與.優(yōu)先級相同，所以Foo().getName()從左至右執(zhí)行。首先運行Foo(),全局的getName被覆蓋成輸出console.log("1"),并且返回的this此時代表的是window。隨后相當(dāng)于執(zhí)行的window.getName(),那么輸出的實際就是1(被覆蓋)。
　　下面到了

getName();

　　這個不用說了，執(zhí)行的還是：1(和上面一毛一樣)。
　　下面到了三個最難的部分：

new Foo.getName();

對于這條語句的執(zhí)行，有兩種可能：

(new Foo).getName()

或

new (Foo.getName)()

　　但是我們根據(jù)操作符優(yōu)先級表可以得知，其實上.操作符要比new優(yōu)先級要高，所以實際執(zhí)行的是第二種，所以是對

Foo.getName = function () {
    console.log("2");
};

函數(shù)執(zhí)行了new操作，當(dāng)然輸出的是2。
下面到了執(zhí)行

new Foo().getName();

　　這個語句的可能性也有兩種：

(new Foo()).getName();

或者

new (Foo().getName)();

　　那么應(yīng)該是那種的呢？原來我以為會是第二種的執(zhí)行方式，后面通過瀏覽器調(diào)試發(fā)現(xiàn)真實的執(zhí)行的方式是第一種。我看到題目的作者是這么解釋的：

首先看運算符優(yōu)先級括號高于new。實際執(zhí)行為(new Foo()).getName()。遂先執(zhí)行Foo函數(shù)。

　　我覺得上面的解釋是有問題的，對比上面兩種執(zhí)行方式，第一種是先執(zhí)行new，然后執(zhí)行的是.操作符，然后執(zhí)行的是()。第二種是先執(zhí)行了(),再執(zhí)行的是.，最后執(zhí)行new操作符。如果真的按照引用所說的用優(yōu)先級的方式判別，其實恰恰應(yīng)該執(zhí)行的是第二種而不是第一種。
　　后來總算找到原因了，原來之前那個出現(xiàn)的比較多的JavaScript優(yōu)先級的表并不完整，萬能的MDN給出了最權(quán)威的JavaScript優(yōu)先級表運算符優(yōu)先級
　　我列舉出最重要的部分（由高到低）：
　　
　　所以帶參數(shù)的new操作符是優(yōu)先級最高的，這下就沒有問題了，執(zhí)行順序確實應(yīng)該是第一種。
　　那么按照(new Foo()).getName();來執(zhí)行，情況就就很簡單了，(new Foo())返回了新生成的對象，該對象沒有getName()方法，所以在prototype中找到了getName()方法。所以輸出的是3。
　　勝利就在眼前，我們看一下最后一問。

new new Foo().getName();

　　和上一步一樣的方法，我們按照優(yōu)先級表給分析一下這個語句到底是怎么執(zhí)行的。
　　首先帶參數(shù)的new操作符優(yōu)先級最高，第一步劃分為：

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

　　第二步劃分為：

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

　　所以執(zhí)行(new Foo()).getName這個函數(shù)是對應(yīng)的Foo.prototype.getName,所以執(zhí)行new (Foo.prototype.getName)()肯定輸出的是3。
　　哈哈哈，這么難得題終于解決了，開心~總結(jié)一下吧，首先JavaScript知識最好去MDN去查，萬一別的地方寫錯了真的是害人不淺。其次，如果在寫代碼的時候還是少利用操作符優(yōu)先級這種東西，一旦不明確的地方就立刻用()，代碼的可閱讀性真的是很重要！很重要！很重要！畢竟代碼還是給人看~
　　如果有寫的不正確的地方，歡迎大家指出，資歷深淺，請多指教。歡迎大家去圍觀我的博客呀~~http://mrerhu.github.io
　　