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

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

复制代码 代码如下:

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中应该都写了吧。但是啃英文文档。。。还是算了。。自己推断了。哈哈莫见笑莫见笑

时间: 2024-08-01 16:54:13

关于JavaScript中var声明变量作用域的推断_javascript技巧的相关文章

JavaScript中提前声明变量或函数例子_javascript技巧

如题所示,看下面的示例. (可以使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发者工具,进入控制台console输入) (使用技巧: 控制台输入时Shift+Enter可以中途代码换行) 复制代码 代码如下: var name = "xiaoming"; (function(){   var name = name || "小张";   console.info(name); })();// 小张 (function(){   name = name

javascript中var声明变量用法介绍

var 语句声明变量. var variable1 [ = value1 ] [, variable2 [ = value2], ...] 参数 variable, variable2 被声明的变量的名字. value, value2 赋给变量的初始化值. 说明 使用 var 语句来声明变量.这些变量可以在声明时或声明后在脚本中被赋值 一个关于var变量的问题 一个朋友问了一个js问题, 一段看不出有任何问题的代码, 在ie下报错:"object doesn't support this pro

Javascript变量作用域详解_javascript技巧

变量的作用域指的是变量的可见性,而生命周期则(存活期)则是从另一个角度考察变量. JS中变量的作用域分为全局变量和局部变量,函数内定义的称为局部变量,函数外的称为全局变量.("函数外的称为全局变量"是相对的,另此处讨论的前提是用var显式声明的变量,函数内不用var定义的变量默认是全局变量,当然忽略var声明变量是不赞成的). 复制代码 代码如下: var glob = 4;//函数外声明全局变量 function fun() {     var height = 20; //函数内用

理解JavaScript变量作用域更轻松_javascript技巧

JavaScript本身作为一门简单的语言,就其变量作用域问题一样令不少人头晕,这主要是因为JavaScript闭包的存在.本文不打算深入讲解JavaScript变量作用域问题(其实本人也没有能力能把这一话题讲的深入些),也不讲"闭包"话题,本文只讨论最实用的JavaScript作用域知识点. 一.JavaScript作用域分类 JavaScript就两种作用域:全局(window).函数级(function).函数级(function)不要理解为"块级(大括号{}级)&qu

JavaScript的变量作用域深入理解_javascript技巧

在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数中都有定义. 1.JavaScript的作用域链 首先看下下面这段代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> var rain = 1; function rain

javascript 变量作用域 代码分析_javascript技巧

代码清单1-1 展示javascript的变量作用域的例子 //设置全局变量foo,并置为"test" var foo = "test"; //在if块中 if(true){ //将foo置为'new test' var foo = "new test"; } //如我们所见,现在foo等于'new test'了 alert(foo == "new test"); //创建一个会修改变量foo的新函数 function tes

js 声明数组和向数组中添加对象变量的简单实例_javascript技巧

数组有四种定义的方式 使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", "second", "third"); 或者数组直接量: var d = ["first", "second", "third"]; 扩展: function ObjStory(id,biaoti,author

浅谈Javascript中的函数、this以及原型_javascript技巧

关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

javascript 嵌套的函数(作用域链)_javascript技巧

嵌套的函数(作用域链) 当你进行函数的嵌套时,要注意实际上作用域链是发生变化的,这点可能看起来不太直观.你可把下面的代码置入firebug监视值的变化. 复制代码 代码如下: var testvar = 'window属性'; var o1 = {testvar:'1', fun:function(){alert('o1: '+this.testvar+'<<');}}; var o2 = {testvar:'2', fun:function(){alert('o2: '+this.testv