作用域链

Posted 2022-11-28 chen-sx

作用域链

定义

变量在当前环境now、内部环境f1、内部深层环境f2/f3....都起作用的现象形成了一个链条,这个链条就称为变量的"作用域链"

<script type="text/javascript">
        //作用域链
        var title="链条";

        console.log("now:"+title);
        function f1() 
            console.log("f1:"+title);
            function f2() 
                console.log("f2:"+title);
                function f3() 
                    console.log("f3:"+title);
                
                f3();
            
            f2();
        
        f1();
</script>

外部环境变量可以提供给内部环境使用

作用域链的作用

变量必须“先声明、后使用”

函数可以“先使用、后声明”，原因是函数有“预加载”过程(函数声明先于其他执行代码进入内存)。本质还是函数的声明在前，使用在后。

<script type="text/javascript">
        getInfo();
        function getInfo() 
            console.log("csx");
            
        
</script>

内部环境可以访问外部环境的变量，反之不然

<script type="text/javascript">

        var name="csx";
        function getName() 
            //内部环境可以访问name
            console.log(name);

            var age=18;

            address="beijing";

        
        //外部环境访问不到内部的age
//        console.log(age);
        getName();
        //内部变量不用var，外部可以访问内部变量
        console.log(address);


</script>

变量的作用域是声明时决定的，而不是运行时

<script type="text/javascript">
        //变量是声明时决定的，而不是运行时
        var food="milk";
        function f1() 
            console.log(food);
        
        function f2() 
            var food="bread";
            f1();//milk
            function f3() 
                console.log(food);//bread
            
            f3();
        
//        food="noodle";//noodle
        f2();
</script>

AO活动对象

AO: Active Object 活动对象

执行环境：

• js代码执行是有环境的
• 该环境定义了其有权访问的其他数据
• 环境有一个与之关联的“活动对象AO”
• 环境中所有的变量和函数都是活动对象AO的属性
• 全局环境是最外围的执行环境，活动对象是window对象
• 执行环境中的代码执行完毕后就被销毁

<script type="text/javascript">
        //AO活动对象
        var mingzi="tom";
        console.log("名字:"+mingzi);
        function f1() 
            var age=21;
            console.log("名字:"+mingzi+"-年龄:"+age);
            function f2() 
                var height=170;
                console.log("名字:"+mingzi+"-年龄:"+age+"-身高:"+height);
                function f3() 
                    console.log("名字:"+mingzi+"-年龄:"+age+"-身高:"+height);
                
                f3();
            
            f2();
        
        f1();
</script>

以上代码可以执行，具体看f3

f3获取变量信息的顺序

1. 在本环境里面寻找
2. 在其外部环境寻找f2
3. 再在外部环境寻找
4. 直到找到全局环境为止

以上寻找变量的过程貌似是一个“动态的过程”，其实本质是“固态过程”，f3环境可以访问什么信息，早早的已经固化为其AO"成员属性"信息。在每个环境里边都有AO活动对象,内部存储着可以访问的成员信息.

执行环境可以访问变量的类型及优先顺序

<script type="text/javascript">
        //执行变量可以访问变量的类型及优先顺序

        //优先级:内部环境变量>>>本环境函数>>>形参>>>外部环境变量

        var height=175;//外部环境变量

        function f1() 
            var height=165;//外部环境变量
            function f2(height) //形参
                var height=160;//内部环境变量
                console.log(height);
                function height() //本环境函数
                    alert("asdsds");
                
            
            f2(180);
        
        f1();
</script>