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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
详解Python中的各种函数的使用
2015/05/24 Python
django静态文件加载的方法
2018/05/20 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
小学三年级学生评语
2014/04/22 职场文书
四年级小学生评语
2014/12/26 职场文书
中学生逃课检讨书
2015/02/17 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers