随着 JavaScript 的快速发展，越来越多的功能被添加进该语言中。其中，对于作用域的改变是一项非常重要的改进。在 ES6 中，我们看到了块级作用域的引入，也就是使用 let 和 const 声明变量。而在 ES12 中，除了对 let 和 const 的一些更新，我们还看到了类似 function 的块级作用域函数的引入。在这篇文章中，我们将探讨区块作用域和函数作用域的差异及其影响。
函数作用域和变量提升
在 ES5 及之前版本中，JavaScript 只有函数作用域，而没有块级作用域。这意味着在函数内声明的变量可以在该函数内部的任何地方使用，而在外部不能访问。
另外一种 JavaScript 的行为是变量提升。这意味着在声明变量之前可以访问该变量，在这之后声明该变量再赋值也是可以的。
console.log(myVar); // undefined var myVar = "Hello World!"; console.log(myVar); // "Hello World!"
上述代码中的 myVar 变量在声明之前输出，其值为 undefined。这是因为变量提升将变量声明的过程提升到了该作用域的顶部，但是变量的赋值却没有提升。
块级作用域和变量提升
在 ES6 中，块级作用域被引入了。块级作用域允许使用 let 和 const 来声明变量。在块级作用域中声明的变量只能在该作用域内部访问。这也解决了变量提升的问题。
console.log(myVar); // ReferenceError: myVar is not defined let myVar = "Hello World!"; console.log(myVar); // "Hello World!"
上述代码中，由于 myVar 变量使用了 let 声明并处于块级作用域中，所以在声明前引用会抛出 ReferenceError。
除了 let 和 const，在 ES12 中，我们还可以使用块级作用域函数。这意味着我们可以在代码块中声明函数，并且这个函数仅在该块级作用域中可用。
{
function myFunction() {
console.log("Hello World!");
}
myFunction();
}上述代码中，我们声明了一个只在代码块中可用的 myFunction 函数，它会输出 "Hello World!"。
块级作用域函数和函数表达式的区别
尽管 ES12 引入了块级作用域函数，它与函数表达式仍然有一些区别。其中一个区别是函数的命名问题。
考虑下面的函数表达式的例子：
let myFunction = function() {
console.log("Hello World!");
};使用函数表达式声明函数时，可以省略函数名。这个函数的标识符会存储在变量 myFunction 中。
在块级作用域中声明函数时，默认情况下也不能省略函数名。
{
function myFunction() {
console.log("Hello World!");
}
myFunction();
}因为函数名称与变量名称相同，所以它不能被调用或分配给另一个变量。
{
let myFunction = function() {
console.log("Hello World!");
};
myFunction();
}值得注意的是，我们可以使用函数表达式将函数分配给变量，这种情况下就不需要使用函数名称。
结论
在本文中，我们就探讨了 ES12 中块级作用域与函数作用域的差异及其影响。当使用块级作用域时，我们可以解决变量提升的问题，并限制变量的作用范围。而使用块级作用域函数可以使我们在代码块中声明函数并限制其可用范围。然而，块级作用域函数和函数表达式仍然存在一些区别，我们需要根据实际情况选择不同的声明方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67248e4e2e7021665e13f8d3