JS深入--词法作用域、执行上下文与闭包

最新推荐文章于 2022-01-26 17:01:01 发布

yleavesw

最新推荐文章于 2022-01-26 17:01:01 发布

阅读量494

点赞数 1

分类专栏： # JavaScript 文章标签： js 词法作用域作用域链闭包

本文链接：https://blog.csdn.net/qq_38701868/article/details/117374576

版权

本文深入探讨JavaScript的词法作用域、执行上下文与闭包的概念。词法作用域在函数定义时决定，而执行上下文包括创建和执行两个阶段，形成作用域链。闭包则允许访问另一个函数作用域中的变量，所有函数本质上都是闭包。文中还提供了闭包相关的实例和练习，帮助理解其工作原理。

摘要由CSDN通过智能技术生成

文章目录

个人博客文章同步地址

词法作用域

JS 使用的是词法作用域（或称为静态作用域），函数的作用域在定义的时候就决定了，与词法作用域相对的是动态作用域，动态作用域会在运行时确定的。

一个《JS权威指南》中的例子：

var scope = "global scope";
function checkscope(){
   
    var scope = "local scope";
    function f(){
   
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
   
    var scope = "local scope";
    function f(){
   
        return scope;
    }
    return f;
}
checkscope()();

两段代码的执行结果都是：“local scope”

这也表明了JS 的作用域是静态作用域。

引用《JavaScript权威指南》的回答就是：

JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里，其中的变量 scope 一定是局部变量，不管何时何地执行函数 f()，这种绑定在执行 f() 时依然有效。

执行上下文与词法环境

JS 中有一个执行调用栈和执行上下文的概念，执行栈是一个先进后出的数据结构，JS在执行每个函数的时候都会创建一个函数执行上下文，并将其压入执行栈中，当函数执行完后才将其从执行栈中弹出。执行栈最开始压入的是全局执行上下文，可以看作是最外层的 JS 代码环境。

函数执行上下文是在函数被执行的时候才创建的。

执行上下文的生命周期可以分为两个阶段：

创建阶段
执行阶段

一个执行上下文会由几部分组成：

词法环境（Lexical Environment）
变量环境（Variable Environment），也是一种词法环境
this 绑定（This Binding）

词法环境 & 变量环境中又包含了：

环境记录（EnvironmentRecord），一个存储所有局部变量作为其属性的对象。
指向外部环境的指针（outer），全局环境执行上下文中的 outer 为 null

词法环境和变量环境保存了函数中定义的变量和函数的标识，而指向外部环境的指针串起来简单理解起来就是我们所说的作用域链了。也就是函数在定义的时候（还未执行）的作用域链。

在执行阶段，这三个部分都会被确定，词法环境和变量环境中的变量会被初始化，直到执行阶段才会被真正赋值。

网上文章中经常看到的变量对象（Variable Object，AO）和活跃对象（Activation Object，AO）实际上是 ES1/ES3 中的内容，在 ES5 及以后的版本中已经不存在 AO 及一系列相关概念了，取而代之的是一个叫词法环境（Lexical Environment）的定义。

关于词法环境，大可以参阅：

ECMA-262-5 in detail. Chapter 3.2. Lexical environments: ECMAScript implementation.

csdn ECMA-262-5 词法环境：ECMA实现

在 ES6 中，词法环境和变量环境的区别在于 词法环境用于存储函数和使用 let 和 const 声明的变量，而变量环境仅用于存储使用 var 声明的变量。

对于函数执行上下文来说，函数传入的参数也会被保存在词法环境中。

举个例子：

let a = 20;  
const b = 30;  
var c;

function multiply(e, f) {
     
 var g = 20;  
 return e * f * g;  
}

c = multiply(20, 30);

对应的执行上下文：

// 首先会有一个全局执行上下文
GlobalExectionContext = {
   
  ThisBinding: <Global Object>,

  LexicalEnvironment: {
     
    EnvironmentRecord: {
     
      Type: "Object",  
      // 标识符绑定在这里  
      a: < uninitialized >,  
      b: < uninitialized >,  
      multiply: < func >  
    }  
    outer: <null>  
  },

  VariableEnvironment: {
     
    EnvironmentRecord: {
     
      Type: "Object",  
      // 标识符绑定在这里  
      c: undefined,  
    }  
    outer