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

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


代码如下:

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

赞 (0)

相关推荐

  • Javascript变量作用域详解

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

  • js变量作用域及可访问性的探讨

    每一种语言都有变量的概念,变量是用来存储信息的一个元素.比如下面这个函数: 复制代码 代码如下: function Student(name,age,from)  {   this.name = name;    this.age = age;   this.from = from;    this.ToString = function()   {    return "my information is name: "+this.name+",age : "+t

  • VBScript中变量作用域

    下午在写程序的时候,碰到个变量重定义的问题,具体是在一个函数中的两个地方定义了相同的变量,两个变量分别放在IF语句的两部分中,本来以为这两次定义在语句中不同的块,应该没有影响,然而在运行中IIS却提示变量重定义,把重复定义去掉即正确. 解决了问题之后突然想到在Fdream的blog看过一篇文章<JavaScript变量无块级作用域>,似乎这两个是差不多的,在VBScript中变量同样没有块级作用域. 再次去看了那篇文章之后我也做了下试验,得到结果:在VBScript中,函数中定义的变量的作用域

  • 理解JavaScript变量作用域更轻松

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

  • 关于javascript 回调函数中变量作用域的讨论

    1.背景 Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数, 实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数. 在使用DWR的时候,回调函数可以作为第一个或者最后一个参数出现,如: JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR的推荐方式 //或者 myDwrSer

  • javascript中的变量作用域以及变量提升详细介绍

    变量作用域"一个变量的作用域表示这个变量存在的上下文.它指定了你可以访问哪些变量以及你是否有权限访问某个变量." 变量作用域分为局部作用域和全局作用域. 局部变量(处于函数级别的作用域)不像其他对面对象的编程语言(比方说C++,Java等等),javascript没有块级作用域(被花括号包围的):当是,javascript有拥有函数级别的作用域,也就是说,在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问(闭包除外,这个我们过几天再写个专题). 函数级别作用域的一个例子

  • 有关js的变量作用域和this指针的讨论

    一.变量作用域:[P71] 这一句话说的非常精辟:"在ECMAScript中,只有两种执行环境,全局环境和函数环境,每个函数都是一个执行环境,包括嵌套函数.换句话说,其他情况下即使变量声明在一对大括号中,在括号外部仍然可以访问这些变量".以下给出例子: 复制代码 代码如下: for(var i=0; i<5; i++) { var num = 20; // 在for语句中声明的变量 } alert(num); // 在for语句外部调用变量,仍然可以得到num的值 对异常语句也同

  • JavaScript的变量作用域深入理解

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

  • ECMAscript 变量作用域总结概括

    ECMAscript 变量作用域总结概括

    使用var操作符声明的变量与未使用var操作符声明的变量区别 Javascript是遵循ECMAScript标准下的一个产物,自然ECMAScript的标准其要遵循 ECMAScript的变量是松散类型的,即可以用来保存任何类型的数据(未经初始化的变量,会保存一个特殊值undefined). 未使用var操作符声明 function test() { message='hi'; console.log(message); } console.log(message); 未使用var操作符声明的变

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

    一.迷思!由一段代码引发的疑惑 请看如下代码: 复制代码 代码如下: 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声

  • JavaScript中提前声明变量或函数例子

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

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

  • 深入理解JavaScript中的块级作用域、私有变量与模块模式

    本文详细的介绍了JavaScript中的块级作用域.私有变量与模块模式,废话就不多说了,具体如下: 1.块级作用域(私有作用域),经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数. (function(count){ for(var i=0;i<count;i++){ console.log(i);//=>0.1.2.3.4 } console.log(i);//=>5 })(5); (function(){ var now=new Date(); if(no

  • 详解js中let与var声明变量的区别

    ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增

  • JavaScript中var、let、const区别浅析

    下面通过代码给大家介绍JavaScript中var.let.const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined //2.let是块级作用域,函数内部使用let定义后,对函数外部无影响. let c = 3; console.log(c) function change(){ let c = 6; console.log(c) } change(); (1)只要

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • JavaScript中var与let的区别

    目录 1.作用域表现形式不同 2.是否变量提升的区别 3.暂时性死区上的区别 4.在同一个上下文中var可以重复声明,let不行 前言: var是JavaScript刚出现时就存在的变量声明关键字,而let作为ES6才出现的变量声明关键字,无疑两者之间存在着很大的区别.那么具体有哪些区别呢? 1.作用域表现形式不同 var是函数作用域,let是块级作用域 { var monkey='熏悟空'; let pig='猪扒盖'; } console.log(monkey); //输出undefined

  • JavaScript中var let const的用法有哪些区别

    目录 1.重复声明 1.1 var 1.2 let 1.3 const 2.变量提升 2.1 var 2.2 let 2.3 const 3.暂时性死区 3.1 var 3.2 let 3.3 conset 4. window对象的属性和方法 5.块级作用域 1.重复声明 var支持重复声明,let.const不支持重复声明. 1.1 var var a = 1; var a = 2; console.log(a); 输出结果: 2 1.2 let let b = 3; let b = 4; c

  • javascript中var的重要性分析

    本文实例分析了javascript中var的重要性.分享给大家供大家参考.具体分析如下: javascript 的 var 作用是声明变量. 一般情况下不写都不会出错,但有些情况如果不写,会有不同的结果.先看下面的示例: <div id="a"></div> <script type="text/javascript"> a = 1; alert(a); </script> 上面这个例子在FF Chrome执行不会有问

  • JavaScript中var的重要性实例分析

    JavaScript中var的重要性实例分析

    本文实例讲述了JavaScript中var的重要性.分享给大家供大家参考,具体如下: 在JS中申明变量是使用var来进行申明,但是有的时候我们没有使用var也可以.这是为什么呢?我来给大家细细的说来. var的本质 var的本质就是来申明变量的 <script> var str = 'China';//申明并进行赋值 </script> 变量的作用范围 先以一个例子来说明引出问题,在这个例子中,在函数t中没有使用var关键字来申明变量,系统认为只是进行赋值操作而已,而且这个赋值操作

随机推荐