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 构造函数 实例分析
Nov 26 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
JS检测图片大小的实例
Aug 21 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 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网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
七一表彰活动方案
2014/01/18 职场文书
安全资金保障制度
2014/01/23 职场文书
大一新生期末自我评价
2014/09/12 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
旅行社计调工作总结
2015/08/12 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技