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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 本文字数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月前
|
中间件 API
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
41 10
|
2月前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
71 12
|
3月前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
3月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
3月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
88 5
|
3月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
34 0
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
50 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
|
JavaScript 前端开发
JS:一篇文章带你搞懂什么是异步
JS:一篇文章带你搞懂什么是异步

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57