JavaScript 的词法作用域以及作用域链

JavaScript 的作用域是词法作用域(Lexical Scope) ,函数的作用域在定义时就已经确定,而不是在调用时。

来看一个例子:

scss 复制代码
var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar(); // 结果是 1

为什么,就是我函数定义的时候,作用域就确定了:

  • foo 定义的位置是在全局作用域
  • 它的外层作用域是 全局
  • 无论 foo 在哪里被调用(哪怕是在 bar 里面),它都会在自己定义时的作用域链里去找变量

执行过程拆解

  1. 编译阶段
    • 全局创建变量 value = 1
    • 创建函数 foo(作用域链指向全局作用域
    • 创建函数 bar(作用域链指向全局作用域
  1. 执行阶段
    • 调用 bar()
      • bar 内部声明 value = 2(只在 bar 的作用域里可见)
      • 调用 foo()
        • foo全局作用域 中定义,所以会从全局作用域找 value
        • 全局 value1,所以输出 1

如果想输出 2 怎么办?

必须让 foobar 的作用域里定义,这样它的外层作用域才是 bar

这里要引生出作用域链:

  • 每个函数都有一个作用域链,它记录了:
    1. 自己的变量对象(AO/VO)
    2. 定义时的父作用域
    3. 一直往上直到全局作用域
  • 查找变量时,从当前作用域开始,一层层往父作用域查找(就像链条一样)

词法作用域 + 作用域链 + 闭包

先来看两个例子,来源于《JavaScript权威指南》

第一段 :

csharp 复制代码
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f(); // 直接调用 f
}
checkscope(); // => "local scope"

第二段 :

csharp 复制代码
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f; // 返回函数 f 本身
}
checkscope()(); // => "local scope"

来思考一下,为何两段代码输出是一样的?

原因:词法作用域(Lexical Scope)

  • 函数 f定义时 就已经决定了它能访问的作用域链
  • 无论你是 checkscope 里直接调用 f() (第一段)
    还是返回 f 再调用 f() (第二段)
  • 它查找变量 scope 时,都会先找自己作用域 → 找不到就去定义时的父作用域checkscope)里找
  • checkscope 作用域里,scope = "local scope",所以结果都是 "local scope"

那它们有什么不同?

第一段:普通函数调用
  • fcheckscope 执行时被直接调用
  • checkscope 执行结束后,局部变量 scope 会被销毁(没有引用了)

执行过程:

scss 复制代码
checkscope()
  ├── 创建局部变量 scope = "local scope"
  ├── 定义 f(),作用域链:[f作用域, checkscope作用域, 全局作用域]
  ├── 调用 f() → 找到 checkscope 作用域的 scope
  └── checkscope 返回结果 "local scope"
第二段:闭包
  • checkscope 返回 f 本身,f 被外部变量引用
  • 因为 f 依然可以访问 checkscope 里的变量 scopecheckscope 的作用域不会被销毁(闭包现象)
scss 复制代码
checkscope()
  ├── 创建局部变量 scope = "local scope"
  ├── 定义 f(),作用域链:[f作用域, checkscope作用域, 全局作用域]
  ├── 返回 f(没有调用)
      ↓
调用返回的 f()
  ├── 从自己的作用域链找到 checkscope 的 scope
  └── 返回 "local scope"

结果一样,是因为词法作用域决定了 f 的作用域链,查找 scope 时都会访问到 checkscopescope 变量;

不同点在于第一段没有闭包,执行结束变量就销毁,而第二段形成闭包,变量会被保留下来。

相关推荐
东华帝君7 小时前
HTML5 History API:解决AJAX应用的历史记录问题
前端
一枚前端小能手7 小时前
🔥 z-index明明设了999999还是不生效呢
前端·css
古蓬莱掌管玉米的神7 小时前
coze promote复活龙族上杉绘梨衣
javascript
古蓬莱掌管玉米的神7 小时前
摩搭社区云端简单情感分析
javascript
古蓬莱掌管玉米的神7 小时前
本地调用gpt-4o api
javascript
古蓬莱掌管玉米的神7 小时前
Docker本地搭建Dify
前端
我希望的一路生花8 小时前
Total PDF Converter多功能 PDF 批量转换工具,无水印 + 高效处理指南
前端·人工智能·3d·adobe·pdf
古蓬莱掌管玉米的神8 小时前
Brain.js本地训练
javascript
IT_陈寒8 小时前
10个Vite配置技巧让你的开发效率提升200%,第7个绝了!
前端·人工智能·后端