当前位置:首页 > 文章列表 > 文章 > 前端 > 执行上下文和调用堆栈

执行上下文和调用堆栈

来源:dev.to 2024-09-27 08:36:59 0浏览 收藏

golang学习网今天将给大家带来《执行上下文和调用堆栈》,感兴趣的朋友请继续看下去吧!以下内容将会涉及到等等知识点,如果你是正在学习文章或者已经是大佬级别了,都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家!

执行上下文和调用堆栈

为顶级代码创建全局执行上下文,即不在任何 fn 内的代码。因此,首先执行 fn 之外的代码。
fn-decln/exprsn 的 fn 主体内的代码仅在调用时执行。

执行上下文(ec)

一段js执行的环境。
存储一些要执行的代码的所有必要信息,例如局部变量、传递给 fn 的 args。
js 代码始终在 ec 内运行。
无论 js 项目有多大,都只有一个全局 ec。
默认上下文,为不在任何 fn 内的代码创建。
然后代码在全局ec内部执行
顶层代码执行完毕后,执行fns并等待c/bs
对于每个 fn 调用,都会创建一个新的 ec 来执行该 fn。方法也是如此,因为它们也是附加到对象的 fns。
所有这些 ec 共同构成了调用堆栈。
当所有 fns 执行完毕后,引擎等待 cb 到达并执行它们。前任。点击事件回调,由事件循环提供。

ec里面有什么

  1. 变量环境由
  2. 组成
  3. let、const、var 声明
  4. 功能
  5. arguments 对象:将传递给 fn 的所有参数存储在其 ec 中。
    每个 fn 都有自己的 ec 作为其名称。声明的变量最终位于变量环境中

  6. 范围链:
    fns 可以使用作用域链访问 fns 之外的变量。
    包含对当前 fn 外部变量的引用并跟踪作用域链,它存储在每个 ec 中。

  7. 每个 ec 还获得 'this' 关键字。

以上三个都是在执行之前的“创建阶段”生成的。这些是在顶层运行代码所必需的。

对于箭头 fns ec:

我们不会有:arguments 对象、this 关键字。箭头 fn 使用最接近的常规 fn,即上述两个。

参数:类数组对象,包含传递到常规 fn 的所有参数,而不是箭头 fn。

调用栈+内存堆=js引擎

调用栈

ec 相互堆叠的地方,以跟踪我们在执行中的位置。最顶层的 ec 是我们正在运行的 ec。当执行结束时,它会从栈顶移除,控制权会转移到底层 ec。
如果存在嵌套的 fn 调用,由于 js 只有一个执行线程,因此会暂停外层 fn 调用,以便在调用堆栈上返回内层 fn 的执行结果。现在上一个 ec 将成为活动 ec
然后最顶层的 ec 在返回时从调用堆栈中弹出。
调用堆栈中最低的将是全局 ec,最上面的将是按顺序发生的 fn 调用。
确保执行顺序永远不会丢失。
最终程序完成,全局ec也会从call stack中弹出。

js 代码在 ec 内部运行,ec 放置在 call stack 上。

hence, we can say that each ec has:
1. variable environment
2. scope chain
3. 'this' keyword

范围界定

js 引擎如何组织和访问我们的程序变量。
变量存在于哪里
我们在哪里可以访问某些变量,哪里不能。

词汇范围:

js 具有 leical 作用域,这意味着作用域是通过代码中 fns 和块的放置来控制的。
前任。嵌套的 fn 可以访问其父 fn 的变量。

范围:

声明某个变量的空间或环境(fns 中的变量环境)。它是存储在 fns ec 中的变量 env。
对于 fns,var env 和scope 都是相同的。

three scopes in js are:
1. global scope
2. fn scope
3. block scope [es6]

作用域是声明变量的地方。因此,对于 fns 来说也是如此,因为 fns 只是存储在变量中的值。

变量的范围

可以访问某个变量的代码区域。

作用域与变量的作用域有细微的差别。

## global scope:
for top level code
for variables declared outside of any fn or block which are accessible from everywhere
variables in this scope are at the top of scope chain. hence, can be used by every nested scope.
## fn scope:
each fn has creates its own scope
variables are accessible only inside fn, not outside. else reference error
also called local scope
fn decln, exprsn, arrow all three create their own scopes.
only way to create scope using es5 which had only fn & global scope.
## block scope:
introduced in es6, not only fn but {} also create a scope known as block scope which work only for es6 variables i.e let-const types. doesn't work for variables declared with 'var' as its fn scoped.
variables accessible only inside block i.e {} 
this only applies to variables declared with let-const only.
fns are also block scoped in es6 (only in strict mode, should be used)
variables declared using 'var' will be accessible outside the block
scoped to the current fn or the global scope.
var variables only care about fn, they ignore blocks. they end up in nearest fn scope.

