Hello!

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

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

 var a = 100;

 function func(){
console.log(a);
var a=200;
console.log(a);
} func();

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

  ....

  来看下实际的运行结果:

  

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

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

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

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

  来看一个DEMO:

 var str;

 str=2015;

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

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

  

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

  把最开始的DEMO改造下:

 var a = 100;

 func();

 function func(){
console.log(a);
var a=200;
console.log(a);
}

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

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

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

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

  

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

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

 var a = 100;    //定义一个全部变量

 func();

 function func(){
console.log(a);
var a=200; //定义一个func局部变量
console.log(a);
}

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

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

  到了运行阶段:

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

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

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

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

  小结:

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

  

  

  

  下一篇(http://www.cnblogs.com/souvenir/p/4969565.html)我们将继续介绍JS中变量的存储原理,只不过这次我们重点要看的是对象!

  

  

  

  

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

  1. JavaScript变量存储浅析(二)

    Hello,上一篇(http://www.cnblogs.com/souvenir/p/4969399.html)我们简单的分享了JS中的变量存储原理,但是并未结束,我们漏掉了什么. 对了,就是关于对 ...

  2. JavaScript变量存储浅析

    var test=100; function foo(){ console.log(test);//undefined var test=200; console.log(test); } 我们明明定 ...

  3. javascript变量浅析

    变量声明 javascript 使用var + 变量名 声明变量,因为javascript是弱类型语言, 所有我们可以随意更改已有变量的类型. var b=1; b='2', 另外不同于c#中的var ...

  4. javascript变量的作用域

    javascript变量的作用域 基本类型和引用类型 基本类型值指的是简单的数据段,而引用类型值指的是那个可能由多个值组成的对象  讲一个值赋值给变量时,javascript解析器首先要确定是基本类型 ...

  5. JavaScript 变量

    一,JavaScript 变量(存储信息的容器) 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描 ...

  6. 六天玩转javascript:javascript变量与表达式(1)

    说明 本系列属于进阶系列,语常用语法等不在本系列介绍范围之内. 在我刚开始做一个程序员并开发项目的时候,我总是喜欢使用开发语言的各种特性,每次m$发布新版C#的时候我总是会把开发者预览版下好,亲自体验 ...

  7. 深入浅出 JavaScript 变量、作用域和内存 v 0.5

    本文主要从原理入手分享变量和作用域的相关知识,最后结合本文所分享知识,再次深入了解下闭包的运行原理. 主要参考<JS高级程序设计> <JS权威指南> <高性能 JS> ...

  8. JavaScript运行机制浅析

    从一个简单的问题谈起: <script type="text/javascript"> alert(i); var i = 1; </script> 输出结 ...

  9. 2015第35周五JavaScript变量

    java语言里有一句很经典的话:在java的世界里,一切皆是对象. Javascript虽然跟java没有半点毛关系,但是很多会使用javascript的朋友同样认为:在javascript的世界里, ...

随机推荐

  1. i系列标准-互联网周刊

    原文:http://www.enet.com.cn/article/2019/0429/A20190429062899.html 传统意义上的规模.现代意义上的工具时代感.永远不会改变的最高意义上的使 ...

  2. linux下如何使用adb连接在qemu中运行的安卓系统?

    1. 运行安卓系统, 如下: $sudo qemu-system-x86_64 -m 4096 -boot d -enable-kvm -smp 3 -net nic -net user,hostfw ...

  3. ES6 - 对象扩展(增强字面量)

    /** * 对象的扩展 * * 增强对象字面量 * * 解决问题:缩减代码 */ { /** * 1.属性简表示法 * 变量foo直接写在大括号里面.这时,属性名就是变量名, 属性值就是变量值 */ ...

  4. vmware新加磁盘fdisk看不到的处理

    虚拟机硬盘空间不够了,做了lvm准备加块硬盘扩容,在vcenter控制台加了磁盘,结果操作系统里面fdisk -l看不到新加的硬盘,又不想重启怎么办,一条命令就可以搞定. # 注意中间有空格echo ...

  5. Anaconda(一)

    一.Anaconda下载安装 Anaconda + Pycharm是知乎大佬们推荐的Python标配, Anaconda有众多版本,截至2019年11月的最新版Anaconda内置的是Python3. ...

  6. shell基础知识7-字段分隔符与迭代器

    什么是内部字段分隔符 内部字段分隔符(Internal Field Separator,IFS)是shell脚本编程中的一个重要概念.在处理 文本数据时,它的作用可不小. 作为分隔符,IFS有其特殊用 ...

  7. 【SQL骚操作】SqlServer数据库表生成C# Model实体类SQL语句

    已知现有表T1 想快速获取cs类结构 /// <summary> /// T1 /// </summary> public class T1 { /// <summary ...

  8. 小技巧——解决Github项目clone慢的问题

    设置github的项目git命令走sock代理 git config --global http.https://github.com.proxy socks5://127.0.0.1:1086(so ...

  9. 最常见的Java面试题及答案汇总(二)

    上一篇:最常见的Java面试题及答案汇总(一) 容器 18. java 容器都有哪些? 常用容器的图录: 19. Collection 和 Collections 有什么区别? java.util.C ...

  10. JS系列:三元运算符与循环

     三元运算符 语法: 条件?成立做的事情:不成立做的事情:<=>相当于简单的if/else判断(简化写法) var num = 12; if(num>10){ num ++; }el ...