什么是作用域链？

He_wc

于 2023-09-15 09:52:58 发布

阅读量1.1k

点赞数 3

分类专栏： JS 学习文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/he_9a9/article/details/132895023

版权

JS 学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

作用域链（Scope Chain）是指在JavaScript中，变量和函数的访问规则形成的一种链式结构。它决定了在当前执行上下文中查找变量和函数时的顺序。

当访问一个变量或函数时，JavaScript引擎会首先在当前的执行环境中查找，如果找到了对应的标识符，则直接使用；如果没有找到，则会向上一级作用域进行查找。这个向上查找的过程就是作用域链的运行机制。

作用域链的形成规则：

在函数定义时，会创建一个函数作用域（Function Scope）。该作用域包含函数内部声明的所有变量和函数。
每个函数都有一个[[Scope]]属性，保存着一个作用域对象（Scope Object）的集合，其中包含了所有父级作用域的变量和函数。
在函数执行时，会创建一个执行上下文（Execution Context），其中包含了变量对象（Variable Object）和作用域链。
变量对象会保存函数的参数、函数内部声明的变量和函数，而作用域链会复制当前函数的[[Scope]]属性中的作用域对象。
当在函数内部访问一个变量或函数时，JavaScript引擎会先在当前的变量对象中查找，如果找到则使用，否则会去作用域链中的下一个作用域对象中查找，直到找到或遍历完整个作用域链。
作用域链的最顶层是全局作用域，即全局执行环境的变量对象。

通过作用域链，JavaScript实现了词法作用域和变量的访问控制。每个函数都会创建一个新的作用域，并将其与父级作用域链接起来，形成一个作用域嵌套的结构。这种作用域链的机制保证了变量和函数在正确的作用域中被访问和使用。

一、作用域

作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合。

换句话说，作用域决定了代码区块中变量和其他资源的可见性。

举个例子：

function myFunction() {
    let inVariable = "函数内部变量";
}
myFunction();//要先执行这个函数，否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

上述例子中，函数myFunction内部创建一个inVariable变量，当我们在全局访问这个变量的时候，系统会报错，这就说明我们在全局是无法获取到（闭包除外）函数内部的变量。

我们一般将作用域分成：

全局作用域
函数作用域
块级作用域

全局作用域

任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问。

// 全局变量
var greeting = 'Hello World!';
function greet() {
  console.log(greeting);
}
// 打印 'Hello World!'
greet();

函数作用域

函数作用域也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问，不能在函数以外去访问。

function greet() {
  var greeting = 'Hello World!';
  console.log(greeting);
}
// 打印 'Hello World!'
greet();
// 报错： Uncaught ReferenceError: greeting is not defined
console.log(greeting);

可见上述代码中在函数内部声明的变量或函数，在函数外部是无法访问的，这说明在函数内部定义的变量或者方法只是函数作用域。

块级作用域

ES6引入了let和const关键字,和var关键字不同，在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量。

{
  // 块级作用域中的变量
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错：Uncaught ReferenceError: greeting is not defined
console.log(greeting);

二、词法作用域

词法作用域，又叫静态作用域，变量被创建时就确定好了，而非执行阶段确定的。也就是说我们写好代码时它的作用域就确定了，JavaScript 遵循的就是词法作用域。

var a = 2;
function foo(){
    console.log(a)
}
function bar(){
    var a = 3;
    foo();
}
bar()

图示

在这里插入图片描述
由于JavaScript遵循词法作用域，相同层级的 foo 和 bar 就没有办法访问到彼此块作用域中的变量，所以输出2。

三、作用域链

当在Javascript中使用一个变量的时候，首先Javascript引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域，如果在全局作用域里仍然找不到该变量，它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错。

在这里插入图片描述
变量的引用会顺着当前楼层进行查找，如果找不到，则会往上一层找，一旦到达顶层，查找的过程都会停止。

var sex = '男';
function person() {
    var name = '张三';
    function student() {
        var age = 18;
        console.log(name); // 张三
        console.log(sex); // 男 
    }
    student();
    console.log(age); // Uncaught ReferenceError: age is not defined
}
person();

作用域链在 JavaScript 中具有哪些优点和缺点：

优点：

变量隔离：作用域链可以实现变量的局部化和隔离，每个函数内部都有自己的作用域，使得变量在不同的作用域中具有不同的生命周期和可见性。这样可以避免变量冲突和命名污染。
内部函数访问外部作用域：作用域链允许内部函数访问外部函数的变量，即使外部函数已经执行完毕，内部函数仍然可以访问和使用外部函数的变量。这种机制称为闭包，它提供了更大的灵活性和状态保持的能力。
模块化编程：作用域链支持模块化编程，通过将变量和函数封装在不同的作用域中，可以实现代码的模块化和复用。不同作用域之间的变量不会相互干扰，使得代码更加可维护和可扩展。

缺点：

内存管理问题：作用域链的存在可能导致内存占用问题。当一个函数执行完毕后，其作用域链中的变量仍然存在于内存中，只有当不存在对这个变量的引用时，垃圾回收机制才能将其释放。如果存在多层嵌套的作用域和闭包，可能会导致内存占用过大的问题。
性能问题：由于作用域链的查找是一种逐级向上的过程，当作用域链过长时，变量的查找和访问速度可能较慢，从而影响代码的执行性能。因此，在需要高性能的场景下，过于深层次的作用域嵌套和闭包使用需谨慎。
理解和调试困难：作用域链的运行机制相对复杂，对于初学者来说，可能不容易理解和掌握。同时，由于作用域链的存在，调试时追踪变量的值和作用域可能变得更加困难。

综上所述，作用域链在 JavaScript 中提供了灵活性、模块化和状态保持等优势，但也存在内存管理、性能和理解调试方面的一些缺点。在编写代码时，需要根据实际情况综合考虑这些因素，并选择合适的编程方式和优化策略。

应用场景：

变量查找：当在函数内部访问一个变量时，JavaScript引擎会根据作用域链的规则进行变量查找。如果在当前函数作用域中找不到该变量，引擎会按照作用域链的顺序向上层作用域查找，直到找到变量或者到达全局作用域。
函数嵌套：当函数嵌套在其他函数内部时，每个函数都会创建自己的作用域，并形成一个作用域链。这样可以避免不同函数之间的命名冲突，并允许内部函数访问外部函数的变量。
闭包：闭包是指一个函数能够访问并保存了自己定义时所处的词法环境，即使在它被调用之后仍然可以访问这些变量。这是由于闭包函数中的作用域链仍然保持着对自己定义时的作用域的引用。通过闭包，我们可以在函数执行完毕后仍然访问它的内部变量，并使其保持状态。