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， 由于+运算符优先级是高于条件运算符的，这时候添加括号会让你的代码变得更加易于阅读。第二，保持对技术的敬畏吧，最怕的就是你以为你都会了，其实你一无所知。