浅析JavaScript中的变量提升


Posted in Javascript onJune 01, 2022

前言:

JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声明被提升了代码的顶部一样。

sayHi() // Hi there!

function sayHi() {
    console.log('Hi there!')
}
name = 'John Doe'
console.log(name)   // John Doe
var name

然而JavaScript并不会移动你的代码,所以JavaScript中“变量提升”并不是真正意义上的“提升”。

JavaScript是单线程语言,所以执行肯定是按顺序执行。但是并不是逐行的分析和执行,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。

在编译阶段阶段,代码真正执行前的几毫秒,会检测到所有的变量和函数声明,所有这些函数和变量声明都被添加到名为Lexical Environment的JavaScript数据结构内的内存中。所以这些变量和函数能在它们真正被声明之前使用。

函数提升

sayHi() // Hi there!

function sayHi() {
    console.log('Hi there!')
}

因为函数声明在编译阶段会被添加到词法环境(Lexical Environment)中,当JavaScript引擎遇到sayHi()函数时,它会从词法环境中找到这个函数并执行它。

lexicalEnvironment = {
  sayHi: < func >
}

var变量提升

console.log(name)   // 'undefined'
var name = 'John Doe'
console.log(name)   // John Doe

上面的代码实际上分为两个部分:

  • var name表示声明变量name
  • = 'John Doe'表示的是为变量name赋值为'John Doe'。
var name    // 声明变量
name = 'John Doe' // 赋值操作

只有声明操作var name会被提升,而赋值这个操作并不会被提升,但是为什么变量name的值会是undefined呢?

原因是当JavaScript在编译阶段会找到var关键字声明的变量会添加到词法环境中,并初始化一个值undefined,在之后执行代码到赋值语句时,会把值赋值到这个变量。

// 编译阶段
lexicalEnvironment = {
  name: undefined
}
// 执行阶段
lexicalEnvironment = {
  name: 'John Doe'
}

所以函数表达式也不会被“提升”。helloWorld是一个默认值是undefined的变量,而不是一个function

helloWorld();  // TypeError: helloWorld is not a function
var helloWorld = function(){
  console.log('Hello World!');
}

let & const提升

console.log(a)  // ReferenceError: a is not defined
let a = 3

为什么会报一个ReferenceError错误,难道letconst声明的变量没有被“提升”吗?

事实上所有的声明(function, var, let, const, class)都会被“提升”。但是只有使用var关键字声明的变量才会被初始化undefined值,而letconst声明的变量则不会被初始化值。

只有在执行阶段JavaScript引擎在遇到他们的词法绑定(赋值)时,他们才会被初始化。这意味着在JavaScript引擎在声明变量之前,无法访问该变量。这就是我们所说的Temporal Dead Zone,即变量创建和初始化之间的时间跨度,它们无法访问。

如果JavaScript引擎在letconst变量被声明的地方还找不到值的话,就会被赋值为undefined或者返回一个错误(const的情况下)。

举例:

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

在编译阶段,JavaScript引擎遇到变量a并将它存到词法环境中,但因为使用let关键字声明的,JavaScript引擎并不会为它初始化值,所以在编译阶段,此刻的词法环境像这样:

lexicalEnvironment = {
  a: <uninitialized>
}

如果我们要在变量声明之前使用变量,JavaScript引擎会从词法环境中获取变量的值,但是变量此时还是uninitialized状态,所以会返回一个错误ReferenceError

在执行阶段,当JavaScript引擎执行到变量被声明的时候,如果声明了变量并赋值,会更新词法环境中的值,如果只是声明了变量没有被赋值,那么JavaScript引擎会给变量赋值为undefined

tips: 我们可以在letconst声明之前使用他们,只要代码不是在变量声明之前执行:

function foo() {
    console.log(name)
}
let name = 'John Doe'
foo()   // 'John Doe'

Class提升

letconst一样,class在JavaScript中也是会被“提升”的,在被真正赋值之前都不会被初始化值, 同样受Temporal Dead Zone的影响。

let peter = new Person('Peter', 25) // ReferenceError: Person is not defined
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let John = new Person('John', 25); 
console.log(John) // Person { name: 'John', age: 25 }

到此这篇关于浅析JavaScript中的变量提升的文章就介绍到这了,更多相关JS变量提升内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Javascript 相关文章推荐
javascript异步编程的4种方法
Feb 19 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
让JavaScript代码更加精简的方法技巧
Jun 01 #Javascript
cypress测试本地web应用
Jun 01 #Javascript
vue实现登陆页面开发实践
May 30 #Vue.js
Echarts如何重新渲染实例详解
May 30 #Javascript
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
You might like
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python生成随机mac地址的方法
2015/03/16 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
如何卸载python插件
2020/07/08 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
C语言编程题
2015/03/09 面试题
作弊检讨书1000字
2014/02/01 职场文书
委托书模板
2014/04/04 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript