JS核心知识-作用域和作用域链

179 阅读2分钟

在大多数语言都对变量访问进行限制,例如Java、C。JavaScript也有这样的设计。这样的规则称为作用域。按照指定规则查找变量的路径称为作用域链

作用域

作用域本质是一套规则,它定义了在什么地方以及查找变量。可以比作盒子,盒子里面有什么东西(变量和函数),哪些人可以看到使用这东西(变量和函数的访问权限)。

作用域主要分为以下几种:

  • 全局作用域:脚本运行时顶级作用域,它始终在调用栈的栈底
  • 函数作用域:在函数创建的作用域
  • 块级作用域:通过letconst声明的变量,被限制在{}之内可以访问。ES6引入特性
  • 模块作用域:模块模式下运行代码的作用域。通过<script type="module">或者.mjs文件定义的脚本内部具有模块作用域
// 全局作用域
var globalValue = 'global value';
funciton executeFunction() {
    // 函数作用域
    var executeValue = 'execute value';
    if (true) {
        // 块级作用域
        let blockValue = 'bloack value';
    }
    // 此处访问blockValue 报错
}
// 此处访问executeValue 报错

作用域链

作用域链是当前执行上下文和所有外层执行上下文基于词法作用域的静态链式结构,在运行时表现为栈式行为。这是当前执行上下查找变量的核心。

var globalValue = "global value";
function executeFunction() {
  var executeValue = "execute value";
  function innerFunction() {
    var innerValue = "inner value";
    console.log(innerValue);
    console.log(executeValue);
    console.log(globalValue);
  }
  return innerFunction;
}

var execute = executeFunction();
execute();

在上述代码中的作用域链就像下面图的结构

image.png

📢 注意

在开发时函数嵌套不宜过多。由于作用域链是链表结构,在查找变量上性能较慢。而且嵌套过多,内存开销也比较大。

作用域和作用域链与执行上下文之间关系

作用域定义了一套变量访问权限规则;执行上下文时按照这个规则下的具体实现。而作用域链是这套规则在代码运行时具体实现,列出了所有需要查找的变量对象。

特性作用域执行上下文
定义词法、静态、在编写代码已经决定运行时、动态
确定时机函数定义时确定函数调用时创建
数量关系这是一套规则一个环境,包含了代码运行时所有需要的信息
比喻房子的蓝图正在使用房间

小结

本章主要讲解作用域和作用域链,以及作用域和作用域链与执行上下文的关系。下章将会讲讲this确定指向的时机,this在不同情况下到底指向谁? 下章见👋🏻👋🏻┏(^0^)┛。