走进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 相关文章推荐
jquery属性过滤选择器使用示例
Jun 18 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
canvas绘制多边形
Feb 24 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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实现上传图片保存到数据库的方法
2015/02/11 PHP
php微信支付之APP支付方法
2015/03/04 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
浅谈MySQL中的触发器
2015/05/05 Python
python中import学习备忘笔记
2017/01/24 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python ftplib模块使用代码实例
2019/12/31 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
服务生自我鉴定
2014/01/22 职场文书
《问银河》教学反思
2014/02/19 职场文书
网络技术专业求职信
2014/05/02 职场文书
公司承诺书怎么写
2014/05/24 职场文书
2014年班组工作总结
2014/11/20 职场文书
2015年教研工作总结
2015/05/23 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
辞职信怎么写?
2019/05/21 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技