JS声明变量背后的编译原理剖析


Posted in Javascript onDecember 28, 2012

只要是写过点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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
微信小程序 教程之引用
Oct 18 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
vue2中使用less简易教程
Mar 27 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 #Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
web性能优化之javascript性能调优
Dec 28 #Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 #Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 #Javascript
Javascript 加载和执行-性能提高篇
Dec 28 #Javascript
javascript延时加载之defer测试
Dec 28 #Javascript
You might like
PHP无限分类的类
2007/01/02 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python设置环境变量的作用和实例
2019/07/09 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
社区工作感言
2014/02/21 职场文书
大学生安全责任书
2014/07/25 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
同学毕业留言寄语
2015/02/27 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android