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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 本文字数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



相关文章
|
7天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
10天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
29 3
|
2天前
|
Web App开发 缓存 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第11天】本文将引导开发者探索如何利用Node.js和Express框架搭建一个高效的后端服务。文章不仅深入讲解了这两个工具的核心概念,还通过实际示例展示了它们的强大功能和易用性。读者将学会如何处理HTTP请求、设计RESTful API以及优化应用性能。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识,帮助你在后端开发领域更进一步。
|
14天前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。
|
11天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第34天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
14天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第31天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
15天前
|
JavaScript 前端开发 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第30天】本文是一篇针对初学者的Node.js教程,旨在引导读者通过实践学习如何利用Node.js和Express框架快速搭建一个RESTful API。文章将介绍Node.js的基本概念、环境配置、以及如何使用Express框架创建API端点。此外,我们还将探讨如何进行数据操作和错误处理,最终实现一个简单的待办事项管理系统API。通过本教程的学习,读者将能够掌握构建RESTful API的基础技能,并了解如何将其应用于实际项目开发中。
|
JavaScript 前端开发
JavaScript核心概念之执行上下文和栈
Emm… 这个概念非常的抽象,简单来说呢,就是 JS 在执行某段代码的时候做的一些事情。
85 0
JavaScript核心概念之执行上下文和栈
|
Web App开发 JavaScript 前端开发
JavaScript核心概念之执行上下文和栈
现在想改变一下写作方式,以问答的形式来讲解这些枯燥无味的知识,尽量把每一个为什么都讲透,每个知识点都不迷惑。 桃翁桃翁,问个问题呢,据说 js 里面有个执行上下文,这个概念是个什么东东哦?据说挺重要的,给我科普科普呗。
1148 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
69 2