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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
react redux入门示例
2018/04/19 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python通过函数属性实现全局变量的方法
2015/05/16 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
JPA面试常见问题
2016/11/14 面试题
公务员培训自我鉴定
2013/09/19 职场文书
大学生个人总结的自我评价
2013/10/05 职场文书
预备党员表决心书
2014/03/11 职场文书
村容村貌整治方案
2014/05/21 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
通过Python把学姐照片做成拼图游戏
2022/02/15 Python