JS变量重复声明以及忽略var 声明的问题及其背后的原理
腾讯的一个笔试题,先看一下
var a = 100;
function fn() {
alert(a); //undefined
var a = 200;
alert(a); //200
}
fn();
alert(a); //100
var a;
alert(a); //100
var a = 300;
alert(a); //300
前两个很简单,不解释 了,涉及到声明提前的问题。
后面仨为啥呢,这要总结下重复声明的问题:
1.使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误.
2.如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色.
3.如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响.
JS的容错率很高,一些其他语言常见的小错误JS都能大度得包容,比如给一个方法传入超出预计的参数、在声明变量之前使用该变量(变量的声明提升解决了这个问题)等等,这里我们就要解剖一下JS变量重复声明以及当我们忽略var使用 a=2来声明变量时a为全局变量的问题:
- //第一段代码
- var a = 2;
- var a = 3;
- alert(a);//3
- //第二段代码
- <span style="font-size:18px;"></span><pre name="code" class="javascript">a = 2;
- alert(a);//2
这两段代码在JS的眼中是完全可行的,JS会默默忽略掉第二个var声明来将程序继续执行下去,而且后面声明的值会覆盖掉前面声明的值,而第二段代码JS会将忽略var的声明默认声明为全局变量。这些大家都应该很清楚,但是JS遇到重复声明时背后到底是怎样运行的呢?那就关系到了JS的幕后黑手:引擎以及他的左膀右臂:编译器以及作用域。
在JS代码运行过程中:
引擎负责整个代码的编译以及运行,编译器则负责词法分析、语法分析、代码生成等工作而作用域则如我们熟知的一样,负责维护所有的标识符(变量)。
当我们执行上面的代码时,我们可以简单的理解为新变量分配一块儿内存,命名为a,并赋值为2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:
1.首先编译器对代码进行分析拆解,从左至右遇见var a,则编译器会询问作用域是否已经存在叫a的变量了,如果不存在,则招呼作用域声明一个新的变量a,若已经存在,则忽略var 继续向下编译,这时a = 2被编译成可执行的代码供引擎使用。
2.引擎遇见a=2时同样会询问在当前的作用域下是否有变量a,若存在,则将a赋值为2(由于第一步编译器忽略了重复声明的var,且作用域中已经有a,所以重复声明会发生值得覆盖而并不会报错)。若不存在,则顺着作用域链向上查找,若最终找到了变量a则将其赋值2,若没有找到,则招呼作用域声明一个变量a并赋值为2(这就是为什么第二段代码可以正确执行且a变量为全局变量的原因,当然,在严格模式下JS会直接抛出异常:a is not defined)。
虽然JS很勤劳,可以帮我们解决一些小问题,但是作为程序员的我们最好按照代码规范来进行书写,于人于己都大有裨益,何乐而不为呢。
注:关于a = 2 a会被声明为全局变量其中涉及到LHS查询方式,如需了解请移步至本人另一篇文章:JS引擎之LHS RHS
JS变量重复声明以及忽略var 声明的问题及其背后的原理的更多相关文章
- 【repost】 JS变量重复声明以及忽略var 声明的问题及其背后的原理
JS的容错率很高,一些其他语言常见的小错误JS都能大度得包容,比如给一个方法传入超出预计的参数.在声明变量之前使用该变量(变量的声明提升解决了这个问题)等等,这里我们就要解剖一下JS变量重复声明以及当 ...
- es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量
自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...
- 关于Let和var声明变量的区别
Let是ES6中添加进来的一个关键字,用于声明变量,其法与var声明变量相同,不同点在于其作用域(块级). 举例可以看出其具体差别 for(var i=0;i<5;i++){ console.l ...
- C# var声明变量解析
C# var声明变量解析: 在C#3.0中提供了一种新的声明变量的方式,这就是var. 通过这个关键字,在声明变量时就无需指定类型了,变量类型是在初始化时由编译器确定的.代码如下: var ss = ...
- JS变量对象详解
JS变量对象详解 开年之后工作热情一直不是很高,这几天一直处于消极怠工状态.早上不想起床,起床了不想上班.明明放假之前工作热情还一直很高,一直心心念念的想把小程序项目怼出来,结果休假回来之后画风完全不 ...
- 前端高质量知识(三)-JS变量对象详解
在JavaScript中,我们肯定不可避免的需要声明变量和函数,可是JS解析器是如何找到这些变量的呢?我们还得对执行上下文有一个进一步的了解. 在上一篇文章中,我们已经知道,当调用一个函数时(激活), ...
- js中var的有或无--重复声明和以后的声明
js中var的有或无--重复声明和以后的声明 使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误. 如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色. 如果重复 ...
- js 变量声明 (var使用与不使用的区别)
js 变量声明 (var使用与不使用的区别) 一.总结 一句话总结:不使用var声明变量的时候,变量是全局对象(window对象)属性,在全局中使用var声明变量是全局变量 var 全局变量 局部变量 ...
- js中当for循环中有事件要使用循环变量时,变量用var声明和let声明的区别
var 声明一个全局变量,声明的变量会变量提升: let 声明一个局部变量: 当页面加载完后,for循环也结束了,如果用var声明的变量此时也随着for循环的结束而自增到满足结束循环的条件, 此时调用 ...
随机推荐
- 飞旋treap
虽然叫做非旋treap但是飞旋treap很带感所以就用这个名字了(SB) 这个东西是真的好写...... 主要的两个函数只有两个,rotate和splay,split和merge. merge就是大家 ...
- PYTHON语言之常用内置函数
一 写在开头本文列举了一些常用的python内置函数.完整详细的python内置函数列表请参见python文档的Built-in Functions章节. 二 python常用内置函数请注意,有关内置 ...
- pymysql常见问题
1.Python中pymysql出现乱码的解决方法 一般来说,在使用mysql最麻烦的问题在于乱码. 查看mysql的编码: show variables like 'character_set_%' ...
- JavaScript Date日期对象以及日期格式化方法
前言 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.util.Date类基础上创建的,为此,Date类型使用自UTC1 ...
- [物理学与PDEs]第5章习题10 多凸函数一个例子
证明函数 $$\bex \hat W({\bf F})=\sedd{\ba{ll} \cfrac{1}{\det{\bf F}},&if\ \det{\bf F}>0,\\ +\inft ...
- 2.7 if应用:猜拳游戏
应用:猜拳游戏 <1>运行效果: <2>参考代码: import random player = input('请输入:剪刀(0) 石头(1) 布(2):') player = ...
- webpack 代码优化压缩方法
在配置基于webpack的react单页面脚手架时,公共依赖库代码打包至vender.js中,页面逻辑代码打包至app.js中,使用webpack-bundle-analyzer分析发现,两个js中包 ...
- Jenkins--发送邮件配置
使用Jenkins可以进行构建,并可以发送邮件.今天我们来讲一下邮件的配置. 首先:下载安装插件: 进入[Jenkins-系统管理-插件管理-可选插件],搜索“Email Extension”进行安装 ...
- Filebeat工作原理
在这篇文章中,您可以了解Filebeat的关键构建模块以及它们如何一起工作.了解这些概念将有助于您针对特定用例对Filebeat进行配置做出明智的决定.Filebeat由两个主要组件组成: prosp ...
- ES6-Promise.all()使用
Promise.add 方法:将多个 promise 实例,包装成一个新的 promise 实例. const p = Promise.all([p1, p2, p3]); 接受一个数组作为参数,p1 ...