关于JavaScript中var声明变量作用域的推断


Posted in Javascript onDecember 16, 2010

一、迷思!由一段代码引发的疑惑
请看如下代码:

for(var i=0;i<3;i++) { 
console.log(j+","+k); 
for(var j=0;j<3;j++) { 
var k = j+1; 
} 
} 
console.log(i);

输出结果:
undefined,undefined
3,3
3,3
3
如果你是搞c、java等语言的,可能你会不解,为何j、k这种局部变量可以被作用域外的代码访问呢?
如果JavaScript中用var声明的变量可视为局部变量,那么能访问到这个变量的作用域就是这个变量的局部作用域。如上例,在console.log行处,依然有j、k的作用域,而循环外,依然有i的作用域。说到这里,也许我可以武断的说,JavaScript没有真正意义的局部作用域。真的吗?非也!

二、如何获得真正的局部作用域呢?一个写法引起了我的注意
大家也许看过JQuery的源码或者Ext的源码,也许会对下面的写法有点熟悉。

var a = 3,b=4; 
var exports = (function() { 
var a = 1,b=2; 
return {a:a,b:b}; 
})(); 
console.log(""+a+","+b); 
console.log(exports.a+","+exports.b);

输出结果:
3,4
1,2
很神奇的发现(其实也不神奇,大家都知道啦)函数内部是有独立作用域的,即函数内部var声明的变量,仅在函数内部可以使用。所以各框架各大师都这么写,防止自身局部变量与外界变量(外层局部变量与全局变量)冲突。
至此,我收回第一条里的武断推断,修改一下:
JavaScript以函数为界,每个函数内部拥有一个局部作用域;任何其他的块(包括普通代码块,for循环、if、while等代码块)不存在局部作用域,使用var声明的变量可以直接穿过这些代码块,可以被外部代码访问到。

三、何时报错,何时undefined?var的声明机制
看代码:

console.log(a)

输出结果:
ReferenceError: a is not defined
输出结果:
undefined
var exports = (function() { 
var a = 1,b=2; 
return {a:a,b:b}; 
})(); 
console.log(a);

输出结果:
ReferenceError: a is not defined
猜想结论:
每次JavaScript引擎执行代码时,会先扫描作用域中的所有代码(作用域中的function内部的代码不会扫描),并将所有var声明的变量记录下来,在代码执行到赋值之前,这些变量的值为undefined。此后如果访问变量时,先访问局部变量,如果没有这个局部变量就访问上一层的局部变量(如为闭包,上一层为闭包创建环境),直到访问到完全局变量。如果都没有这个变量,那么抛出异常。

四、题外话:闭包+异步,变量值错乱!如何确保异步情况下局部变量当前值的传递?
还是代码说话:

for(var i=0;i<3;i++) { 
setTimeout(function() { 
console.log(i); 
},1); 
}

输出结果:
3
3
3
为何?因为在闭包异步执行的时候,i始终访问的是外层作用域的i,由于异步了,所以在执行闭包的时候循环已经结束了,i已经为3了,故每一次打印出来的都是3。
那如何解决这个问题呢?我们需要把i转换成局部变量。
嗯,有人会有这种写法:
for(var i=0;i<3;i++) { 
var j = i; 
setTimeout(function() { 
console.log(j); 
},1); 
}

输出结果:
2
2
2
为何?
其实之前已经解释过了,其实j和i的作用域是一样的。都是外层局部变量,在异步情况下循环执行完成的时候j为2(比i少一次i++);
那该怎么办呢?(请想象某广告,(⊙v⊙))。
大家知道,函数中的参数也算函数的局部变量。那么这里有一个办法,可以将局部变量转换为函数的实参,这样就达到值传递的效果了。
for(var i=0;i<3;i++) { 
setTimeout(( 
function(j){ 
return function() { 
console.log(j); 
} 
})(i) 
,1); 
}

输出
0
1
2
其实说了这么多,代码写出来大家就差不多明白了吧,用这种匿名函数的方式去除了异步情况下变量变化的问题,不过此为本贴的题外话了。

总结:
额。不写了,我懒,哪天抽空补上。嘿嘿。
其实这些结论RFC中应该都写了吧。但是啃英文文档。。。还是算了。。自己推断了。哈哈莫见笑莫见笑

Javascript 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
jquery中动态效果小结
Dec 16 #Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 #Javascript
Javascript学习笔记二 之 变量
Dec 15 #Javascript
Javascript学习笔记一 之 数据类型
Dec 15 #Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 #Javascript
jQuery Ajax使用 全解析
Dec 15 #Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 #Javascript
You might like
php的curl实现get和post的代码
2008/08/23 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
python的concat等多种用法详解
2018/11/28 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
社区敬老月活动实施方案
2014/02/17 职场文书
闭幕式主持词
2014/04/02 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
会议室管理制度范本
2015/08/06 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python
我收到了德劲DE1107
2022/04/05 无线电