2.5k字带你构建JS执行上下文知识体系(一)

简介: 本文字数2.5k字,请读者耐心看完,会有收获,先赞后看,养成习惯

前言

本文字数2.5k字,请读者耐心看完,会有收获,先赞后看,养成习惯

执行上下文在JS进阶中非常重要的,其内部的原理涉及到JS很多特性,而执行上下文中有很多难以理解的概念,比较抽象,令我们难以下咽,所以本文将以通俗易懂的方式来带大家构建执行上下文的知识体系,下面将分别从概念分类创建执行销毁问题

1.png

概念📚

我根据官方文档以及内部原理对于执行上下文的概念理解大概为:在我们的JS代码开始执行的时候抽象出来的一个隔离环境,该环境通过一些方式存储并控制变量,函数的访问权限。

执行上下文为什么那么重要,因为它的原理牵扯到了很多问题,比如为什么var会发生变量提升现象而letconst不会,又比如作用域是如何控制变量访问的,文章最后会一一为大家解答。

分类😶‍🌫️

上下文分为三种,分别为:全局上下文函数上下文Eval()函数上下文,下面将主要讨论全局上下文函数上下文

  • 全局上下文:全局上下文在最外层,也就会涉及到我们熟知的顶层对象(windowglobal
  • 函数上下文:每个函数都有自己的执行上下文,所以称为函数上下文,函数的执行会触发函数上下文的一些行为

上下文创建🔛

上下文创建我们所需要知道的是创建时机及其生命周期,生命周期包括this绑定,词法环境创建变量环境创建

以伪代码形式来表示上下文的抽象结构,并进一步理解上下文创建发生的三个过程

ExecutionContext = {
  ThisBinding = <this value>,
  LexicalEnvironment = { ... },
  VariableEnvironment = { ... },
}
复制代码

一个上下文初始结构如上,ThisBindingthis绑定指向,LexicalEnvironment为词法环境对象,VariableEnvironment为变量环境对象,下文将具体介绍每个部分的伪代码的具体组成,以助于更好的理解

创建时机

不同类别上下文的创建时机也不同

  • 全局上下文:当脚本被执行,就会立刻创建全局上下文
  • 函数上下文:每当函数被执行,那么上下文会在执行前创建

this绑定

大家经常会用this但是关于this绑定是在哪个阶段进行的没有了解过,其实是在执行上下文创建的过程中将this指向它应该指向的对象,其中全局上下文和函数上下文创建过程中的this绑定不同

  • 全局上下文:其this会指向全局对象(window,global等等)
  • 函数上下文:其this会指向函数执行时的调用者(对象,全局或者其他)

其实大家对于this的机制很熟悉,所以这部分也可以很直接地理解,那么疑问就来了,箭头函数的创建上下文是什么类别的呢?

  • 首先箭头函数的上下文是函数上下文
  • 其次上下文是比较特殊的,它的上下文就是父级(函数or全局)的上下文

箭头函数上下文的特性导致了其箭头函数内部的this是其定义所在的对象,另外也能想明白为什么箭头函数无法使用arguments参数对象,关于箭头函数无法使用参数对象这个问题我们看完下面的词法环境创建后就会理解。

词法环境创建

关于词法环境(LexicalEnvironment对象),掘友只需要记住其作用是解析当前上下文中由constlet声明的变量,将标识符与对应变量或者是函数关联起来即可,上下文的创建于执行都会涉及到词法环境的变化,让我们带着作用往下学习!

词法环境是由一个环境记录器与一个外部环境引用构成

  • 环境记录器:存储变量和函数的实际位置
  • 外部环境引用:在词法环境中以属性值存储外部环境的引用地址,那么就可以访问父级环境的变量等一系列东西

从上面两个组成角度看创建阶段发生了什么,下面这是一个基本词法环境的伪代码(空)

LexicalEnvironment: {  
    EnvironmentRecord: {  
    }  
    outer: <null>  
},
复制代码

LexicalEnvironment代表词法环境,EnvironmentRecord代表环境记录器,outer代表外部环境引用,我们使用let 或者 const声明的变量,会在创建词法环境的过程中解析,解析后并将其标识符存放在环境记录器中,以未初始化的形式保存,比如我声明了一个a变量,这个时候会在EnvironmentRecord存放标识符a,其值为< uninitialized >即未初始化。

LexicalEnvironment: {  
    EnvironmentRecord: {  
         Type: "Object",
         a: < uninitialized >,
    }  
    outer: <null>  
},
复制代码

上面就是一个词法环境创建过程中发生了什么,我们回过头想起词法环境的作用:解析当前上下文中由constlet声明的变量,将标识符与对应变量或者是函数关联起来,那么创建阶段就是在解析声明后,存放标识符,而当前由于是letconst声明,并没有进行初始化,所以其值为< uninitialized >

另外词法环境分为两种,其应用场景不相同

  • 函数环境:函数执行上下文创建函数词法环境,其环境记录器为对象环境记录器,,除此之外其外部环境引用指向其父级上下文(可能是函数也可能是全局)。
  • 全局环境:全局执行上下文会创建全局词法环境,其环境记录器为声明式环境记录器,不包含arguments参数对象,由于没用父级,所以其外部环境引用null



相关文章
|
1月前
|
JavaScript 前端开发
NUS CS1101S:SICP JavaScript 描述:二、使用数据构建抽象
NUS CS1101S:SICP JavaScript 描述:二、使用数据构建抽象
19 0
|
18天前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
19天前
|
Web App开发 JavaScript 前端开发
构建现代Web应用:Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
|
20天前
|
NoSQL JavaScript 前端开发
深入浅出:使用Node.js和MongoDB构建RESTful API
在当今的软件开发领域,构建高效、可扩展的Web服务已成为开发者的重要任务之一。本文将引导读者通过现代JavaScript环境——Node.js,搭配流行的NoSQL数据库MongoDB,一步步构建一个RESTful API。不同于常规的摘要,我们将采用故事化的方式,通过一个虚构的应用“BookFinder”的开发旅程,带领读者理解API设计、数据库交互及安全性考量等关键知识点。无论你是前端工程师希望深化后端知识,还是后端新手寻求实践机会,本文都将提供你所需的指南和启示。
|
21天前
|
缓存 自然语言处理 JavaScript
10分钟带你深入理解JavaScript的执行上下文和闭包机制
JavaScript中的闭包源于计算机科学中的一种理论概念,称为“λ演算”(Lambda Calculus)。λ演算是计算机科学的基础之一,1930年由Alonzo Church提出,它是一种用于描述计算过程的数学抽象模型,也是函数式编程语言的基础。
|
27天前
|
JavaScript 前端开发 数据安全/隐私保护
深入探讨Node.js:构建高性能服务器端应用
深入探讨Node.js:构建高性能服务器端应用
157 1
|
1月前
|
移动开发 JavaScript 前端开发
NUS CS1101S:SICP JavaScript 描述:一、使用函数构建抽象
NUS CS1101S:SICP JavaScript 描述:一、使用函数构建抽象
21 0
|
1月前
|
JavaScript 前端开发 测试技术
【利用AI让知识体系化】TypeScript目标:扩展JavaScript能力(三)
【利用AI让知识体系化】TypeScript目标:扩展JavaScript能力
|
JavaScript 前端开发
JavaScript核心概念之执行上下文和栈
Emm… 这个概念非常的抽象,简单来说呢,就是 JS 在执行某段代码的时候做的一些事情。
67 0
JavaScript核心概念之执行上下文和栈
|
Web App开发 JavaScript 前端开发
JavaScript核心概念之执行上下文和栈
现在想改变一下写作方式,以问答的形式来讲解这些枯燥无味的知识,尽量把每一个为什么都讲透,每个知识点都不迷惑。 桃翁桃翁,问个问题呢,据说 js 里面有个执行上下文,这个概念是个什么东东哦?据说挺重要的,给我科普科普呗。
1130 0

相关产品