JavaScript陰溝裏翻船之運算符優先級

 首先歡迎你們關注個人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操做符。所以老是會執行第一種而不是第二種。

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

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， 由於+運算符優先級是高於條件運算符的，這時候添加括號會讓你的代碼變得更加易於閱讀。第二，保持對技術的敬畏吧，最怕的就是你以爲你都會了，其實你一無所知。