ES6+语法一之块作用域

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

---

随着ES6+很多新语法出现，给开发者带来了更好体验的同时，又遇到了旧浏览器兼容的头疼问题。新语法不仅是对以前代码的查漏补缺，还扩展了许多新的领域。

块级作用域声明

以前变量作用域的基本单元是function,如果需要创建一个块作用域需要使用立即调用函数表达式(IIFE)

var a = 2;
(function IIFE(){
    var a = 3;
    console.log(a) // 3
})()
console.log(a) // 2

现在我们可以创建绑定到任意块的声明，其被称为块作用域。这一位置我们只需要一对大括号就可以创建一个作用域。虽然独立的{}不常见，但总是合法的。

var a = 2;
{
    let a = 3;
    console.log(a) // 3 
}
console.log(a) // 2

声明之前访问会导致错误

{
    console.log(a) //undefined
    console.log(b) // ReferenceError!
    var a 
    let b 
}

过早访问let声明的引用会导致的错误叫做临时死亡区错误.(Temporal Dead Zone, TDZ)。不管怎么样都不能在let x语句之前访问x。

对于typeof而言。

{
    if(typeof a === undefined){
        console.log('cool')
    }
    if(typeof b === undefined){// ReferenceError！
    } 
     
    let b
}

const

用于创建常量。设定初始值之后就是只读变量，不允许改值。

const a = 2;
a = 3 // TypeError

常量不是对这个值本身的限制，而是对赋值的那个变量的限制。这个值并没有因为const被锁定或者不变，只是赋值本事不可变。如果这个值是复杂值，其内容仍然是可以修改的。

const a = [1,2,3]
a.push(4)
console.log(a) // [1,2,3,4]
a = 42 // TypeError

变量a并不持有一个常量数组，它持有的是一个指向数组的常量引用。数组本身可以随意改变的。

块作用域函数

从ES6开始，块内声明的函数，其作用域在这个块内。

"use strict";
{
    foo() //正常
    function foo(){}
}
foo() //ReferenceError

块作用域函数比let多了一个块内提升。

if(something){
    function a(){
        console.log(1)
    }
}else{
    function a(){
        console.log(2)
    }
}
a()
// 此代码在新版浏览器中存在块作用域，something为true会打印1，否则打印2

ES6前环境, 无论something是多少都会打印2

"use strict"
if(something){
    function a(){
        console.log(1)
    }
}else{
    function a(){
        console.log(2)
    }
}
a() // ReferenceError

而在ES6中会报错。

结语

以上是ES6块作用域全部内容。

---