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 相关文章推荐
js几个验证函数代码
Mar 25 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
JavaScript中的几种继承方法示例
Dec 06 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加速 eAccelerator配置和使用指南
2009/06/05 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python类属性与实例属性用法分析
2015/05/09 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
自我评价个人范文
2013/12/16 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
租房协议书怎么写
2014/04/10 职场文书
2014年新生军训方案
2014/05/01 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
七一慰问简报
2015/07/20 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
导游词之崇武古城
2019/10/07 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
我的收音机情缘
2022/04/05 无线电