如何理解作用域和作用域链 ?

什么是作用域 ?

作用域,顾名思义就是可以使用的范围,在js中,我们可以把作用域理解为变量发挥作用的范围

作用域的分类

作用域在ES6中一般分为三类,分别为全局作用域、块级作用域、函数作用域。

全局作用域

全局作用域声明的变量可以在任意地方使用,一般不在函数内或者大括号内声明的变量,都是在全局作用域下声明的

    let num = 10
    console.log(num) //10

    if (true) {
      console.log(num) //10
    }

    function fn(){
      console.log(num) //10
    }

局部作用域

如果变量是在函数内声明的,那么那个变量就只能在函数内使用,函数作用域也叫局部作用域

    function fn(a) {
      console.log(a)
    }

    console.log(a)

块级作用域

块级作用域声明的变量只能在大括号'()'里使用,例如if和for...

    if (1) {
      let a = 20
      console.log(a)
    }

    console.log(a)

什么是作用域链?

默认情况下,js里面的代码是处于顶级(0级),一旦声明后,就会开辟一个新的局部作用域

    //0级
    let num = 10

    //1级
    function fn() {
      let num = 20

      //2级
      function fn1() {
        let num = 30
      }
    }

js访问作用域链的规则

就近原则 当你访问变量的时候,会先在当前作用域寻找声明,有则使用当前作用域,没有就找上级没有没有声明,无则继续往上找,一直找到最顶级的作用域,如果没有就会报错

    //0级
    let num = 10
    console.log(num)//10

    //1级
    function fn() {
      let num = 20
      console.log(num)//20

      //2级
      function fn1() {
        let num = 30
        console.log(num)//20
      }
      fn1()
    }
    fn2()