Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript 执行线程图解

JavaScript 执行线程图解

作者头像
4O4
发布于 2022-04-25 11:41:47
发布于 2022-04-25 11:41:47
53200
代码可运行
举报
文章被收录于专栏:404404
运行总次数:0
代码可运行

这是研究 JavaScript 内部工作方式的系列文章的第一篇。我会尽力使它变得有趣,并且不让你感到厌烦,因为我知道这些东西有时会变得非常乏味!

想象一下,飞行员知道是飞机怎样飞行的,而我们每天运行 JavaScript 代码,但知道它是如何运行吗?

谈谈 JavaScript 执行线程

先让我们敲出一些简单的 JavaScript 代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = 3;
function addOne(x) {
  const result = x + 1;
  return result;
}
const output = addOne(num);

上面的代码没什么让你值得兴奋的,但是可以很好地帮助我们演示执行线程。

当执行 JavaScript 时,代码会逐行(单线程)执行,因此在我们的代码中,要被执行的第一行是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = 3;

下一个问题是,执行这行代码会发生什么? num 存储在哪里?

num 存储在全局内存/执行上下文中,看起来像这样

然后进入下一行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function addOne(x) {

请务必注意,我们在这里声明了一个函数,但是还不执行。因此,我们将函数名称与整个函数的值一起存储。

上面的 - f - 是整个函数的简写。

现在转到下一行,有人可能认为下一行是函数的主体,但是由于我们仅声明函数而不是运行它,因此要运行的下一行是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const output = addOne(num);

与上面类似,我们将标签 output 发送到内存,但还没有值,因为我们必须运行函数。

有趣的来了!接下来执行 addOne 函数。

当一个函数被执行时,它被添加到 call stack(调用栈)中。调用堆栈的底部总是有 global/main ,我们现在将 addOne(3) 入栈。

我们还为该函数创建一个 execution context (执行上下文)。函数中声明的任何变量都会被添加到函数的执行上下文中。

将要添加的第一个变量是函数的参数,在本例中为 x

现在,我们移至下一行并将 result 存储在 execution context 中。

在下一行,用了 return 关键字来标记函数的结束。我们从调用栈中弹出 addOne(),并给 output 赋值为4。

所以首先从 call stack 中弹出 addOne

现在是最后一步,将值 4 分配给 output 变量。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
江哥带你玩转C语言 | 14 - 结构体-枚举-共用体
struct Student { int age; struct Student stu; };
极客江南
2021/07/11
8140
C语言入门系列之10.结构体和共用体
引入: 有时需要将不同类型的数据组合成一个有机的整体,以便于引用。 例如,一个学生有学号、姓名、性别、年龄、地址等属性,需要定义int num; char name[20]; char sex; int age; int char addr[30];等属性,如下:
cutercorley
2020/07/23
1.3K0
C语言入门系列之10.结构体和共用体
C语言结构体指针_C语言函数返回结构体指针
问题定义:有时需要将不同类型的数据组合成一个有机的整体,以便于使用,就类似于sql中的存储一样,随着语言层次的增高封装性是越来越大的。如:
全栈程序员站长
2022/11/01
3.9K0
C语言结构体指针_C语言函数返回结构体指针
全国二级C知识点总结6-结构体、链表、共用体
l 类型定义形式: typedef 旧类型名 新类型名;(例如:typedef double D ; )
用户6755376
2019/12/02
1K0
C语言结构体类型定义+结构体变量的定义与使用及其初始化+结构体变量作为函数参数
在结构体类型定义好的情况下,注意是结构体类型定义好的情况下,才能定义结构体变量。 比如:
Twcat_tree
2022/11/30
2.8K0
C语言结构体类型定义+结构体变量的定义与使用及其初始化+结构体变量作为函数参数
C语言结构体
系统提供的类型:int double float char long 数组,指针...
岳泽以
2022/10/26
2.1K0
C语言结构体
C++ 炼气期之结构体
随着计算机向着不同领域的延伸,数据的概念已经不仅局限于数值型数据,计算机需要处理大量的非数值类型数据。如在企业级程序的开发过程中所涉及到的工作流信息,几乎都是非数值型数据。
一枚大果壳
2022/08/23
7811
C++ 炼气期之结构体
C语言结构体数组、指针与函数-学习二十八
本文最后更新于2022年02月24日,已超过4天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
XG.孤梦
2022/03/01
1.1K0
C语言结构体数组、指针与函数-学习二十八
【重新认识C语言----结构体篇】
在C语言编程中,结构体(Structure) 是一种非常重要的复合数据类型。它允许开发者将多个不同类型的变量组合成一个逻辑单元,从而更高效地管理复杂数据。无论是实现链表、树等数据结构,还是描述现实世界中的实体(如学生、商品等),结构体都扮演着核心角色。本文将详细讲解结构体的定义、使用及高级特性,帮助读者彻底掌握这一关键概念。
用户11456817
2025/02/08
1640
结构体与指针(一)
在学习数据结构的时候,会经常使用到结构体。今天分享的内容是结构体与指针,因为结构体和指针本身的内容并不是太多,所以今天的内容还包括了链表的实现。希望可以通过这篇博客,让大家熟悉结构体与指针,以及链表的实现。
ZackSock
2020/02/14
7290
开讲啦:Chap 09 用户自己建立数据类型
与int a,b;类似,定义完成后,student1和student2即为struct Student类型的变量。
石璞东
2021/10/13
4350
结构体和共用体(C语言)
结构体在创建时,按照结构体成员变量占的内存分配。而共用体则按照共用体中,所占内存最大的变量分配内存。所以,共用体变量只能单个使用,而结构体可以所有变量一起使用。
ZackSock
2020/01/22
2K0
C/C++基础入门(持续更新中)
在一些时候(比如某个函数接受 int 类型的参数,但传入了 double 类型的变量),我们需要将某种类型,转换成另外一种类型。
浪漫主义狗
2022/09/23
4.5K0
C/C++基础入门(持续更新中)
【C语言笔记】结构体
我们都知道C语言中变量的类型决定了变量存储占用的空间。当我们要使用一个变量保存年龄时可以将其声明为int类型,当我们要使用一个变量保存某一科目的考试成绩时可以将其声明为float。
正念君
2019/06/26
2.3K0
【C语言笔记】结构体
C语言——结构体类型(二)【结构体内存对齐,结构体数组】
🔍问题引导: 我们都知道sizeo(变量类型))可以得到一个变量所占内存的大小,那么,请看下面这串代码👇🏻
用户11029137
2024/03/19
6800
C语言——结构体类型(二)【结构体内存对齐,结构体数组】
C语言程序设计核心详解 第九章 结构体与链表概要详解
1.在定义结构体变量的同时可以将各成员的初值按顺序放在一对花括号中,来进行对结构体变量的初始化。若初值个数多于成员个数则出错,若初值个数少于成员个数,则多余成员自动赋0.
小徐在进步
2024/10/06
3220
C语言程序设计核心详解 第九章 结构体与链表概要详解
C语言 | 结构体指针
在C语言中,指向结构体对象的指针变量既可以指向结构体变量,也可指向结构体数组中的元素。
小林C语言
2021/05/06
2.3K0
C语言 | 结构体指针
C++基础入门_C语言入门基础
​ Visual Studio是我们用来编写C++程序的主要工具,我们先将它打开
全栈程序员站长
2022/09/30
5.9K0
C++基础入门_C语言入门基础
程序员C语言快速上手——高级篇(九)
这在实际操作中非常麻烦,我们需要一种新的数据类型,将这些信息存放在一起,而不是这样分散的去表示和操作。数组显然是无法满足这个需求的,因为数组只能存放相同的数据类型,一个学生的信息,可能需要多种数据类型来表示,比如考试成绩,这个就需要float类型来表示。
arcticfox
2019/07/18
1.7K0
剖析c语言结构体的高级用法(一)
在写这篇文章之前,说实话,自身对结构体的用法,只会两点——就是点访问式和指针式访问结构体内部成员。这对一个搞底层的工程师来讲,显然实在太low了。不妨读者看到这里,可以停下来思索一下,看看自己对c语言结构体掌握了多少。下面是我这几天结合自己的学习而总结的一篇算比较全的关于结构体的用法,欢迎大家来吐槽。
用户6280468
2022/03/21
5400
剖析c语言结构体的高级用法(一)
推荐阅读
相关推荐
江哥带你玩转C语言 | 14 - 结构体-枚举-共用体
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验