前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 执行线程图解

JavaScript 执行线程图解

作者头像
4O4
发布2022-04-25 19:41:47
4520
发布2022-04-25 19:41:47
举报
文章被收录于专栏:404404

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

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

谈谈 JavaScript 执行线程

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

代码语言:javascript
复制
const num = 3;
function addOne(x) {
  const result = x + 1;
  return result;
}
const output = addOne(num);

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

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

代码语言:javascript
复制
const num = 3;

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

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

然后进入下一行:

代码语言:javascript
复制
function addOne(x) {

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

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

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

代码语言:javascript
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 谈谈 JavaScript 执行线程
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档