JavaScript变量存储浅析(一)
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变量存储浅析(一)的更多相关文章
- JavaScript变量存储浅析(二)
Hello,上一篇(http://www.cnblogs.com/souvenir/p/4969399.html)我们简单的分享了JS中的变量存储原理,但是并未结束,我们漏掉了什么. 对了,就是关于对 ...
- JavaScript变量存储浅析
var test=100; function foo(){ console.log(test);//undefined var test=200; console.log(test); } 我们明明定 ...
- javascript变量浅析
变量声明 javascript 使用var + 变量名 声明变量,因为javascript是弱类型语言, 所有我们可以随意更改已有变量的类型. var b=1; b='2', 另外不同于c#中的var ...
- javascript变量的作用域
javascript变量的作用域 基本类型和引用类型 基本类型值指的是简单的数据段,而引用类型值指的是那个可能由多个值组成的对象 讲一个值赋值给变量时,javascript解析器首先要确定是基本类型 ...
- JavaScript 变量
一,JavaScript 变量(存储信息的容器) 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描 ...
- 六天玩转javascript:javascript变量与表达式(1)
说明 本系列属于进阶系列,语常用语法等不在本系列介绍范围之内. 在我刚开始做一个程序员并开发项目的时候,我总是喜欢使用开发语言的各种特性,每次m$发布新版C#的时候我总是会把开发者预览版下好,亲自体验 ...
- 深入浅出 JavaScript 变量、作用域和内存 v 0.5
本文主要从原理入手分享变量和作用域的相关知识,最后结合本文所分享知识,再次深入了解下闭包的运行原理. 主要参考<JS高级程序设计> <JS权威指南> <高性能 JS> ...
- JavaScript运行机制浅析
从一个简单的问题谈起: <script type="text/javascript"> alert(i); var i = 1; </script> 输出结 ...
- 2015第35周五JavaScript变量
java语言里有一句很经典的话:在java的世界里,一切皆是对象. Javascript虽然跟java没有半点毛关系,但是很多会使用javascript的朋友同样认为:在javascript的世界里, ...
随机推荐
- c++优先队列(priority_queue)用法详解
转自csdn的文章,仅作为学习笔记.原文链接:https://blog.csdn.net/weixin_36888577/article/details/79937886 普通的队列是一种先进先出的数 ...
- 防止同一IP多次请求攻击
防止同一IP多次请求攻击 防止入侵者,通过死循环同一时间批量向服务器请求数据,导致服务器内存开销不断膨胀,最后直接瘫痪. 一. 新增一个spring的拦截器 , 拦截所有请求 <mvc:inte ...
- C++ 函数模板print
简述 在知乎看到文章leetcode 的奇怪 println vector 工具,于是手痒自己也写了一个print函数. 因为工作中没有需要写这种代码的情况,所以好久没有写这种代码了,还是挺怀念以前学 ...
- Fragment: 使用newInstance()来实例化fragment(转)
先说结论: 1. 当需要给Fragment传值时,使用newInstance()方式来实例化一个Fragment,能够更好的将该Fragment使用的参数捆绑起来,不必每次实例化时都写下面的代码: B ...
- Navicat连接MySQL8.0出现1251-Client does not support authentication protocol requested by server;
因为安装的MySQL是8.0版本的,因为在安装的时候采用了新的加密方式. 我们需要使用 cmd命令,连接mysql 1. 更改加密方式 mysql> ALTER USER 'root'@'l ...
- 【SpringBoot】SpringBoot配置文件及YAML简介(三)
SpringBoot配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的; application.properties application.yml 配置文件的作用:修改Spr ...
- Docker使用 - 容器
查看容器 命令:docker ps [options] options有: -a:查看所有容器,包含不在运行中的(不带-a参数,是只显示运行中的容器) -q:只显示容器ID -s:多加一列来显示总 ...
- 【翻译】Flink Table Api & SQL — Hive —— 读写 Hive 表
本文翻译自官网:Reading & Writing Hive Tables https://ci.apache.org/projects/flink/flink-docs-release-1 ...
- 一步一步FLASK(一)
简介: 本文是记录本人建立一个flask项目的完整过程. 涉及FLASK的诸多实用技术. 一:基本FLASK pycharm建立FLASK项目即可运行. 代码如下: from flask import ...
- 【软件工具】ImageMagick
如何安装; 如何检查是否安装成功呢: 如何使用: https://imagemagick.org/index.php 参考 1. 官网: 完