走进javascript——不起眼的基础,值和分号


Posted in Javascript onFebruary 24, 2017

有时我很想知道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 相关文章推荐
Extjs单独定义各组件的实例代码
Jun 25 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
angular.js 路由及页面传参示例
Feb 24 #Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 #Javascript
js中开关变量使用实例
Feb 24 #Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 #Javascript
js实现导航吸顶效果
Feb 24 #Javascript
canvas绘制多边形
Feb 24 #Javascript
angularjs实现多张图片上传并预览功能
Feb 24 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python分数表示方式和写法
2019/06/26 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python实现简单颜色识别程序
2020/02/19 Python
使用Python封装excel操作指南
2021/01/29 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
师范教师毕业鉴定
2014/01/13 职场文书
党风廉政建设责任书
2014/04/14 职场文书
培训计划通知
2015/07/15 职场文书