浅析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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
JScript的条件编译
2007/05/29 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
python 调用有道api接口的方法
2019/01/03 Python
ipython和python区别详解
2019/06/26 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
保安岗位职责
2014/02/21 职场文书
取保候审保证书
2014/04/30 职场文书
家庭教育的心得体会
2014/09/01 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
店铺转让协议书
2014/12/02 职场文书
肖申克救赎观后感
2015/06/02 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python