走进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 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
javascript中递归的两种写法
Jan 17 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
解决Python传递中文参数的问题
2015/08/04 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
自主招生自荐信范文
2013/12/04 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
市场营销专业求职信
2014/06/17 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
力克胡哲观后感
2015/06/10 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript