浅析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 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
js实现自定义右键菜单
May 18 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
Vue基础配置讲解
2019/11/29 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
python字典多条件排序方法实例
2014/06/30 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python random模块用法解析及简单示例
2017/12/18 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python交易记录整合交易类详解
2019/07/03 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
服务员自我评价
2014/01/25 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书