😁 作者简介:一名大三的学生,致力学习前端开发技术
⭐️个人主页:夜宵饽饽的主页
❔ 系列专栏:JavaScript进阶指南
👐学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气
🔥前言:
这里是关于块级作用域的部分, 这是我自己的学习JavaScript的笔记,希望可以帮助到大家,欢迎大家的补充和纠正
2.2 块级作用域
2.2.1 为什么需要块级作用域
在ES5中只有函数作用域和全局作用域,没有块级作用域,这样会导致很多场景不合理
-
内层的变量可能会覆盖外层的变量
var tmp='outer first' function fn(){ console.log(tmp) if(false){ var tmp='inner second' } } fn();//undefined
以上代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量的,但是,在执行函数后,输出的结果为undefined,原因在于变量提升导致内层的tmp变量覆盖外层的tmp变量,所以输出时,tmp还没有声明定义,所以输出undefined
-
用来计数的循环变量泄露为全局变量
var s='hello' for(var i=0;i<s.length;i++){ console.log(s[i]) } console.log(i) //5
上述的代码中,变量i只用来控制循环的,但是循环结束后,它并没有消失,而是泄露成了全局变量
2.2.2 ES6中的块级作用域
let 实际上为JavaScript新增了块级作用域。
function f1(){
let n=5
if(true){
let n=10;
}
console.log(n) // 5
}
上述代码中最后输出5,表示外层的n变量不受内层代码影响
2.2.3 块级作用域与函数声明
函数能不能再块级作用域中声明?
1️⃣ 在ES5规定,函数只能在顶层作用域和函数作用域之中声明,不能再块级作用域中声明
//情况一
if(true){
function fn(){}
}
//情况二
try{
function fn(){}
}catch(e){
}
以上这两种情况再ES5中都是非法的。
但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之声明函数,因此上面两种情况实际上都能运行,并不会报错
2️⃣ 在ES6规定,在块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
以下的代码中在ES5和ES6之中会得到不同的情况:
function f(){console.log('i am outside')}
(function (){
if(false){
function f(){'i am inside'}
}
f()
}())
在ES5中允许会得到’i am inside’,因为在if内声明的函数f会被提升到函数的头部,实际上允许的代码如下:
function f(){console.log('i am outside')}
(function (){
function f(){'i am inside'}
if(false){
}
f()
}())
而在ES6中就完全不一样了,理论上会得到‘i am outside’。因为块级作用域内声明的函数类似let 对作用域之外没有影响。但是,如果真的在ES6浏览器中允许上面的代码,是会报错的,这是为什么呢
原来,如果改变了这种块级作用域声明函数的处理规则,显然会对旧代码产生很大的影响。
为了减轻因此产生的不兼容问题,ES6在附录中规定,浏览器的实现可以不遵守上面的规定,而有自己的行为方式
- 允许块级作用域中声明函数
- 函数声明类似var 即会提升到全局作用域和函数作用域的头部
- 同时,函数声明还会提升到块级作用域的头部。
上面的3条规定只对ES6的浏览器实现有效,其他的环境的实现不用遵守,仍旧将块级作用域的函数声明当作let处理即可
所以根据这三条规定,浏览器的ES6环境中,块级作用域内函数声明行为类似于var声明变量
function f(){console.log('i am outside')}
(function () {
if(false){
function f(){console.log('i am inside')}
}
f()
}())
上面的代码在符合ES6的浏览器中会报错,因为实际上运行的是
function f(){console.log('i am outside')}
(function () {
var f=undefined
if(false){
function f(){console.log('i am inside')}
}
f()
}())
所以,在考虑到环境差异太大,应该避免在块级作用域内声明函数,如果确实需要,应该写成函数表达式的形式,而不是函数声明语