详解JavaScript语法对{}处理的坑爹之处

JavaScript的语法有多坑，算是众人皆知了。

先来上张图

代码如下：

代码如下:

{} + [];    // 0
[] + {};    // "[object Object]"
{} + [] == [] + {};    // false
({} + [] == [] + {});    // true

这么蛋疼的语法坑估计也只有 JavaScript 这样的奇葩才有。

相信对于绝大部分不研究 JavaScript 编译器的童鞋，根本无法理解。（至少我也是觉得不可思议）

后来专门去度娘了一下，才有点恍然大悟！

下面，我们先看看这个代码：

代码如下:

{
    a: 1
}

相信大部分童鞋，第一眼都会认为这是一个 对象直接量 。

那这个代码呢？

代码如下:

{
    var a = 1;
}

浏览器会提示语法错误吗？

显然不会！细想一下，我们就会明白到，这是一个 语句块 。

代码如下:

if (isNumber) {
    var a = 1;
}

说到这里，敏锐的你可能已经发现：JavaScript 中以 { 开头，会存在二义性。

那 JavaScript 的编译器是怎么处理这个二义性的？

了解决这个问题，ECMA 的方法十分简单粗暴：在语法解析的时候，如果一个语句以「{」开头，就只把它解释成语句块。

这真心是一个坑爹的处理方式！

那既然都是语句块，那为什么 {a:1} 却没有语法错误？

其实在这里，a 被解析器理解为了 标签。标签 是用来配合 break 和 continue 语句作定向跳转的。

因此，这样的写法就会抛出异常：

代码如下:

{
    a: function () {}
}

因为 function () {}  不是函数声明，也不是函数表达式。

到这里，大家应该对 {} 的奇葩处理有了基本的概念。我们再看回文章开始所提到的几条语句：

代码如下:

{} + [];    // 0
[] + {};    // "[object Object]"
{} + [] == [] + {};    // false
({} + [] == [] + {});    // true

第一条，因为 {} 是 语句块，代码可以理解为：

代码如下:

if (1) {}
+[]

所以返回值是 0 。

第二条，由于 {} 并不在语句的开头，所以是一个正常的 对象直接量，空数组和空对象直接相加，返回 "[object Object]" 。

理解了第一第二条，第三条已经无需解释了。

第四条，因为是 () 开始，第一个 {} 被解析为 对象直接量 ，因而两条公式相等，返回 true。

赞 (0)

相关推荐

  • js 中{},[]中括号,大括号使用详解

    一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen","AGE":"28"}; 上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性, 所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:L

  • 解析Javascript中大括号“{}”的多义性

    JS中大括号有四种语义作用 语义1,组织复合语句,这是最常见的 复制代码 代码如下: if( condition ) {   //... }else {   //... } for() {   //... } 语义2,对象直接量声明 复制代码 代码如下: var obj = {     name : 'jack',     age : 23 }; 整个是个赋值语句,其中的{name:'jack',age:23}是个表达式. 语义3,声明函数或函数直接量 复制代码 代码如下: function f

  • JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )

    复制代码 代码如下: ($=[$=[]][(__=!$+$)[_=-~-~-~$]+({}+$)[_/_]+ ($$=($_=!''+$)[_/_]+$_[+$])])()[__[_/_]+__ [_+~$]+$_[_]+$$](_/_) 注意,上面这段看起来很混乱的代码并不是自动换行,而是三行(当然,你写在同一行也没有错).编写一个页面运行一下(据说 IE 下不行),你就会发现这段代码的功能等同于 alert(1) 为什么会这样呢?我们来把这段代码拆开来分析. $=[] // $ 被赋值为一个

  • js面向对象设计用{}好还是function(){}好(构造函数)

    在网上看了很多JavaScript的项目, 用到对象都是采用{}的形式: 例如jQuery, TinyMCE等都是形如: 复制代码 代码如下: var Dialog = { int : function() { .... }, insert : function() { .... }, pop : function() { .... } }; //调用就是: Dialog.init(); 而我自己一直使用function闭包的方式, 感觉使用内部私有成员(函数,变量)更方便: 复制代码 代码如下

  • javascript的 {} 语句块详解

    今日学习解析json字符串,用到了一个eval()方法,解析字符串的时候为什么需要加上括号呢?摸不着头脑.原来javascript中{}语句块具有二义性,不加括号会出错,理解这种二义性对我们理解javascript代码有极大帮助. 一.{}语句块的两个含义 表示语句块 a. 在javascript中可以使用{}来括起代码,在编辑器中方便管理代码.因为javascript并没有块级作用域,所以这种写法是无害的. { //some code... } b. 在javascript中 ,条件判断语句,

  • 解决css和js的{}与smarty定界符冲突问题的两种方法

    当输入url地址后网页出现:Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "E:\wamp\www\cms\system/templates/index.html" on line 79 "$("#job").load("./system/templates/touch/test.php",

  • js函数使用技巧之 setTimeout(function(){},0)

    这个立刻的结果是: 浏览器会在文档内容处于稳定状态后立刻执行,这样就达到了和<script defer='defer'>或者<body onload="fun()">一样的效果. 更应该看到的是,此函数更优于上述方法,前面两个函数只能静态时刻处理(文档第一次载入的时候),而在系统开发中,常常由于查询.更新等操作后,文档的内容会刷新,这样就可以利用setTimeout的特点,使代码能在页面内容稳定后再执行!

  • javascript之函数直接量(function(){})()

    种语法是什么意思(function(){})() 如下例: <script language="JavaScript"> (function(){ document.write("some script code"); })() </script> <script language="JScript" type="Text/JScript"> <!-- var a=(function(

  • 详解JavaScript语法对{}处理的坑爹之处

    详解JavaScript语法对{}处理的坑爹之处

    JavaScript的语法有多坑,算是众人皆知了. 先来上张图 代码如下: 复制代码 代码如下: {} + [];    // 0[] + {};    // "[object Object]"{} + [] == [] + {};    // false({} + [] == [] + {});    // true 这么蛋疼的语法坑估计也只有 JavaScript 这样的奇葩才有. 相信对于绝大部分不研究 JavaScript 编译器的童鞋,根本无法理解.(至少我也是觉得不可思议)

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • 详解javascript void(0)

    void关键字介绍 首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值. 语法格式: void func() void(func()) 实例1 当点击超级链接时,什么都不发生 <!-- 1.当用户链接时,void(0)计算为0,用户点击不会发生任何效果 --> <a href="javascript:void(0);" rel="external nofollow" rel="

  • 详解JavaScript 作用域

    作用域是可访问变量的集合. JavaScript 作用域 在 JavaScript 中, 对象和函数同样也是变量. 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合. JavaScript 函数作用域: 作用域在函数内修改. JavaScript 局部作用域 变量在函数内声明,变量为局部作用域. 局部变量:只能在函数内部访问. // 此处不能调用 carName 变量 function myFunction() { var carName = "Volvo"; //

  • 详解JavaScript 异步编程

    异步的概念 异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念. 在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行).而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系. 简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效果更高: 以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await

    概述 一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例 那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生

随机推荐