JavaScript中块级作用域：探索块级作用域和变量封闭性【ES6标准入门】

😁 作者简介：一名大三的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript进阶指南
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

​🔥​前言：

这里是关于块级作用域的部分， 这是我自己的学习JavaScript的笔记，希望可以帮助到大家，欢迎大家的补充和纠正

2.2 块级作用域

2.2.1 为什么需要块级作用域

在ES5中只有函数作用域和全局作用域，没有块级作用域，这样会导致很多场景不合理

1. 内层的变量可能会覆盖外层的变量

   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

2. 用来计数的循环变量泄露为全局变量

   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()
}())

所以，在考虑到环境差异太大，应该避免在块级作用域内声明函数，如果确实需要，应该写成函数表达式的形式，而不是函数声明语