有时我很想知道javascript解析引擎是如何区分一个变量的值,比如下面这段代码。

var x = 'javascript'; //javascript
x = "hello"; // hello
x = 555; //555
x = null; //null
x = a; //a is not defined
x = true; //true

对于数字是直接赋值的,因为它没有多样性,数字就是数字。但是对于值是英文的情况就很难区分了,因为在编程语言中,英文既可能是字符串,也可能是引用的另外一个变量。因此如何区分变量和字符串就显得格外重要,编程语言常常将字符串用引号括起来,从而达到区分变量和字符串的作用。有些语言比如java,它们还区分单引号和双引号,单引号括起来的是一个字符,而双引号括起来的才是字符串。但javascript并不区分字符和字符串,而是把它们都当作字符串,因此在javascript中单引号和双引号并没有什么区别。

虽然通过引号可以用来区分变量和字符串,但值往往也可能是一个关键字,比如上面那段代码我将x赋值为null,那么这些编程语言又是如何区分变量和关键字的呢?

null = 123;
console.log(null); //Uncaught ReferenceError: Invalid left-hand side in assignment
undefined = 456;
console.log(undefined); //undefined

以上我给null和undefined分别赋给了另外一个值,其结果,给null赋值报错了,给undefined赋值虽然没有报错,但也没有成功。也许对于null和undefined来说,它们就是值。而变量则是寻找值。我们说javascript是如何区分变量和关键字,最终或许就变成了javascript是如何区分变量和值的。

分号

在一些JS插件中,经常会看到类似下面这样的一行代码

;(function(){
.........
})();

在代码的最前面有一个分号,那么这个分号是干什么用的呢?

我们知道一个分号代表了一段代码的结束,但问题是javascript允许你不写分号,这样就出现了一个问题,代码的结束与否不是你来决定的而是由程序来决定的,而程序也不是万能的,往往它只是走的某个规则,而如果你写的这段代码和它的规则不符,最终的结果就有些不如人意了。

以下是javascript对省略分号的解析规则

var a
=
1 + 2
console.log(a) //3

javascript解析器会将以上代码解析成

var a = 1 + 2;
console.log(a); //3

如果javascript不给2后面添加分号将会无法解析下去,也可以这么说,如果遇到无法解析下去则javascript解析器会尝试给其添加一个分号,如果还是解析不了则报错。又比如下面这一段代码

var a = 10;
var b = 5; var c = a + b
(a + b).toString() // b is not a function

它说b不是一个函数,也就是说以上这段代码很有可能解析成了下面这段代码

var a = 10;
var b = 5; var c = a + b(a + b).toString();

它把()当成了函数调用。也可以理解为javascript解析器会尽可能多的去匹配,但也有几个例外,它们是retrun、break、continue,当javascript解析器解析到这几个关键字时,它不会把换行后的内容当成是自身的,而是直接在换行之前添加分号,不妨看看下面这段代码

function test(){
return
123;
} console.log(test()); //undefined

它并没有返回123,也就是说它直接在retrun后面加了分号。

再回过头来看看,那些插件开发者为什么要在代码第一行添加一个分号?

既然是插件,自然是给别人用的对吧,可关键问题是你也不清楚使用这个插件的人它的代码是如何编写的,这好像挺谬论的,它的代码和我们有什么关系呢。

如果说使用者的代码会影响我们的代码,那么它又是如何影响的呢?比如我们正在编写类似下面这样的一段代码

<script src="test.js"></script>
<script src="zmz.js"></script>

第一个脚本是使用者自己写的,第二个脚本是引入的某个插件,那么浏览器又是如何解析这两个脚本的呢?不妨我们来测试一下

test.js

var a
a

zmz.js

(1+2)

如果你运行起来会发现并没有报错,也就是说javascript解析器并不会因为前面这个文件没有加分号而和后一个文件中的代码一起解析。

问题倒不在这,而是有可能你刚刚看了一本关于HTTP的书,哇靠,原来把文件合并可以减少请求数,于是乎这两个脚本融为一体了。摇身一变成了下面这样

var a
a(1+2)

