JavaScript变量提升
在JavaScript
中变量声明与函数声明都会被提升到作用域顶部,优先级依次为: 函数声明 变量声明 变量赋值。
变量提升
var的变量提升
console . log ( a ) ; // undefined
var a = 1 ;
console . log ( a ) ; // 1
// console.log(b); // ReferenceError: b is not defined
为了显示a
与b
的区别,打印了一下未声明的变量b
,其抛出了一个ReferenceError
异常,而a
并未抛出异常,其实对a
的定义并赋值类似于以下的操作,将a
的声明提升到作用域最顶端,然后再执行赋值操作。
var a ;
console . log ( a ) ; // undefined
a = 1 ;
console . log ( a ) ; // 1
let/const的变量提升
let
与const
都具有块级作用域,对于变量提升的相关问题的表现是相同的。实际上关于这个问题目前有所分歧,但在ES6
的文档中出现了var/let hoisting
字样,也就是说官方文档说明let
与var
一样,都存在变量提升,我觉得能够接受的说法是:
let
的「创建」过程被提升了,但是初始化没有提升。
var
的「创建」和「初始化」都被提升了。
function
的「创建」「初始化」和「赋值」都被提升了。
JS
中无论哪种形式声明var
、let
、const
、function
、function*
、class
都会存在提升现象,不同的是var
,function
,function*
的声明会在提升时进行初始化赋值为undefined
,因此访问这些变量的时候,不会报ReferenceError
异常,而使用let
,const
,class
声明的变量,被提升后不会被初始化,这些变量所处的状态被称为temporal dead zone
,此时如果访问这些变量会抛出ReferenceError
异常,看上去就像没被提升一样。关于这个问题的讨论,可以参考下边的链接,尤其是在stackoverflow
中的回答。
https://www.jianshu.com/p/0f49c88cf169
https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b290405adfda
https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6
函数声明提升
函数声明会将声明与赋值都提前,也就是整个函数体都会被提升到作用域顶部。
s ( ) ; // 1
function s ( ) {
console . log ( 1 ) ;
}
函数表达式只会提升变量的声明,本质上是变量提升并将一个匿名函数对象赋值给变量。
console . log ( s ) ; // undefined
var s = function s ( ) {
console . log ( 1 ) ;
}
console . log ( s ) ; // f s(){console.log(1);}
由此来看,直接进行函数声明与函数表达式声明的函数之间就存在一个优先级关系。
var s = function ( ) {
console . log ( 0 ) ;
}
function s ( ) {
console . log ( 1 ) ;
}
s ( ) ; // 0
优先级
在JS
中函数是第一等公民,在《你不知道的JavaScript
》(上卷)一书的第40
页中写到,函数会首先被提升,然后才是变量。也就是说,同一作用域下提升,函数会在更前面。即在JS
引擎的执行的优先级是函数声明、变量声明、变量赋值。
function s ( ) { //函数声明
console . log ( 1 ) ;
}
var s ; // 变量声明
// 函数已声明`a` 相同的变量名`var`声明会被直接忽略
console . log ( s ) ; // f s(){...}
s = function ( ) { // 变量赋值
console . log ( 0 ) ;
}
s ( ) ; // 0
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/0f49c88cf169
https://www.cnblogs.com/echolun/p/7612142.html
https://www.cnblogs.com/miacara94/p/9173843.html
https://blog.csdn.net/qq_41893551/article/details/83011752
https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b290405adfda
https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6