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 相关文章推荐
取得传值的函数
Oct 27 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
Bootstrap精简教程
Nov 27 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
js canvas实现星空连线背景特效
Nov 01 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
Content-type 的说明
2006/10/09 PHP
PHP学习之PHP表达式
2006/10/09 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python如何调用php文件中的函数详解
2020/12/29 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
商务英语专业自荐信
2013/10/14 职场文书
面料业务员岗位职责
2013/12/26 职场文书
推荐信格式范文
2014/05/09 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
博士论文答辩开场白
2015/06/01 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
详解pytorch创建tensor函数
2022/03/22 Python
Hive日期格式转换方法总结
2022/06/25 数据库