执行上下文和调用堆栈

执行上下文和调用堆栈

为顶级代码创建全局执行上下文,即不在任何 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里面有什么

变量环境由组成let、const、var 声明功能

arguments 对象:将传递给 fn 的所有参数存储在其 ec 中。
每个 fn 都有自己的 ec 作为其名称。声明的变量最终位于变量环境中

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

每个 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 environment2. scope chain3. 'this' keyword

范围界定

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

词汇范围:

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

范围:

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

three scopes in js are:1. global scope2. fn scope3. block scope [es6]

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

变量的范围

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

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

## global scope:for top level codefor variables declared outside of any fn or block which are accessible from everywherevariables 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 scopevariables are accessible only inside fn, not outside. else reference erroralso called local scopefn 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 blockscoped 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 - topsecond() ECfirst() ECglobal EC - bottomScope 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 的调用顺序无关。它根本不影响作用域链。
当在当前作用域中找不到变量时,引擎会查找作用域链,直到找到所需的变量。这称为变量查找。

以上就是执行上下文和调用堆栈的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1491592.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 14:05:56
下一篇 2025年12月19日 14:06:10

相关推荐

  • React 开关按钮点击无响应怎么办?

    解决点击“开关”按钮无响应问题 在提供的 react 代码中,“开关”按钮点击事件不响应的原因可能是由于: 事件名拼写错误:请确保 onclick 属性拼写正确,并且事件处理函数名为 handleclick。元素遮盖:检查按钮是否被其他元素遮挡,例如另一个按钮或 div。控制台重写:如果您的代码中对…

    2025年12月24日
    000
  • 如何自定义 details 和 summary 元素的点击范围,仅对图标起作用?

    定制 details 和 summary 元素的点击范围 本文旨在解决如何自定义 details 和 summary 元素的点击范围,使其只对特定区域起作用。 问题描述 一位用户想要创建一个类似树形结构的表格,其中 details 和 summary 元素用于展开和关闭内容。但是,当前点击该行的任何…

    2025年12月24日
    000
  • 如何仅通过点击行最前面的图标展开或隐藏 和 标签中的内容?

    点击范围自定义:细节和概要 在 html 中,ails> 和 标签可以创建可折叠的内容。通常,单击行中的任何位置都可以展开或关闭内容。但是,为了实现更精细的控制,可以通过自定义点击范围来指定仅特定区域可以触发操作。 问题详情 一位开发者希望构建一个类似树形表的内容,但希望只能通过点击行最前面的…

    2025年12月24日
    000
  • 如何仅通过点击图标来控制“和“的折叠和展开?

    自定义details、summary控件的点击范围 目前,使用 和 标签创建树形结构时,整个行的点击都会触发折叠或展开操作。为了仅当点击最前面的图标时才触发此操作,可以进行以下调整: 在summary中添加额外的标签:在 标签中,添加一个额外的标签来包裹图标。 阻止的默认行为:使用css,为设置ev…

    2025年12月24日
    000
  • React 按钮点击事件不响应怎么办?

    react 按钮点击事件不响应 你的代码中遇到了一个问题,导致点击按钮时没有响应。这里有原因和解决方法: 1. 按钮不响应的原因 经过仔细检查,我们在你的代码中没有发现明显的错误。请检查以下可能的原因: 事件名称是否拼写正确(”onclick”)?元素是否被遮盖或禁用?con…

    2025年12月24日
    200
  • React 中“开关”按钮点击无响应,如何排查问题?

    点击“开关”按钮无响应,原因分析 在给出的 react 代码中,“开关”按钮未响应点击事件,可能原因如下: 事件名书写错误:确保 handleclick 方法的 onclick 事件名拼写正确。变量名错误:检查 handleclick 方法的 onclick 事件是否正确引用了 handleclic…

    2025年12月24日
    300
  • 为什么点击开关按钮没有响应?

    点击开关按钮无响应的问题分析 在提供的代码中,按钮点击事件绑定的处理函数 handleclick 的写法没有问题。因此,按钮不响应的原因可能是由于以下因素: 事件名书写错误:请检查 onclick={handleclick} 中的事件名是否拼写正确,应该是 onclick 而不是 onclick。元…

    2025年12月24日
    000
  • 如何使用 SVG 实现动态时间轴的复杂效果?

    SVG 实现动态时间轴 这个问题涉及到实现一个复杂的动态时间轴,其中包含了渐变进度、可点击的小圆点、弹出卡片和高斯模糊效果。 SVG 解决方案 使用 SVG 可以很好地满足这个需求,因为它提供了精确绘制和控制线条、形状和文本的能力。 具体实现 示例代码使用了 SVG 来创建一条渐变的轨迹,代表时间轴…

    2025年12月24日
    000
  • uniapp/vue 中父元素 pointer-events: none 如何让子元素点击事件生效?

    在 uniapp/vue 中解决父元素 pointer-events: none 下子元素点击事件无效的问题 在使用 uniapp/vue 时,当父元素设置了 pointer-events: none 属性后,子元素的点击事件可能会失效。 问题分析 当父元素设置为 pointer-events: n…

    2025年12月24日
    200
  • UniApp/Vue 中如何让父元素 Pointer-Events: None 下的子元素点击生效?

    在 uniapp/vue 中让父元素 pointer-events: none 下的子元素点击生效 当我们设置父元素的 pointer-events 为 none 时,它将阻止鼠标或触摸事件传递给子元素。在这种情况下,底部的点击事件将无法生效。 要解决此问题,可以给需要点击事件的子元素添加 poin…

    2025年12月24日
    200
  • 如何在父元素 `pointer-events: none` 时让子元素点击事件生效?

    如何在父元素 pointer-events: none 下保持子元素点击事件生效? 在使用 uniapp/vue 框架时,遇到这样的问题:给父元素设置 pointer-events: none 后,子元素的点击事件失效了。 要解决这个问题,在需要点击事件的子元素上添加以下 css 样式即可: poi…

    2025年12月24日
    000
  • 您不需要 CSS 预处理器

    原生 css 在最近几个月/几年里取得了长足的进步。在这篇文章中,我将回顾人们使用 sass、less 和 stylus 等 css 预处理器的主要原因,并向您展示如何使用原生 css 完成这些相同的事情。 分隔文件 分离文件是人们使用预处理器的主要原因之一。尽管您已经能够将另一个文件导入到 css…

    2025年12月24日
    000
  • CSS 如何实现鼠标悬停图片变亮,又不影响点击?

    css 如何实现鼠标悬停图片变亮,不影响点击 为了实现给图片增加鼠标悬停变亮效果,很多时候会用到在图片上方增加一个 before 伪类,在悬停时改变其背景颜色。但当图片需要被点击触发事件时,这个 before 伪类却会阻碍点击。 一种解决方法是利用 :hover 选择器,在鼠标经过时直接修改图片的 …

    2025年12月24日
    100
  • React 嵌套组件中,CSS 样式会互相影响吗?

    react 嵌套组件 css 穿透影响 在 react 中,嵌套组件的 css 样式是否会相互影响,取决于采用的 css 解决方案。 传统 css 如果使用传统的 css,在嵌套组件中定义的样式可能会穿透影响到父组件。例如,在给出的代码中: 立即学习“前端免费学习笔记(深入)”; component…

    2025年12月24日
    000
  • React 嵌套组件中父组件 CSS 修饰会影响子组件样式吗?

    对嵌套组件的 CSS 修饰是否影响子组件样式 提问: 在 React 中,如果对嵌套组件 ComponentA 配置 CSS 修饰,是否会影响到其子组件 ComponentB 的样式?ComponentA 是由 HTML 元素(如 div)组成的。 回答: 立即学习“前端免费学习笔记(深入)”; 在…

    2025年12月24日
    000
  • 按钮点击后 `:focus` 伪类效果消失,这是错误吗?

    按钮 :focus 伪类效果为何点击后不消失? 问题中展示了一个按钮,当点击后弹出一个框体,关闭框体后按钮的状态发生了改变,原本 :focus 伪类的样式失去了效果。用户对此表示疑惑,认为这是一种错误现象。 如同输入框中存在的光标一样,按钮 element 进入 focus 状态后便会与键盘交互。按…

    2025年12月24日
    000
  • 点击按钮后为什么它还保持着 :focus 样式?

    为什么按钮点击后保持 :focus 样式? 在您的案例中,按钮点击后仍然保持 :focus 样式,这是由于按钮处于 focus 状态所致。当元素处于 focus 状态时,表示该元素可以与键盘交互,此时会触发某些视觉效果,如边框变色或带有光标。 对于按钮而言,focus 状态的作用包括: 使用空格键触…

    2025年12月24日
    300
  • 如何使用 CSS 伪类选择器实现 span 标签点击后的高亮选中效果?

    如何实现span标签点击后的高亮选中效果? 在网页设计中,span元素经常用于强调或划分文本。为了增强用户体验,开发者常常需要为span元素添加点击事件,让其在被点击时具有突出的视觉效果,例如高亮、边框变色等。本文将介绍如何使用css伪类选择器实现span标签点击后的高亮选中状态。 css伪类选择器…

    2025年12月24日
    000
  • 在使用 JavaScript 实现的 TodoList 中,如何正确判断 Checkbox 点击事件,从而归类任务?

    使用 javascript 实现 todolist,点击 checkbox 后无法正确归类任务 问题描述:在使用 javascript 实现的 todolist 中,点击“正在进行”任务中的 checkbox,无法将任务自动归类到“已完成”任务列表。 原因分析:在提供的代码中,发现有一个单词拼写错误…

    2025年12月24日
    400
  • 如何让 CSS 动画中元素高度变化时实现平滑过渡?

    CSS 过渡动画:元素高度变化动画实现 在 CSS 动画中,一个常见的问题是如何让元素的高度在变化时实现平滑过渡。例如,当元素的高度设置为 auto 时,元素的高度会突然变化。 为了解决这个问题,我们可以采用以下步骤: 1. 禁用 height: auto 立即学习“前端免费学习笔记(深入)”; C…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信