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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
原生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超牛逼无限极分类生成树方法
2015/05/11 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
python中MySQLdb模块用法实例
2014/11/10 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
matplotlib绘制动画代码示例
2018/01/02 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
python 实现汉诺塔游戏
2020/11/28 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
公司新员工的演讲稿注意事项
2014/01/01 职场文书
领导党性分析材料
2014/02/15 职场文书
员工试用期自我评价
2014/09/18 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
匿名信格式范文
2015/05/27 职场文书
微信搭讪开场白
2015/05/28 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Python 内置函数速查表一览
2021/06/02 Python