块级作用域绑定
本文仅仅作为前端实习面试的笔记内容,因此不能完全保证内容正确性,如有错误,欢迎指正!
- var声明及变量提升(Hoisting)机制
在函数作用域或者全局作用域通过关键字var声明的变量,无论实际上在哪里声明,都会被当作当前作用域顶部声明的变量。
function getValue (condition) {
if (condition) {
var value = 'blue'
// other operations
return value
} else {
// 此处可以访问value变量,其值为undefined
return null
}
// 此处可以访问value变量,其值为undefined
}
在预编译阶段,JavaScript引擎会将上面代码修改成下面这个样子
function getValue (condition) {
var value
if (condition) {
value = 'blue'
// other operations
return value
} else {
// 此处可以访问value变量,其值为undefined
return null
}
// 此处可以访问value变量,其值为undefined
}
可以看到,变量value的声明提升到目前函数作用域的顶部,初始化操作仍在原来位置。所以在else和之后的代码块中都可以访问到value,但是由于没有初始化,因此为undefined。关于这块内容,如果想要详细了解,可以阅读《你不知道的JavaScript上卷》。
- 块级声明
先得了解块级作用域,在许多类C语言中都存在这种块级作用域,块级作用域存在于- 函数内部
- 块中({}包括的范围)
定义在块级作用域内部的变量,外部无法访问。
- let声明
用let来声明变量,就可以将变量的作用域限制在当前的代码块中,因此相当于给JavaScript添加了一个块级作用域。
function getValue (condition) {
if (condition) {
let value = 'blue'
// other operations
return value
} else {
// 此处不可以访问value变量
console.log(value)
return null
}
// 此处不可以访问value变量
}
getValue(0)
通过结果可以看出执行流离开if块,value就会销毁,如果condition一开始就为false,就不会声明并初始化value变量,所以错误显示为value is not defined。
2. 禁止重声明
假设当前作用域已经声明了某个标示符,此刻再使用let关键字进行声明就会出错
var num1 = 20
var num1 = 30
var count = 100
let count = 200
通过对比可以看出,多次声明var变量不会造成错误。但是对于已经声明的变量,再次用let声明就会报错。同理可以想到如果已经使用let声明的变量,再次用let声明也会导致错误。
但是需要注意上面指出了在同一个作用域重复定义会导致错误,但是在不同作用域重复声明相同变量不会出错
var count = 30
if (condition) {
// 此处不会出错,因为二者在不同作用域当中
let count = 40
}
- const声明
- const声明通过名称可以看出是用来声明常量的,因此在声明常量时必须进行初始化操作。
- const和let声明的都是块级标识符
- 和let类似,在同一作用域用const声明已经存在的标识符会导致语法错误。
以上内容不难理解,其中const声明的变量需要注意的一个点是
不管在严格模式还是非严格模式,都不可以为const定义的常量再赋值,否则就会抛出错误。但是对于const定义的常量对象,可以修改对象的属性值,但是不允许修改绑定
const maxItems = 5
maxItems = 6
const person = {
name: 'tangsong'
}
person.name = 'yuanmingqing'
person = {
name: 'yuanmingqing'
}
通过结果可以看出,直接修改常量对象的值,并没有导致绑定改变,因此没有出错。但是改变绑定直接导致出错。
4. 临时死区
JavaScript引擎扫描代码发现变量声明时,会将var变量提升至作用域顶部,遇到const和let声明会将其放在临时死区中,访问临时死区的变量会导致错误,只有执行变量声明语句之后,变量才能从临时死区中移出。
console.log(typeof value1)
console.log(typeof value2)
var value1 = 20
let value2 = 30
- 循环中的块作用域绑定
- 循环中的函数
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i)
})
}
funcs.forEach(function (func) {
func()
})
因为循环内部创建的函数全部都保留了对相同变量的引用,所以会输出10个10。可以通过借助立即执行表达式(IIFE)来解决这类问题。想要了解更多IIFE的内容,同样可以看《你不知道的JavaScript上卷》
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push((function (value) {
return function () {
console.log(value)
}
}(i)))
}
funcs.forEach(function (func) {
func()
})
在这个循环内部,IIFE表达式为接受的每一个参数变量i都创建一个副本value存储。因此调用每个函数会输出从0到9。
2. 循环中的let声明
利用let可以模仿IIFE从而达到相同的效果,因为每次循环迭代都会创建一个新变量,并以之前迭代中同名变量的值来初始化它
var funcs = []
for (let i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i)
})
}
funcs.forEach(function (func) {
func()
})
for-in循环表现的和for循环行为一致。如果使用var,那么就会输出三个c
var funcs = []
var object = {
a: true,
b: true,
c: true
}
for (let key in object) {
funcs.push(function () {
console.log(key)
})
}
funcs.forEach(function (func) {
func()
})
3. 循环中的const声明
var funcs = []
for (const i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i)
})
}
funcs.forEach(function (func) {
func()
})
这种情况下会直接出错,迭代操作末尾执行i++,因为i是const常量,因此直接出错。
var funcs = []
var object = {
a: true,
b: true,
c: true
}
for (const key in object) {
funcs.push(function () {
console.log(key)
})
}
funcs.forEach(function (func) {
func()
})
输出情况和使用let相同,因为每次迭代会创建一个新的绑定,而不会修改原有的绑定。
- 全局块作用域绑定
使用var声明的全局对象会覆盖全局属性
使用let和const声明的全局对象不会覆盖全局属性,仅仅是遮蔽 - 块级绑定最佳实践的进化
默认使用const,只有在确实需要改变变量的值时使用let
来源:CSDN
作者:jerrywang123456
链接:https://blog.csdn.net/jerrywang123456/article/details/104574839