JavaScript变量存储浅析(一)

Hello!

  上一篇关于JS中函数传参(http://www.cnblogs.com/souvenir/p/4969092.html)的介绍中提到了JS的另外一个基本概念:JS变量存储,

  今天我们就用一个简单的JS DEMO来开始介绍这个概念。

1 var a = 100;
2
3 function func(){
4     console.log(a);
5     var a=200;
6     console.log(a);
7 }
8
9 func();

  相信大家心里面已经有了各自的答案。

  ....

  来看下实际的运行结果:

  

  纳尼!怎么会酱紫?我们明明定义了一个全局变量a,按照JS作用域链的理论,func应该可以访问到全部变量a的啊?

  是的,按照作用域链的思想,func函数在运行时,在其局部变量内找不到a变量的话,理应向上在全部作用局中继续查找。

  问题就出在函数内部的 var a =200; 这句局部变量定义。

  我们都知道JS变量类型是松散型,松散型的意思并不是说JS变量就没有变量类型,而是其变量类型是在运行时才进行确定。

  来看一个DEMO:

1 var str;
2
3 str=2015;

  第一行我们定义了一个变量str,但是并未赋值,这时候JS并不知道str变量的类型,等到脚本运行到第3行,我们给str变量赋了一个值:2015.

  这时候JS才知道,哦,原来str的值是2015,这不就是Number类型吗,这才确定了str的类型。

  

  这让我想起了JS的另一个概念,叫作函数声明提升!

  把最开始的DEMO改造下:

 1 var a = 100;
 2
 3 func();
 4
 5 function func(){
 6     console.log(a);
 7     var a=200;
 8     console.log(a);
 9 }
10  

  将函数的声明放在了最后,但是代码仍然可以正常运行,并不会出现func未定义的错误。

  函数声明提升就说明JS在运行之前还会经历另外一个过程:预加载。(有些地方也叫作预编译)

  在预加载阶段,JS主要对全局作用域、函数的运行环境以及作用域链等进行准备,

  这里的函数运行环境就是指:读取变量定义并确定其属于哪个作用域,但不会为其赋值!

  

  到这里我们终于要开始解释文章一开始提出的问题了(可憋死宝宝了(づ??????)づ):

  我们就来分解一下预加载阶段,JS都做了什么事情:

1 var a = 100;    //定义一个全部变量
2
3 func();
4
5 function func(){
6     console.log(a);
7     var a=200;        //定义一个func局部变量
8     console.log(a);
9 }

  在预加载阶段,第一行的时候定义了一个全部变量a,然后到了第7行,又给func定义了一个局部变量a,

  注意这个时候变量并未赋值,值均为undefined

  到了运行阶段:

  第一行给全部变量a赋了值:100,等到执行func函数的时候,

  在第6行,需要使用a变量,JS当然是先查找func的局部变量了,没错,预加载阶段已经为func定义了一个局部变量a,

  所以JS当然不会继续往全局进行查找了,但是使用的时候才发现居然没有值,也就是undefined!

  等到第7行JS才给局部变量a赋值。

  小结:

    JS分为预加载和执行期两个阶段,前者只会确定变量的作用域,在执行期才会对齐进行赋值,同时也就确定了变量的具体类型。

  

  

  

  

  

  

  

时间: 2024-10-05 04:58:27

JavaScript变量存储浅析(一)的相关文章

javascript变量存储

var i = 1; 开辟一个空间名为i,并且存储值为1. var li = document.getElementsByTagName('li'); for(var i = 0; i < li.length; i++){ li[i].addEventListener('click',function(e){ alert(i); } } 点击li时,alert出的相同的结果,i的值都为li.length的值. 给每个li注册点击事件,并绑定回调函数function(e)(alert( i).在点

由浅入深JavaScript——变量和原始类型

JavaScript变量 JavaScript变量标识符标识符 var + 变量名称来定义变量.变量名称以字母,下划线_,美元$符号开头,余下字符可以是字母,数字,下划线,美元符号.eg: var  name = 'hello';     var  a1 = 'hello';    var  _test = 'hello';    var  $test = 'hello';    以上变量名称均为正确.    var  1a = 'hello'; //数字开头错误.    JavaScript允

JavaScript运行机制浅析

从一个简单的问题谈起: <script type="text/javascript"> alert(i); var i = 1; </script> 输出结果是undefined, 这种现象被称成“预解析”:JavaScript引擎会优先解析var变量和function定义.在预解析完成后,才会执行代码.如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件). 运行顺序是: step1. 读入第一个代码段step2. 做语

2015第35周五JavaScript变量

java语言里有一句很经典的话:在java的世界里,一切皆是对象. Javascript虽然跟java没有半点毛关系,但是很多会使用javascript的朋友同样认为:在javascript的世界里,一切也皆是对象. 其实javascript语言和java语言一样变量是分为两种类型:基本数据类型和引用类型. 基本类型是指:Undefined.Null.Boolean.Number和String:而引用类型是指多个指构成的对象,所以javascript的对象指的是引用类型.在java里能说一切是对

第一百零六节,JavaScript变量作用域及内存

JavaScript变量作用域及内存 学习要点: 1.变量及作用域 2.内存问题 JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 一.变量及作用域 1.基本类型和引用类型的值 ECMAScript变量可能包含两种不同的数据类型的值:基本类型值和引用类型值.基本类型值指的是那些保存在栈

JavaScript 变量、作用域和内存问题

按照ECMA-262第三版的定义,JavaScript的变量与其他语言的变量有很大区别.JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型的规则,变量的值及其数据类型可以在脚本的生命周期内改变.尽管从某种角度看,这可能是一个既有趣又强大,同时又容易出问题的特性,但JavaScript变量实际的复杂程度还远不止如此. 1,基本类型和引用类型的值 ECMAScript变量可能包含两种不同类型的值:基本类型值和引用类

JavaScript 变量

1.变量是用来存储数据值的容器 变量名必须以字母开头 变量名也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <m

JavaScript变量作用域(Variable Scope)和闭包(closure)的基础知识

在这篇文章中,我会试图讲解JavaScript变量的作用域和声明提升,以及许多隐隐藏的陷阱.为了确保我们不会碰到不可预见的问题,我们必须真正理解这些概念. 基本定义 作用范围是个“木桶”,里面装着变量.变量可以是局部或者全局性的,但在子范围中定义的变量是可以访问父范围的,这一点可能会造成一些困扰. 在JavaScript中使用"var"关键字声明变量.一旦在父范围宣声明,就会作为各自子范围的一部分.即在本地范围内有效,但本地定义的变量不可在全局范围内访问. 让我们来看一个例子.执行下面

HTML 学习笔记 JavaScript (变量)

变量是储存信息的容器. 实例 var x=2; var y=3; var z=x+y; 就像代数那样 x=2 y=3 z=x+y 在代数中,我们使用字母(比如 x)来保存值(比如 2).通过上面的表达式 z=x+y,我们能够计算出 z 的值为 5.在 JavaScript 中,这些字母被称为变量.提示:您可以把变量看做存储数据的容器. JavaScript 变量 与代数一样,JavaScript变量可用于存放值(比如x=2)和表达式(z=x+y). 变量可以使用短名称(x和y) 也可以使用描述性