js中的作用域以及作用域链

78 阅读 0 评论 52 点赞

我是靠谱客的博主酷炫小懒猪，最近开发中收集的这篇文章主要介绍js中的作用域以及作用域链，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作用域

什么是作用域呢？简单来说作用域就是变量以及函数的访问范围。大家都知道变量分为全局变量和局部变量，作用域也分为全局作用域和局部作用域。

var a = "hello world"
    function fun() {
        var b="你好世界"
        console.log(b)//输出"你好世界"
        console.log(a)//输出"hello world"
    }
    console.log(a)//输出"hello world"
    console.log(b)//输出b is not defined
    fun()

全局作用域：函数最外层定义的变量具有全局作用域，例子中声明的变量a就具有全局作用域，函数内外部都可访问得到。

局部作用域：一般来说只有函数内部才能访问得到，函数外部是访问不到的。

作用域链

什么是作用域链？

官方解释：[[scopes]]中所存储的执行器上下文（上下作用域）对象的集合，这个集合呈链式链接，我们把这种链式叫做作用域链

官方解释这看得有点绕，又难理解，直接上代码演示。

var a = "hello world 1"
    function fun1() {
        var a = "hello world 2"
        fun2()
        function fun2(){
            var a = "hello world 3"
            console.log(a)//hello world 3
        }
    }
    fun1()

函数fun2输出的结果为hello world 3,打印输出a的时候变量a进行解析,会先从局部作用域开始寻找变量a,如果找到,那就输出a的结果。

当我们把fun2中的变量a注释掉,那fun2中就找不到变量a了,此时会向上寻找,到fun1中寻找变量a,如果找到,那就输出a的结果。如果把fun1中的变量a也注释掉,那就会继续向上寻找,那打印输出就为hello world 1,这个过程可以看作一条链子。

var a = "hello world 1"
    function fun1() {
        var a = "hello world 2"
        fun2()
        function fun2(){
            //var a = "hello world 3"
            console.log(a)//hello world 2
        }
    }
    fun1()

作用域链影响着函数变量的执行顺序,注意的是作用域链只会向上执行,不会向下,到window就停止,不会继续向上了。