JS温故而知新之变量提升和时间死区


Posted in Javascript onJanuary 27, 2019

前言

开始执行脚本时,执行脚本的第一步是编译代码,然后再开始执行代码,如图

JS温故而知新之变量提升和时间死区

另外,在编译优化方面来说,最开始时也并不是全部编译好脚本,而是当函数执行时,才会先编译,再执行脚本,如图

JS温故而知新之变量提升和时间死区

  • 编译阶段:经历了词法分析,语法分析生成AST,以及代码生成。并且在此阶段,它只会扫描并且抽出环境中的声明变量,声明函数以便准备分配内存,所有的函数声明和变量声明都会被添加到名为Lexical Environment的JavaScript内部数据结构内的内存中。因此,它们可以在源代码中实际声明之前使用。但是,Javascript只会存储函数声明和变量声明在内存,并不会存储他们的值
  • 执行阶段:给变量x赋值,首先询问内存你这有变量x吗,如果有,则给变量x赋值,如果没有则创建变量x并且给它赋值。

变量提升

如下图,左边灰色块区域,是演示函数执行前的编译阶段,先抽出所有声明变量和声明函数,并进行内存分配。然后再开始执行代码,在执行第一行代码的时候,若是变量a存在于内存中,则直接给变量a赋值。而执行到第二行时,变量b并没有在内存中,则会创建变量b并给它赋值。

JS温故而知新之变量提升和时间死区

Lexical enviroment是一种包含标识符变量映射的数据结构

LexicalEnviroment = {
 Identifier: <value>,
 Indentifier: <function object>
}

简而言之,Lexical enviroment就是程序执行过程中变量和函数存在的地方。

let,const变量

console.log(a)
let a = 3;

输出

ReferenceError: a is not defined

所以let和const变量并不会被提升吗?

这个答案会比较复杂。所有的声明(function, var, let, const and class)在JavaScript中都会被提升,然而var声明被undefined值初始化,但是let和const声明的值仍然未被初始化。

它们仅仅只在Javascript引擎运行期间它们的词法绑定被执行在才会被初始化。这意味着引擎在源代码中声明它的位置计算其值之前,你无法访问该变量。这就是我们所说的时间死区,即变量创建和初始化之间的时间,我们无法访问该变量。

如果JavaScript引擎仍然无法在声明它们的行中找到let或者const的值,它将为它们分配undefined值或返回错误值(在const的情况下会返回错误值)。

JS温故而知新之变量提升和时间死区

6a9a50532bf60f5fac6b3c.png](evernotecid://F2BCA3B5-CC5A-4EB3-BD61-DD865800F342/appyinxiangcom/10369121/ENResource/p1163)

let a;
console.log(a); // outputs undefined
a = 5;

在编译阶段,JavaScript引擎遇到变量a并将它存储在lexical enviroment,但是因为它是一个let变量,所以引擎不会为它初始化任何值。所以,在编译阶段,lexical enviroment看起来像下面这样。

// 编译阶段
lexicalEnvironment = {
 a: <uninitialized>
}

现在如果我们尝试在声明它之前访问该变量,JavaScript引擎将会尝试从词法环境中拿到这个变量的值,因为这个变量未被初始化,它将抛出一个引用错误。

在执行期间,当引擎到达了变量声明的行,它将试图执行它的绑定,因为该变量没有与之关联的值,因此它将为其赋值为unedfined

// 执行阶段
lexicalEnviroment = {
 a: undefined
}

之后,undefined将会被打印到控制台,然后将值5赋值给变量a,lexical enviroment中变量a的值也会从undefined更新为5

functionn foo() {
console.log(a)
}

let a = 20;

foo();
function foo() {
console.log(a): // ReferenceError: a is not defined
}
foo();
let a = 20;

JS温故而知新之变量提升和时间死区

Class Declaration

就像let和const声明一样,class在JavaScript中也会被提升,并且和let,const一样,知道执行之前,它们都会保持uninitialized。因此它们同样会受到Temporal Deal Zone(时间死区)的影响。例如

let peter = new Person('Peter', 25); // ReferenceError: Person is not defined

console.log(peter);

class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

因此要访问class,必须先声明它

class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

let peter = new Person('Peter', 25); 
console.log(peter);
// Person { name: 'Peter', age: 25 }

所以在编译阶段,上面代码的lexical environment(词法环境)将如下所示:

lexicalEnvironment = {
 Person: <uninitialized>
}

当引擎执行class声明时,它将使用值初始化类。

lexicalEnvironment = {
 Person: <Person object>
}

提升Class Expressions

let peter = new Person('Peter', 25);
console.log(peter);
let Person = class {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

JS温故而知新之变量提升和时间死区

let peter = new Person('Peter', 25); 
console.log(peter);
var Person = class {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

JS温故而知新之变量提升和时间死区

所以现在我们知道在提升过程中我们的代码并没有被JavaScript引擎实际移动。正确理解提升机制将有助于避免因变量提升而产生的任何未来错误和混乱。为了避免像未定义的变量或引用错误一样可能产生的副作用,请始终尝试将变量声明在各自作用域的顶部,并始终尝试在声明变量时初始化变量。

Hoisting in Modern JavaScript — let, const, and var

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 #Javascript
命令行批量截图Node脚本示例代码
Jan 25 #Javascript
Node.js 进程平滑离场剖析小结
Jan 24 #Javascript
Vue.js样式动态绑定实现小结
Jan 24 #Javascript
实例讲解JavaScript预编译流程
Jan 24 #Javascript
实例讲解vue源码架构
Jan 24 #Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python单例模式实例详解
2017/03/01 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
大一学生假期实习的自我评价
2013/10/12 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
规划编制实施方案
2014/03/15 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
大一新生检讨书
2014/10/29 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
八月一日观后感
2015/06/10 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Python实现智慧校园自动评教全新版
2021/06/18 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android