【JS-01】JS中作用域以及作用域链

小课堂【北京第177期】

分享人：韩筠宜

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

作用域与作用域链是JS中非常重要的概念之一

学习作用域与作用域链对于深入了解JS的运行机制是一个很大的帮助。

2.知识剖析

执行环境

执行环境决定了变量对象的行为。

全局执行环境

全局执行环境被认为是window对象

函数执行环境

每个函数都有自己的执行环境

执行流=>函数=>(函数的环境)=>环境栈=>环境栈将函数环境弹出=>函数

当执行环境的所有代码执行完毕，该环境被销毁。

全局执行环境只有关闭网页或浏览器时才会被销毁。

作用域链

代码在环境中执行，会创建变量对象的一个作用域链。

它的存在是为了让变量对象中的所有变量和函数有序的执行

标识符解析

沿着作用域链一级一级的搜索标识符的过程。

3.常见问题

让我们用代码来形象演示一下上述的过程

4.解决方案

                var color = "blue";
                function changeColor(){
                    if(color === "blue"){
                        color = "red";
                }else{
                    color = "blue";
                }
                }
                changeColor();
                alert("Colors is now" + color);

5.编码实战

                var color = "blue";
                function changColor(){
                    var anotherColor = "red";
                    function swapColor(){
                        var template = anotherColor;
                        anotherColor = color;
                        color = template;
                }
                swapColor()
                }
                changColor()

6.扩展思考

延长作用域链

某些语句可以在作用域前端临时增加一个变量对象，在代码执行后会被移除

with语句

将指定的对象添加到作用域中

try-catch语句中的catch块

会创建一个新的变量对象

没有块级作用域

                    for(var i = 0; i < 10; i++){
                        daSomething(i);
                    }
                    alert(i);  //10

1.声明变量

var 声明的变量会自动被添加到最接近的环境中

                    function add(){
                        var sun = 10;
                        return sun;
                    }
                    alert(sun)

2.查询标识符

                    var color = "blue";
                    function getColor(){
                        return color;
                    }
                    alert(getColor());

7.参考文献

javaScript高级程序设计

8.更多讨论

了解闭包的机制

鸣谢

感谢大家观看

BY : 徐浩程 | 韩筠宜