每个嵌套作用域都可以访问其外部作用域和全局作用域中的变量。同样也适用于 fn 参数。

如果 fn 在其作用域中找不到该变量,它将查找作用域链以找出其外部作用域中的变量。这个过程称为作用域链中的变量查找。反之则不行,即我们无法从 fn 或外部作用域之外访问嵌套的 fn 变量或作用域。
兄弟作用域无法访问彼此的变量
只有最内层的作用域可以访问其外层的作用域,反之则不然。

每个 fn 都有一个 ec,按照调用 fn 的确切顺序放置在调用堆栈上,其变量位于 ec 内。 global ec 位于调用堆栈的底部

范围链:
这完全取决于代码中 fns 的编写顺序。
与调用 fns 的顺序无关。
作用域链从 ec 获取变量环境。
fn 调用的顺序与作用域链完全无关。

const a = 'Alice';
first();

function first(){
  const b = "Hello";
  second();

  function second(){
    const c = "Hi";
    third();
  }
}

function third(){
  const d = "Hey";
  console.log(d + c + b + a); // Reference Error
}

## Call Stack order:
third() EC - top
second() EC
first() EC
global EC - bottom


Scope Chain:
second() --nested inside--> first() --nested inside--> global scope.
third() is independently defined inside gloabal scope.

Reference Error occurred because both 'c' as well as 'b' cannot be accessed using the scope chain.

摘要:
e-c、var env、cl-sk、scope、scope-chain 都是不同但相关的概念。
范围界定询问变量存在于哪里、我们可以在哪里访问变量、在哪里不能访问变量等问题。
js 中的词法作用域:我们可以访问变量的规则完全基于代码中 fns 和块的写入位置。
每个作用域都可以访问其所有外部作用域的所有变量。这是范围链,是一条单向街道。外部作用域永远无法访问内部作用域的变量。
某个作用域的作用域链等于将所有父作用域的所有 var env 加在一起。
作用域链与 fns 的调用顺序无关。它根本不影响作用域链。
当在当前作用域中找不到变量时,引擎会查找作用域链,直到找到所需的变量。这称为变量查找。

终于介绍完啦!小伙伴们,这篇关于《执行上下文和调用堆栈》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!

版本声明
本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
Litlyx - 漏斗事件简介Litlyx - 漏斗事件简介
上一篇
Litlyx - 漏斗事件简介
如何使用免费词典API
下一篇
如何使用免费词典API
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    508次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    497次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • 笔灵AI生成答辩PPT:高效制作学术与职场PPT的利器
    笔灵AI生成答辩PPT
    探索笔灵AI生成答辩PPT的强大功能,快速制作高质量答辩PPT。精准内容提取、多样模板匹配、数据可视化、配套自述稿生成,让您的学术和职场展示更加专业与高效。
    28次使用
  • 知网AIGC检测服务系统:精准识别学术文本中的AI生成内容
    知网AIGC检测服务系统
    知网AIGC检测服务系统,专注于检测学术文本中的疑似AI生成内容。依托知网海量高质量文献资源,结合先进的“知识增强AIGC检测技术”,系统能够从语言模式和语义逻辑两方面精准识别AI生成内容,适用于学术研究、教育和企业领域,确保文本的真实性和原创性。
    42次使用
  • AIGC检测服务:AIbiye助力确保论文原创性
    AIGC检测-Aibiye
    AIbiye官网推出的AIGC检测服务,专注于检测ChatGPT、Gemini、Claude等AIGC工具生成的文本,帮助用户确保论文的原创性和学术规范。支持txt和doc(x)格式,检测范围为论文正文,提供高准确性和便捷的用户体验。
    39次使用
  • 易笔AI论文平台:快速生成高质量学术论文的利器
    易笔AI论文
    易笔AI论文平台提供自动写作、格式校对、查重检测等功能,支持多种学术领域的论文生成。价格优惠,界面友好,操作简便,适用于学术研究者、学生及论文辅导机构。
    51次使用
  • 笔启AI论文写作平台:多类型论文生成与多语言支持
    笔启AI论文写作平台
    笔启AI论文写作平台提供多类型论文生成服务,支持多语言写作,满足学术研究者、学生和职场人士的需求。平台采用AI 4.0版本,确保论文质量和原创性,并提供查重保障和隐私保护。
    42次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码