你说这能不出错吗,如果我们在插件的一开始就加上分号,这种事情就不可能出现。

var a
a;(1+2)

因此不要把分号单单认为只是用来结束某段代码,它还可以用来隔离某段代码和别人划清界限。

走进javascript——不起眼的基础,值和分号的更多相关文章

  1. 玩转JavaScript OOP[0]——基础类型

    前言 long long ago,大家普遍地认为JavaScript就是做一些网页特效的.处理一些事件的.我身边有一些老顽固的.NET程序员仍然停留在这种认知上,他们觉得没有后端开发肯定是构建不了系统 ...

  2. JavaScript学习02 基础语法

    JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...

  3. 【JavaScript 从零开始】 原始值和对象引用、类型转换

    JavaScript 中的原始值(undefined.null . 布尔值.数值和字符串)于对象(包括数组和函数)有着根本区别. 原始值是不可更改的:任何方法都无法改变(或“突变”)一个原始值. 对于 ...

  4. JavaScript传递变量:值传递?引用传递?

    今天在看 seajs-2.2.1/src/util-events.js源码,里面有段代码不是很理解: var events = data.events = {} // Bind event seajs ...

  5. JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...

    目录(代码编写): 显示数据 语法 变量 & 变量类型 对象 函数 事件 字符串 运算符 条件语句 循环语句 Break 和 Continue 使用 JS 近两年,现整理下一些基本: HTML ...

  6. JavaScript Allongé 序幕:值和表达式

    序幕:值和表达式   下面的内容非常基础,然而,就像大多数的故事一样,在最初的时候开始才是最好的开端. 想象一下,我们要去最喜欢的咖啡馆,他们会为你制作几乎任何你想要的饮料,从小而强烈的 Espres ...

  7. php面试专题---12、JavaScript和jQuery基础考点

    php面试专题---12.JavaScript和jQuery基础考点 一.总结 一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...

  8. 100多个很有用的JavaScript函数以及基础写法大集合

    100多个很有用的JavaScript函数以及基础写法大集合 1.document.write("");为 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:docume ...

  9. JS获取url中query_str JavaScript RegExp 正则表达式基础详谈

    面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=1 1.window.location.href(设置或获取整个 URL ...

随机推荐

  1. 微信小程序之----audio音频播放

    audio audio为音频组件,我们可以轻松的在小程序中播放音频. audio组件属性如下: 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String ...

  2. 微信小程序之----加载中提示框loading

    loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...

  3. [题解]bzoj 3223 文艺平衡树

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3884  Solved: 2235[Submit][Sta ...

  4. 从损坏的wt文件中恢复出WiredTiger集合

    Reference: http://dev.guanghe.tv/2016/06/recovering-a-wiredtiger-collection-from-a-corrupt-wt-file.h ...

  5. UVa 10427 - Naughty Sleepy Boys

    题目大意:从1开始往后写数字,构成一个如下的字符串 123456789101112... .求第n位的数字是多少. 找规律,按数字的位数可以构建一个类似杨辉三角的东西,求出第n位是哪个数的第几位即可. ...

  6. python 模块添加

    python包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的路径.下面将具体介绍几种常用情况: (1)主程序与模块程序在同一目录下: 如下面程序结构:`-- src  ...

  7. robotium从入门到放弃 四 Robotium常用API

      获取控件 getText() getEditText() getButton() getImage() getImageButton() getEditText() getView() getWe ...

  8. HTML5学习笔记 二:article和section

    在HTML5中,article可以看做特殊种类的section,它比section更强调独立性. section元素强调分段或分块,而article强调独立性: 如果一块内容相对独立.完整,应该使用a ...

  9. Docker环境中部署DzzOffice 1.2.5.2

    整体思路: 1.官方获取mysql.php+apache镜像: 2.基于php+apache,创建DzzOffice镜像: 3.启动mysql镜像: 4.启动DzzOffice镜像,链接mysql镜像 ...

  10. Plugin execution not covered by lifecycle configuration的解决方案

    pom配置文件中,提示错误:Plugin execution not covered by lifecycle configuration. 如图: 这表示m2e在其执行maven的生命周期管理时没有 ...