JavaScript中作用域详解

1.作用域

作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合
换句话说,作用域决定了代码区块中变量和其他资源的可见性
举个例子

 function fn(){
      var info='函数内部变量'
    }
    fn()//要先执行这个函数,否则根本不知道里面是啥
    console.log(info)//Uncaught ReferenceError: info is not defined

上述例子中,函数fn内部创建一个info变量,当我们在全局访问这个变量的时候,系统会报错
这就说明我们是无法获取到(闭包除外)函数内部的变量
我们一般将作用域分成

• 全局作用域
• 局部作用域
• 块级作用域

全局作用域

任何不在函数或是大括号中声明的变量,都是在全局作用域下,全局作用域中声明的变量可以在程序的任意位置访问

  var info = 'hello world'
    function fn() {
      console.log(info)
    }
    fn() //打印hello world

局部作用域

如果一个变量是在函数内部声明的,它就在局部作用域下,这个变量只能在函数内部访问,不能再函数以外去访问

    
    function fn() {
      var info = 'hello world'
      console.log(info)
    }
    fn() //打印hello world
    console.log(info)  //Uncaught ReferenceError: info is not defined

可见上述代码在函数内部声明的变量或函数,在函数外部是无法访问的,这说明在函数内部定义的变量或方法只是函数作
用域

块级作用域

ES6引入了let和const关键字,和var关键字不同,在大括号中使用let和const声明的变量存在于块级作用域中,在大括号之外不能访问这些变量

  {
      //块级作用域中的变量
      var msg = 'English'
      let info = 'hello world'
      const num = 10
      console.log(msg) //English
      console.log(info)//hello world
      console.log(num) //10
    }
      console.log(msg) //English
      console.log(info) //Uncaught ReferenceError: info is not defined
      console.log(num) //Uncaught ReferenceError: num is not defined

2.词法作用域

词法作用域,又叫静态作用域,变量被创建时就确定好了,而非执行阶段确定的,也就是说我们写好代码时它的作用域就确定了,JavaScript遵循的就是词法作用域

    var a = 2
    function foo() {
      console.log(a)
    }
    function bar() {
      var a = 3
      foo()
    }
    bar() //2

上述代码改变成一张图

由于JavaScript遵循词法作用域,相同层级的foo和bar就没有办法访问到彼此块级作用域中的变量,所以输出为2

2.作用域链

当在JavaScript中使用一个变量的时候,首先JavaScript引擎会尝试在当前作用域下去寻找该变量,如果找不到,再到它的上层作用域去找,以此类推直到找到该变量或是已经到了全局作用域,如果在全局作用域中仍然找不到该变量,它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错

var sex = '男'
    function person() {
      var name = '张三'
      function student() {
        var age = 18
        console.log(name)//张三
        console.log(sex)//男
      }
      student()
      console.log(age) //Uncaught ReferenceError: age is not defined
    }
    person()

上述代码主要做了以下工作:

• student函数内部属于最内层作用域,找不到name,向上一层作用域person函数内部找,找到了输出"张三"
• student函数内部输出sex时,找不到sex,会向上一层作用域person函数内部找,找不到继续向上一层找,即全局作用域找到了sex,输出"男"
• person函数内部输出age时,找不到,向上一层作用域找,即全局作用域,还是找不到则报错