资讯专栏INFORMATION COLUMN

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

selfimpr / 3474人阅读

摘要:操作符的两种形态其实在的操作符描述中,语法是你会发现被中括号所包围也就意味着可缺省,因此,如果对于不含参数的构造函数而言与二者并无区别,那我们接着思考一个问题,对于前面返回函数的而言,当的时候为什么执行的是而不是呢。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99371.html

相关文章

  • 记一次XX前端面试

    摘要:面试官说那我问你一个哲学的问题,为什么有数据结构这种东西哇,这是啥,巴拉巴拉扯了一通,大致就是物以类聚,人以群分,先人积累下来的经验,这些让我们更方便处理数据啥的。 前因,没有比摸鱼有趣的事了 距离自己被外派(俗称外包)出去,已经过了快五个月,工作的话,很闲。人啊,一定保持好的习惯,懒惰是会上瘾,日常摸鱼,怀疑人生,我是谁,我在哪,我要干什么。 中午吃饭的时候,收到了boss直聘的一条...

    Shisui 评论0 收藏0
  • 从[]==![]为true来剖析JavaScript各种蛋疼的类型转换

    摘要:将他们放在堆中是为了不影响栈的效率。所以简单数据类型的值直接存放在栈中。可以对比上面那张图默认是调用方法的依,于是等于空字符串。空字符串中国标准时间方法返回对象的原始值,可能是字符串数值或值等,看具体的对象。,需要两个操作数同时转为。 你是否在面试中遇到过各种奇葩和比较细节的问题? []==[] //false []==![] //true {}==!{} //false {}==![...

    Jeff 评论0 收藏0
  • 前端面试Js篇

    摘要:作为构造函数使用,绑定到新创建的对象。内部实现类和类的继承构造函数构造函数调用父类构造函数参考请尽可能详尽的解释的工作原理的原理简单来说通过对象来向服务器发异步请求,从服务器获得数据,然后用来操作而更新页面。 1 . 请解释事件代理 (event delegation) 当需要对很多元素添加事件的时,可以通过将事件添加到它们的父节点通过委托来触发处理函数。其中利用到了浏览器的事件冒泡机...

    anyway 评论0 收藏0
  • JavaScript 编程精解 中文第三版 一、值,类型和运算

    摘要:来源编程精解中文第三版翻译项目原文译者飞龙协议自豪地采用谷歌翻译部分参考了编程精解第版在机器的表面之下,程序在运转。本章将会介绍程序当中的基本元素,包括简单的值类型以及值运算符。示例中的乘法运算符优先级高于加法。 来源:ApacheCN『JavaScript 编程精解 中文第三版』翻译项目原文:Values, Types, and Operators 译者:飞龙 协议:CC BY-NC...

    wh469012917 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<