在此我会讲ES5中var和function的弊端;let和const的优势及特点
一、function
关于ES5中function主要有三大缺点。
1、声明提升
在编译阶段前,js引擎会遍历一遍全局作用域(并不是函数作用域)中的函数声明,并且进行函数赋值。
toSay() // 埋埋超可爱
inside() // inside is not defined
function toSay() {
console.log('埋埋超可爱')
function inside() {
console.log('我是函数作用域内声明的')
}
}
2、块级内声明非法
在ES5规定中,在块级中声明函数是非法的。但是浏览器并不完全遵循,也就是说js引擎即不会报错,也不会将其预处理为全局函数。
toSay() // toSay is not a function
if (true) {
toSay() // 埋埋超可爱
function toSay() {
console.log('埋埋超可爱')
}
}
3、函数替换
也就是说你在某个块级或则函数内定义了一个与外部名称相同的函数,从而外部函数被内部函数利用声明提升所替换。
function toSay() {
console.log('埋埋超可爱')
}
// 在块级内被替换
if (true) {
toSay() // 埋埋不可爱
function toSay() {
console.log('埋埋不可爱')
}
}
// 在函数内被替换
function wrap() {
toSay() // 埋埋一点都不可爱
function toSay() {
console.log('埋埋一点都不可爱')
}
}
wrap()
二、var
关于ES5中var也类似function主要有三大缺点。
1、声明提升
在编译阶段前,js引擎会遍历一遍全局作用域(并不是函数作用域)中的变量声明,但是并不进行赋值,默认为空字符。
console.log(name)
var name = '埋埋'
注意:第一次时为空字符,当你再次刷新页面时,由于已经赋值便打印你所赋予的值,比如:埋埋。
2、变量替换
也就是说你在某个块级内定义了一个与外部名称相同的变量,从而外部变量被内部变量所替换。
var name = '埋埋'
// 在块级内被替换
if (true) {
var name = 'chujiu'
}
console.log(name) // chujiu
3、块级内部变量泄露外部
由于var不具备块级作用域,从而导致在块级内部定义变量,其外部可以直接访问。
for(var count = 0; count < 5; count++) {}
console.log(count) // 5
三、let/const
关于ES6中let/const主要有三大优点。
1、不存在声明提升
console.log(name) // name is not defined
let name = '埋埋'
// const同类
2、块级作用域
let name = '埋埋'
if(true) {
let name = '出久'
}
console.log(name) // 埋埋
// const同类
3、暂时性死区
在块级作用域中,声明一个与外部相同名称的变量,块级作用域内访问这个变量在其声明之前,会报错。
let name = '埋埋'
if (true) {
console.log(name) // name is not defined
let name = '出久'
}
// const同类
四、特性
1、let可改变,const不可改变
2、当const储存的是某个引用类型的指针地址,它冻结的只是这个地址而非引用类型内部值,因此其内部是可以增删改属性的。
3、空窗区(块级作用域内定义的变量,外部访问,始终为空字符)
if(true) {
let name = '出久'
}
console.log(name) // 空字符
// const同类