JavaScript運算子優先權的詳細分析（附範例）

這篇文章帶給大家的內容是關於JavaScript運算子優先順序的詳細分析（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

寫了兩年的JavaScript的我，原以為是不會在語法上陰溝裡翻船的，可是事實上被打臉，最近在產品開發中組裡的一個帥小伙找我討論一個問題，為了方便大家閱讀，我將這個問題的模型抽像出來:

var provider = {
    test: {
        $get: function(){
            return function anonymous(config){
            };
        }
    }
};
var type = "test";
var config = {};
new provider[type].$get()(config);

上面的語句運行時候為什麼函數anonymous中的this指向的是window而不是new建立的新物件。我當時聽到這個問題的第一時刻想的是: 奈尼!怎麼可能new操作符對應的建構子中的this指向的不是新建立的物件實例呢？當時由於並沒有仔細地將問題從業務中抽像出來，其實我也有點迷糊，但仔細一想，這個語句到底要表達什麼呢？

思考

在說這個表達式所要表達的意思之前，先說一個關於new運算子的幾個小知識:

#建構函數的回傳

JavaScript建構子中可以傳回值，也可以不回傳值，例如:

function Person(){

}
var person = new Person()

我們知道這個時候建構函式回傳的是建立的實例對象，也就是建構函數中this所指向的對象。但是當你建構函數有回傳值時，就要分情況區分。如果傳回的是一個非引用類型的值時，實際上傳回的是仍然是新建立的實例物件。但是當傳回的是一個引用類型的值時，傳回的是引用物件本身。例如:

function Person(){
    return function(){}
}
var person = new Person()
typeof person // "function"

在JavaScript中函數作為一等公民，實質上就是引用類型，因此person就是傳回的匿名函數。

new運算子的兩個形態

其實在MDN的new運算子描述中，語法是

new constructor[([arguments])]

你會發現([arguments ])被中括號所包圍也就意味著可缺省，因此，如果對於不含參數的建構函數而言:new Person()與new Person二者並無區別，那我們接著思考一個問題，對於前面傳回函數的Person而言，當new Person()的時候為什麼執行的是new Person()而不是(new Person)()呢。之前如果有閱讀過我之前的一篇文章的同學知道，帶有參數的new操作符的優先權大於無參數列表的new操作符。因此總是會執行第一種而不是第二種。

了解上面的步驟之後，我們已經接近了問題的本質，對於表達式

new provider[type].$get()(config);

JavaScript引擎到底是解析成:

(new provider[type].$get())(config);

還是

new (provider[type].$get())(config);

對於第一種形式而言，(new provider[type].$get())傳回的是anonymous函數，因此在anonymous(config)中內部this指向是window。而第二種模式中provider[type].$get()回傳的是anonymous函數，因此執行new anonymous(config)時內部的this指標指向的是新建立的實例this。

當然我們從問題: this為什麼指向的是window而不是new創建的新對像中可以看出來，其實作者當時想要表達的是第二種含義，但實際上卻以第一種方式在運作。為什麼？原因非常簡單，第一種執行方式JavaScript引擎首先解析的是帶有參數列表的的new操作符，而第二種方式則是先執行了函數調用，再執行的是new操作符，我們對照上面的優先級圖可以看到，帶有參數列表的new優先級高於函數調用，因此肯定是以第一種方式去運行。

其實這篇文章並沒有太多乾貨，但是從中還是有兩點感悟吧，第一，從上一篇同類文章中我就強調避免使用這種模糊不清的表達式，多用幾個括號一切問題都迎刃而解，例如有的同學會寫出類似:

var str = "Hello" + true ? "World" : "JavaScript";

那請問str內容是什麼呢，有的人可能認為是Hello World,有的人會認為是World，實質上運算的結果是World，
因為運算子優先順序是高於條件運算子的，這時候加入括號會讓你的程式碼變得更容易閱讀。第二，保持對技術的敬畏吧，最害怕的就是你覺得你都會了，其實你一無所知。

以上是JavaScript運算子優先權的詳細分析（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！