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

 更新时间:2017年02月24日 16:24:51   作者:追梦子  
本文主要介绍了javascript的基础知识--值和分号,具有很好的参考价值,下面跟着小编一起来看下吧

有时我很想知道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执行删除前的判断代码

    JS执行删除前的判断代码

    这篇文章主要介绍了JS执行删除前如何实现判断,需要的朋友可以参考下
    2014-02-02
  • 原生JS实现HTML转Markdown功能

    原生JS实现HTML转Markdown功能

    这篇文章主要为大家详细介绍了如何使用原生JS实现简单的HTML转Markdown功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-04-04
  • JavaScript实现图像压缩的方法

    JavaScript实现图像压缩的方法

    使用 JavaScript 和 canvas 压缩图像可以使用 canvas 的 drawImage() 方法将图像绘制到 canvas 上,然后使用 toDataURL() 方法将图像转换为 Data URL 形式,这篇文章主要介绍了JavaScript 图像压缩的相关资料,需要的朋友可以参考下
    2023-01-01
  • javascript鼠标滑过显示二级菜单特效

    javascript鼠标滑过显示二级菜单特效

    这篇文章主要为大家详细介绍了javascript鼠标滑过显示二级菜单特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript 更严格的相等 [译]

    JavaScript 更严格的相等 [译]

    大部分JavaScript程序员都知道:应该使用严格相等(===)来代替“普通”的相等操作(==).但是,有时候你的确需要一个比严格相等===更严格的运算符,比如说:在你想检查某个值是否是NaN的时候,又或者你想区分-0和+0的时候.本文解释了相关的知识以及ECMAScript.next中的解决办法:“is”操作符
    2012-09-09
  • 微信小程序wx:for 的使用及wx:key绑定两种方式

    微信小程序wx:for 的使用及wx:key绑定两种方式

    wx:for是微信小程序中的一个列表渲染指令,用于循环渲染一个数组或对象中的数据,它类似于JavaScript中的for循环,可以根据数据的长度自动渲染相应的列表项,本文给大家介绍微信小程序wx:for 的使用及wx:key绑定两种方式,感兴趣的朋友一起看看吧
    2023-12-12
  • js中onclick和addEventListener的区别

    js中onclick和addEventListener的区别

    本文对javascript中onclick事件处理的方法和addEventListener监听器进行讲解,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • JS实现DIV容器赋值的方法

    JS实现DIV容器赋值的方法

    这篇文章主要介绍了JS实现DIV容器赋值的方法,可结合ajax使用,涉及JavaScript针对页面元素的动态操作技巧,需要的朋友可以参考下
    2015-12-12
  • JavaScript数据结构yocto queue队列链表代码分析

    JavaScript数据结构yocto queue队列链表代码分析

    这篇文章主要为大家介绍了JavaScript数据结构yocto queue队列链表代码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • bootstrap手风琴折叠示例代码分享

    bootstrap手风琴折叠示例代码分享

    这篇文章主要为大家详细介绍了bootstrap手风琴折叠示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论