JavaScript陰溝裡翻船之運算子優先順序

請叫我王磊同學發表於2018-11-25

 首先歡迎大家關注我的Github部落格,也算是對我的一點鼓勵,畢竟寫東西沒法變現,堅持下去也是靠的是自己的熱情和大家的鼓勵。各位讀者的Star是激勵我前進的動力,請不要吝惜。  

起源

  寫了兩年的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操作符。因此總是會執行第一種而不是第二種。

JavaScript陰溝裡翻船之運算子優先順序

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

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陰溝裡翻船之運算子優先順序

相關文章