JS函数作用域是链什么?

各位大大们都吃过糖葫芦吧,其实作用域链跟糖葫芦很像。糖葫芦是把山楂一个一个串起来的,而作用域链是把作用域一个一个串起来的,如下图作用域链

用直线串起来的几个椭圆就是fn的作用域链,在这个作用域链中,最里面的是函数本身的作用域,最外面的是全局作用域,而父级函数作用域代表的是fn父级函数的作用域。一般来说,函数的作用域链至少包括其本身作用域和全局作用域(这也是一个函数总是可以访问全局变量的原因)。

函数有没有父级函数作用域取决于它有没有父级函数以及有没有引用父级函数中的变量,若

  • 没有父级函数,则没有父级函数作用域
  • 有父级函数,则看函数有没有引用父级函数的变量,若引用了,则有父级函数作用域,若没引用,则没有父级函数作用域

下面进行分类演示:

没有父级函数的情况:

var name = 'tom'

function fn () {

    console.log(name)

}

fn() 

 很显然,函数fn没有父级函数,其作用域链没有父级函数作用域,只有fn本身的作用域和全局作用域,作用域链如下:

 无父级作用域

有父级函数但没有引用父级函数中变量的情况:

var name = 'tom'

function fn1 () {

    var name2 = 'jerry'

    function fn2 () {

        console.log(name)  // 引用了全局函数中的变量,但没有引用fn1中的变量

    }

    fn2()

}

fn1()

 fn2虽然有父级函数但没有引用父级函数中的变量,所以其作用域链中并不包含fn1的作用域。作用域链如下:

 无父级函数作用域

有父级函数而且引用了父级函数中变量的情况:

var name = 'tom'

function fn1 () {

    var name2 = 'jerry'

    function fn2 () {

        console.log(name2)  // 引用了fn1中的变量

    }

    fn2()

}

fn1()

 fn2有父级函数而且引用了父级函数中的变量,所以其作用域链中包含fn1中的作用域链。作用域链如下:

有父级函数作用域

以上就是小白总结的关于函数作用域链的概念和确定作用域链的方法,但仅仅了解这些对于JS码农来说还远远不够,这只是翻越作用域链这座大山的第一步,了解了作用域链的基本概念之后还要探索作用域链的创建过程。

猜你喜欢

转载自blog.csdn.net/qq_34995014/article/details/90069902
今日推荐