第3章第2.3节变量作用域和作用域链(渡一教育web前端开发学习笔记）

最新推荐文章于 2021-10-25 21:19:43 发布

szmtjs10

最新推荐文章于 2021-10-25 21:19:43 发布

阅读量262

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/szmtjs10/article/details/102257910

版权

JavaScript 专栏收录该内容

48 篇文章 5 订阅

订阅专栏

由于Javascript在es5之前只有全局和函数作用域，所以研究变量的作用域时，必须以函数的作用范围为基础。要以研究函数作用域和作用域链为前提。

作用域，和作用域链

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Javascript</title>
    </head>

<body>
<script type="text/javascript">
    function test(){
        
    }
    //test.[scope]//**隐含属性**
</script>
</body>
</html>

[scope]隐含属性，存储运行期上下文的集合

当函数执行时，会创建一个称之为执行期上下文的内部对象。（AO，GO）
一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的上下文都是独一无二的。所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，上下文销毁。

作用域与执行上下文
许多开发人员经常混淆作用域和执行上下文的概念，误认为它们是相同的概念，但事实并非如此。

我们知道 JavaScript 属于解释型语言，JavaScript 的执行分为：解释和执行两个阶段,这两个阶段所做的事并不一样：

解释阶段：

词法分析
语法分析
作用域规则确定

执行阶段：

创建执行上下文
执行函数代码
垃圾回收

JavaScript 解释阶段便会确定作用域规则，因此作用域在函数定义时就已经确定了，而不是在函数调用时确定，但是执行上下文是函数执行之前创建的。执行上下文最明显的就是 this 的指向是执行时确定的。而作用域访问的变量是编写代码的结构确定的。

作用域和执行上下文之间最大的区别是：
执行上下文在运行时确定，随时可能改变；作用域在定义时就确定，并且不会改变。

一个作用域下可能包含若干个上下文环境。有可能从来没有过上下文环境（函数从来就没有被调用过）；有可能有过，现在函数被调用完毕后，上下文环境被销毁了；有可能同时存在一个或多个（闭包）。同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。

作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式衔接——>作用域链

例：

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Javascript</title>
    </head>

<body>
<script type="text/javascript">

   function a() {
        function b() {
            var b = 2; 
        }
        var a = 1;
        b();
  }
  var c = 3;
  a();


</script>
</body>
</html>

（2）图解
当代码开始第1步执行时：
在这里插入图片描述

当a函数被定义时：

当a函数被执行时（前一刻）：

在这里插入图片描述

当b函数被定义时：

当b函数被执行时（前一刻）：

在这里插入图片描述

当b函数被执行结束后：

回归b函数被定义时的状态：

在这里插入图片描述

当a函数被执行结束时：

回归a函数被定义时的状态：

在这里插入图片描述

变量作用域

使用变量时，首先在自己当前的作用域找，如果找不到，就往上一个作用域中找，如果还找不到，就再往上，直到0级作用域为止。
在这里插入图片描述

szmtjs10

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第3章第2.3节变量作用域和作用域链(渡一教育web前端开发学习笔记）

由于Javascript在es5之前只有全局和函数作用域，所以研究变量的作用域时，必须以函数的作用范围为基础。要以研究函数作用域和作用域链为前提。作用域，和作用域链<!DOCTYPE HTML><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>Jav...
复制链接

扫一扫