update:
2017-10-23 更新了文中一些表达以及添加了JS编译部分的理解。
2018-06-06 这篇文章能更好的理解ES6的let
和const
理解ES6中的暂时死区(TDZ)
先前看到方方老师最新的文章《我用了两个月的时间才理解 let》,以下是对该文章的学习结合自己理解总结的笔记。
由于自己对JavaScript的编译和运行理解的不是非常深,文中对于JavaScript引擎的编译部分的理解可能并不准确,如有问题欢迎提出!
var
let
function
const
声明的过程
首先,需要明白,JavaScript在准备阶段会由JavsScript引擎进行编译的,编译的过程包括进行词法分析(词法作用域)及代码生成。当前面的准备完成后通常会立即执行代码。
对于变量声明来说,一般可以简单的分为三个过程:
- create创建 (编译)
- initialize初始化 (编译)
- assign赋值 (执行代码)
需要注意,初始化当中也可以进行赋值。
var
// 通过fn限定作用域
function fn(){
console.log(x) // 结果为undefined
var x = 1
var y = 2
}
fn()
// 1. 找到fn作用域中所有var声明的变量,create变量(x和y)
// 2. initialize变量x,y为undefined
// 3. 开始执行代码 x = 1 ,将变量 x assign为 1
// 4. y = 2 将变量 y assign为 2
// 可以理解为下面的情况
var x
var y
x = 1
y = 2
基本过程:
1.找到所有var
,「创建」变量
2.「初始化」变量并赋值undefined
3.「执行代码」,根据执行的代码开始为变量「赋值」。
在这个过程中产生了一个像是声明提升到作用域顶部的现象,因此会出现在var x = 1
之前console.log(x)
。
ps:从文章中学习到,声明提升其实并非是一个官方说法。
function
// 假设全局作用域下
fn2 ()
function fn2(){
console.log(2)
}
// 1. 找到当前作用域中所有的function声明的变量,为当前环境create这些变量(声明fn2)。
// 2. 初始化这些变量(fn2)并赋值为 function(){ console.log(2) }
// 3. 执行代码fn2()
基本过程:
- 会先找到所有
function
关键字的函数声明进行「创建」 - 进行「初始化并赋值」的操作
- 「执行」代码
fn2()
,因此产生了函数提升的过程
需要注意的是,这里特指函数声明。
let
function fn3(){
let x = 1
x = 2
}
fn3()
// 1. fn3()作用域中找到所有的let声明的变量并创建它
// 2. 开始执行代码 (与var 不同,这里还没初始化)
// 3. 执行x = 1 ,x 「初始化」为 1(这并不是一次赋值,如果代码是 let x,就将 x 初始化为 undefined)
// 4. 执行 x = 2,为x进行赋值
根据这个区别,let的初始化是在执行代码的过程中,而不是先初始化:
- 找到所有
let
「创建」变量。 - 开始「执行」代码,使变量根据执行的代码「初始化并赋值」,此时如果没有赋值(比如:
let x
)则「初始化」为undefined
。 - 继续执行代码。
由于let
的初始化和赋值操作是在代码执行阶段,所以对let
声明的变量的使用必须在声明后,也就没有出现声明提升的现象。
const
function fn4(){
const x = 1
x = 3 // Uncaught TypeError: Assignment to constant variable.
}
fn4()
// 1. fn4的作用域中找到所有const声明的变量,并创建它(创建x)
// 2. 为变量初始化 (变量x 初始化为3)
// 3. 执行代码x = 3 ,报错
const和let 主要区别在于const声明的变量无法赋值,同时const必须在执行初始化的时候赋值,否则会抛出错误Uncaught SyntaxError: Missing initializer in const declaration
let
与var
区别:
- var 的创建与初始化都提升了
- let 的创建提升了,但是初始化没有提升
- function 的创建、初始化、赋值都被提升了
因此在let
初始化之前使用其声明的变量,就会出现变量没有定义的错误:
function fn5(){
console.log(x) // Uncaught ReferenceError: x is not defined
let x = 1
}
fn5()
小结
对于上面的结论,我们对JavaScript变量声明做一些总结。
创建:在编译阶段通过词法分析,对关键字(var
,let
,const
,function
)进行变量创建
表现为变量提升到作用域顶端进行创建
初始化:仍在编译阶段,不同关键字初始化方式不同,主要操作是为变量赋值:
var:创建后初始化为undefined
let:执行代码阶段进行初始化,如果没有赋值则初始化为undefined
function:函数声明表达式为var的形式提升到作用域顶端创建,并同时初始化,赋值为一个函数对象
const:创建后,执行代码阶段进行初始化,同时必须赋值
执行代码阶段:
var:创建变量时已进行了第一次初始化
let:关键字后为第一次执行,第一次执行时才进行初始化,可以不赋值,不赋值则为初始化为undefined
function:
const:关键字后第一次执行代码,必须赋值
- 所有变量声明方式都会将变量提升到作用域顶端,并进行创建
- 初始化的表现使得变量声明不同,产生了变量提升的现象
其他相关
参考文章和知乎上的知识,各浏览器在console上表现并不是一致的
image.png比如上图中的问题,在chrome的console中,有以下的情况:
- 当 let声明变量x如果初始化失败了,就会处于一种已创建的状态
- 此时无法再次对x进行初始化,即初始化机会只有一次
- 此时x将处于暂时死区(temporal dead zone)
- 于是,此状态下的x将是不可用的
但是对于其他浏览器可能报错信息将不一致,具体可以参照问题中贺老的回答。
参考:
https://zhuanlan.zhihu.com/p/28140450
https://www.zhihu.com/question/62966713
网友评论