js分号的重要性
js中语句末尾可以不加分号,
很多时候在做练习或写几个页面时,我都是不会加的。虽然知道加了会好一点。但就是觉得很敲一句就要多按一次分号键(;)来加分号,而不加也不怎么样,然后就不想加了。
也听说在对js压缩于,会自动给语句加分号。
只是呢,从没认真考虑过如果分号会给js带来错误?什么情况下会导致错误?
——看了《走进javascript——不起眼的基础,值和分号》http://www.cnblogs.com/pssp/p/5215417.html 一文,我决定都给我的js语句加上分号。
难道是不加分号对js的影响很大?不,是我不加分号连什么情况下会导致错误都不知道,还偷什么懒?这不是在造坑?
先总结一下,像很多插件的js的首句前面都会有个;分号,是用来避免当如果合并如下js文件如以下情况时,解释器可能会出错。
//代码块A var a = 10;
var b = 5; var c = a + b //代码块B ('x' + 'y').toString()
在 ('x' + 'y').toString() 前面加上分号就好了。
//代码块A
var a = 10;
var b = 5;
var c = a + b
//代码块B
;('x' + 'y').toString()
所以,分号是一件多么重要的事情。
另外,我想自己写的一些js文件放到一些工具里去注释或压缩,就不能好好的运行了呢?分号?特殊语句?
如果我好好的写分号,可能就不会纠结是分号问题还是遇到特殊的语句问题了。
值
有时我很想知道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)
因此不要把分号单单认为只是用来结束某段代码,它还可以用来隔离某段代码和别人划清界限。
js分号的重要性的更多相关文章
- JavaScript学习日志:关于js分号
javascript有自动添加分号的功能,但是不是所有情况都会自动添加,要区分: 1,如果语句独占一行 如果当前行内的语句能够被js正确解析,那么就会在句尾添加一个分号. (如何判断是否正确解析?你在 ...
- JS分号 惹的坑
JS中会自动清除句子和句子之间的空格以及tab缩进, 这样就可以允许用户编写的代码更加随性和更加可读, 在该行代码解析的时候如果该行代码可以解析, 就会在该行代码最后自动填写分号,如果该行代码无法解析 ...
- 数组无法使用 forEach() 方法 - 分号的重要性
问题描述: 函数的结构如上图所示,在调用该函数的时候,浏览器报错: 分析原因: 在 js 的语法中,如果语句独占一行,通常可以省略句末的分号 但实际上 js 解析代码的时候,只有在句末缺少分号就无法正 ...
- 论js闭包的重要性
很久没写博客了,今天发现了一个很有意思的问题,写下来分享一下 话不多说,贴前端代码: <script type="text/javascript" src="js/ ...
- js分号问题
总结一句话: 一行开头是括号(比如IIFE)或者方括号的时候加上分号就可以
- JS的分号可以省掉吗?
摘要: JavaScript语言从设计之初就是考虑带分号的,使用不带分号的编码规则就要小心点啦. 背景 最近在项目中开始使用新的编码规范,一开始ESLint报一大堆错误,改得我想砸键盘,花了好些时间才 ...
- js中的Object.defineProperty()和defineProperties()详解
ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...
- 用js来实现那些数据结构(数组篇03)
终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在js中的实现方式.那么这篇文章还是得啰嗦一下数组的相关知识,因为数组真的太重要了!不要怀疑数组在JS中的重要性与实用性.这篇文章分为 ...
- 用js来实现那些数据结构03(数组篇03-排序及多维数组)
终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在js中的实现方式.那么这篇文章还是得啰嗦一下数组的相关知识,因为数组真的太重要了!不要怀疑数组在JS中的重要性与实用性.这篇文章分为 ...
随机推荐
- Java多线程的下载器(1)
实现了一个基于Java多线程的下载器,可提供的功能有: 1. 对文件使用多线程下载,并显示每时刻的下载速度. 2. 对多个下载进行管理,包括线程调度,内存管理等. 一:单个文件下载的管理 1. 单文件 ...
- Math.abs(~2018) —— 入群问答题
这道题的关键点在于对位操作符“~”的理解,以及内部的具体实现(设计到补码) 最后的结果是:2019 参考文章: http://www.w3school.com.cn/js/pro_js_operato ...
- 论文笔记:语音情感识别(三)手工特征+CRNN
一:Emotion Recognition from Human Speech Using Temporal Information and Deep Learning(2018 InterSpeec ...
- 20165207 Exp0 Kali安装
Exp0 Kali安装 选哪个 在打开www.kali.org的网页之后,我进入其下载页面,可供下载的kali版本有很多 对于选择哪个版本,在实验楼我用过xfce桌面.下面还有直接下下来就可以在vm里 ...
- linux服务器---配置bind
配置bind 1.确定已经安装bind软件,需要安装3 个bind.bind-chroot.bind-util [root@localhost wj]# yum install –y bind bin ...
- Xcode10.x适配的部分问题
因为我们项目是一个Workspace,由若干个库组成(组件化比较碎),又涉及到海外和国内(存在很多差异性),整个项目的编译是由每个库的脚本(每个库生成会支持32位和64位,每次编译前会清除历史缓存), ...
- Python 除法运算
Python中的除法较其它语言显得非常高端,有套很复杂的规则.Python中的除法有两个运算符,/和// 首先来说/除法: 在python 2.x中/除法就跟我们熟悉的大多数语言,比如Java啊C啊差 ...
- java使用反射给对象属性赋值的两种方法
java反射无所不能,辣么,怎么通过反射设置一个属性的值呢? 主程序: /** * @author tengqingya * @create 2017-03-05 15:54 */ public cl ...
- python 线程 进程 协程 学习
转载自大神博客:http://www.cnblogs.com/aylin/p/5601969.html 仅供学习使用···· python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件和 ...
- 设置redis访问密码
在服务器上,这里以linux服务器为例,为redis配置密码. 1.第一种方式 (当前这种linux配置redis密码的方法是一种临时的,如果redis重启之后密码就会失效,) (1)首先进入redi ...