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 相关文章推荐
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
动态的改变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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php中socket的用法详解
2014/10/24 PHP
php 类自动载入的方法
2015/06/03 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
旅游与酒店管理专业求职信
2014/07/21 职场文书
办理房产证委托书
2014/09/18 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
python flask框架快速入门
2021/05/14 Python
教你怎么用python实现字符串转日期
2021/05/24 Python
MySQL 数据类型选择原则
2021/05/27 MySQL
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
Nginx配置使用详解
2022/07/07 Servers