首页 / JAVASCRIPT / JavaScript运算符优先级的详细分析（附示例）

JavaScript运算符优先级的详细分析（附示例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript运算符优先级的详细分析（附示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3216字，纯文字阅读大概需要5分钟。

内容图文

本篇文章给大家带来的内容是关于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运算符优先级的详细分析（附示例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JavaScript运算符优先级的详细分析（附示例）全部内容，希望文章能够帮你解决JavaScript运算符优先级的详细分析（附示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/283939.html

来源：【匿名】