JavaScript的作用域

目录

目标

概述

实战

变量提升

var

let

const

作用域

---

目标

        掌握变量的创建方法，了解他们的作用域。

---

概述

有三种方法创建变量，分别是var、let、const，区别如下：

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升	是，但值是undefined	是，但未初始化（TDZ）	是，但未初始化（TDZ）
是否可重新赋值	可以	可以	不能
是否可重复声明	可以	不可以	不可以
是否必须初始化	否	否	是

        其中，var是旧代码的变量声明方式，考虑到用这种方式声明变量会导致各种问题，官方推荐使用let，尤其在循环中。const因为不可以重新赋值和必须初始化的原因，所以适合声明常量。

---

实战

变量提升

        变量和函数声明会被提升到其作用域的顶部，但不同的声明方式（var、let、const）在提升时的行为不同。如果输出一个没有定义的变量，则会报ReferenceError错误，代码如下：

//Uncaught ReferenceError ReferenceError: a is not defined
console.log(a)

var

//undefined
console.log(a)
var a = 1
//1
console.log(a)

等价于以下代码：

var a
//undefined
console.log(a)
a = 1
//1
console.log(a)

结论

        var具备变量提升的功能，变量被提升后初始化为undefined

---

let

//报错：Uncaught ReferenceError ReferenceError: Cannot access 'a' before initialization
console.log(typeof a); 
//如果没有这行代码，则第一个输出是undefined
let a =1;
//不会输出
console.log(a);

结论

        let具备变量提升的功能，变量被提升但没有初始化。

---

const

//报错：Uncaught ReferenceError ReferenceError: Cannot access 'a' before initialization
console.log(typeof a); 
//如果没有这行代码，则第一个输出是undefined
const a =1;
//不会输出
console.log(a);

结论

        const具备变量提升的功能，变量被提升但没有初始化。

---

作用域

        var是函数作用域，let和const是块级别作用域。也就是说：var的作用范围仅限于最近的函数。let和const的作用域是最近的{}块内，出了这个块就无法访问。

演示

function fun(){
    if(true){
        var a=1
    }
    console.log(a)
}
//1
fun()

function fun2(){
    if(true){
        let b=1
    }
    console.log(b)
}

try {
    fun2()
} catch (error) {
    //报错了： b is not defined
    console.log("报错了：",error.message)
}

function fun3(){
    if(true){
        const c=1
    }
    console.log(c)
}

try {
    fun3()
} catch (error) {
    //报错了： c is not defined
    console.log("报错了：",error.message)
}