JavaScript阴沟里翻船之运算符优先级

栏目: JavaScript · 发布时间: 6年前

内容简介:写了两年的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 操作符。因此总是会执行第一种而不是第二种。

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阴沟里翻船之运算符优先级

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

互联网运营实战手册

互联网运营实战手册

李春雷 / 人民邮电出版社 / 2017-4 / 49.80元

为什么网络推广做不起来?微信文章也是套路?标题党的背后是什么?把服务器搞瘫痪的活动是怎么玩出来的?社群究竟要如何运营?数据又该如何运营?你会任务分解吗? 《互联网运营实战手册》详细剖析了网站(产品)的运营技巧与实战,涵盖实用的互联网运营方法,是作者从多年的实战中提炼出的运营心得和精华,涉及运营技巧、运营工具和运营思维方法。详细讲解了用户运营、内容运营、新媒体运营、社群运营、活动运营和数据运营......一起来看看 《互联网运营实战手册》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具