浅析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 作用域使用说明
Aug 13 Javascript
JS编程小常识很有用
Nov 26 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
javascript制作2048游戏
Mar 30 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 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中文件缓存转内存缓存的方法
2011/12/06 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
Python实现购物车功能的方法分析
2017/11/10 Python
python实现朴素贝叶斯算法
2018/11/19 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
python中random模块详解
2021/03/01 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
启动仪式策划方案
2014/06/14 职场文书
公司车队管理制度
2015/08/04 职场文书
《青山不老》教学反思
2016/02/22 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python