JavaScript var声明变量背后的原理示例解析


Posted in Javascript onOctober 12, 2013

只要是写过点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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
小程序关于请求同步的总结
May 05 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
Vue组件基础用法详解
Feb 05 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 #Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 #Javascript
JavaScript对象学习经验整理
Oct 12 #Javascript
js修改input的type属性问题探讨
Oct 12 #Javascript
5秒后跳转到另一个页面的js代码
Oct 12 #Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 #Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 #Javascript
You might like
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python搜索指定目录的方法
2015/04/29 Python
Python中list初始化方法示例
2016/09/18 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
工程部主管岗位职责
2013/11/17 职场文书
军训学生自我鉴定
2014/02/12 职场文书
作风建设年活动总结
2014/08/27 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
实习护士自荐信
2015/03/25 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
python利用while求100内的整数和方式
2021/11/07 Python