js中变量提升和函数提升
变量提升和函数提升的总结
我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助
我们都知道 var 声明的变量有变量提升,而 let 声明的变量和 const 声明的常量没有变量提升,但是为什么 let 声明的变量就不会变量提升呢?
首先我们得理解变量和函数的创建过程:
变量声明 ==>变量初始化 ==>变量赋值
函数声明 ==> 初始化 ==> 赋值
而变量提升和函数提升要完成的工作为:
变量声明 ==> 变量初识化(undefined)
函数声明 ==> 初始化 ==> 赋值(仅仅是赋值,并没有运行函数体)
暂时性死区的概念:
ES6规定,如果代码区块中存在 let 和 const 命令声明的变量,这个区块对这些变量从一开始就形成了封闭作用域,直到声明语句完成,这些变量才能被访问(获取或设置),否则就会报错 ReferenceError。这在语法上称为“暂时性死区”,即代码块开始到变量声明语句完成之间的区域。通过 var 声明的变量拥有变量提升,没有暂时性死区。
因为有暂时性死区的存在,所以 let 声明的变量和 const 声明的常量才 不能 变量提升
从变量创建过程来理解:
let 声明被提升了,但是并没有做初始化工作
const 声明被提升,也是没有做初始化工作(const只有声明和初始化过程,没有赋值过程)
let 和 const 都没有提升所要满足的工作,所以就无法提升
var 的声明被提升,初始化被提升
function 的声明、初始化、和赋值都被提升
var 声明的变量提升(声明、初始化都被提升,但是赋值没有提升)
实例
console.log(a) // undefined
var a = 'hello world'
console.log(a) // 'hello world'
实际执行过程如下
var a
console.log(a) // undefined
a = 'hello world'
console.log(a) // 'hello world'
function 声明的函数提升(声明、初始化、赋值都提升了)
实例
fn() // 'hello world'
function fn() { console.log('hello world') }
fn() // 'hello world'
实际执行过程如下
function fn() { console.log('hello world') } // 注意:此时函数体并没有运行
fn() // 'hello world'
fn() // 'hello world'
既有 var 声明的变量提升,又有 function 声明的函数提升
实例
变量名和函数名不同名
console.log(a) // undefined
fn()
var a = 100
console.log(a) // 100
function fn() {
console.log(a) // undefined
var a = 10
console.log(a) // 10
}
var a = 200
console.log(a) // 200
实际执行过程如下
function fn() {
console.log(a)
var a = 10
console.log(a)
}
var a (全局变量)
var a (局部变量)
console.log(a) // undefined
fn() // undefined 10
a = 100
console.log(a) // 100
a = 200
console.log(a) // 200
变量名和函数名同名
情况一:变量由 函数类型 变为 基本数据类型(如 Number)
var a = 100
console.log(a) // 100
a() // 报错(TypeError:a is not a function)
function a() {
console.log('hello world')
}
实际执行过程如下
function a() {
console.log('hello world')
}
var a // 用 var 重新声明了变量 a,但此时变量 a 指向的还是函数体本身,值未改变
a = 100 // 重新给 a 赋值为 100,a 的值发生了改变,由函数类型变为了number类型
console.log(a) // 100
a() // 报错:此时 a 已经不是函数 a 了
情况二:变量重新赋值,但未立即改变变量的值
console.log(a) // a(){ console.log('hello world')} 即 a 函数本身
a() // 'hello world'
var a = 100
var a = 200
var a = 300
console.log(a) // 300
function a() {
console.log('hello world')
}
实际执行过程如下
function a() {
console.log('hello world')
}
var a // 此时虽然重新声明了 a 变量,但是并没有改变 a 的值,此时的 a 还是个函数
console.log(a) // a(){ console.log('hello world')} 即 a 函数本身
a = 100 // 重新给 a 变量赋值 100
a = 200 // 重新给 a 变量赋值 200
a = 300 // 重新给 a 变量赋值 300
console.log(a) // 100(此时变量 a 已经由 函数类型变为 基本数据类型number,且值为 100)
a() // 报错:此时 a 已经不是函数 a 了
用 let 定义的变量和用 const 定义的常量 没有提升
用 let 定义的变量
在变量定义之前使用改变量 会报错
console.log(a) // 报错 Cannot access 'a' before initialization
let a = 10
在变量定义之后使用改变量 才能正常运行
let a = 10
console.log(a) // 10
总结:
1. 用 var 定义的变量有变量提升,用 function 定义的函数有函数提升
2. 函数提升优先级高于变量提升,即优先执行函数提升
3. let 定义的变量和 const 定义的常量不会提升
4. 重复用 var 定义的同一个变量是合法的,如果重复的声明有初始值,那就赋值;如果没有初始值,那么它不会对变量原来保存的值不会产生影响
5. 不能用 let 重复定义同一个变量,会造成错误
作者: 默然晴天 博客地址:http://www.cnblogs.com/bryanfu/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 原文链接 如有问题, 可邮件(fukangkobe@163.com)咨询.