JavaScript var声明变量背后的原理示例解析


Posted in Javascript onOctober 12, 2013

只要是写过点JS代码,很简单一个var 就完事了。那对于JS编译器背后它又发生了什么呢?那就一步步通过代码来讲起。

x = 1; 
alert(x); 
var y = function() { 
alert(x); 
var x = 2; 
alert(x); 
} 
y();

上面的代码也会你答对了它会分别输出:1,undefined,2。对于我来说,第一反应它会输出:1,1,2。为什么第二个会输出undefined?在上面我明确定义了一个全局变量x,为何找不到?

那是因为:js编译器在执行这个y函数的时候,会把把它body里面的声明变量提前到最前面进行声明。比如:var x=2; 编译器先会在body最前面进行var x 声明。其实上面的代码等同于下面的这段代码:

x = 1; 
alert(x); 
var y = function() {<BR>var x;//此时x还未赋值,所以为undefined。 
alert(x); 
x = 2; 
alert(x); 
} 
y();

所以也就不难理解x=undefined的了.但是如果把var x = 2;这段代码给删掉,在内部它没有进行var声明。它会一直沿着作用域向上找,此时的x 就为全局x.
接下来再看一个更有趣的例子。
var a = 1; 
function b() { 
a = 10; 
return; 
} 
b(); 
alert(a); 
/////////////////////////////////// 
var a = 1; 
function b() { 
a = 10; 
return; 
function a() {} 
} b(); alert(a);

例子很简单。第一个例子为输出10,第二个会输出1。这是为什么呢?况且第二个例子我都return 了。按理都应当输出10才对呀!那时因为JS编译器在背后作怪。
两段代码差别就是第二个例子多了个function a(){};便这个函数体里面什么也没有,并且也没有对它进行任何调用。

其实JS编译器在背后会把function a() {}编译成 var a=function (){}。此时对于函数内部也有一个a=10; 外面的a些也还是1;根据JS作用域。会先找内部的a,如果找不到再向上一级一级找。
最张alert(a) 就会显示1;

Javascript 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 #Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 #Javascript
JavaScript对象学习经验整理
Oct 12 #Javascript
js修改input的type属性问题探讨
Oct 12 #Javascript
5秒后跳转到另一个页面的js代码
Oct 12 #Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 #Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 #Javascript
You might like
编写自己的php扩展函数
2006/10/09 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
js 事件小结 表格区别
2007/08/13 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
浅析Python中的多条件排序实现
2016/06/07 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python TCP包注入方式
2020/05/05 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
先进党支部事迹材料
2014/01/13 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
学生保证书
2015/01/16 职场文书
学校运动会加油词
2015/07/18 职场文书
详解Laravel制作API接口
2021/05/31 PHP