php中文网

JavaScript 的工作原理:了解执行上下文(针对初学者的简化版)

php中文网

javascript 是世界上最流行的编程语言之一。但它在幕后是如何工作的呢?让我们使用简单的概念和伪代码逐步分解它,以便任何初学者都能理解。


什么是 javascript?

javascript 是一种在浏览器(如 chrome、firefox 或 safari)或服务器上(使用 node.js 等工具)运行的编程语言。它用于使网站具有交互性。当您在浏览器中看到动画、按钮或游戏时,javascript 正在发挥作用。

要了解 javascript 的工作原理,我们需要了解两件事:

  1. 执行上下文
  2. 调用堆栈

什么是执行上下文?

执行上下文就像一个盒子,javascript 保存运行代码所需的一切。这包括:

立即学习“Java免费学习笔记(深入)”;

  1. 变量(您存储的数据,例如 x = 5)
  2. 函数(执行某些操作的代码片段,例如 showmessage())
  3. 要执行的代码(您编写的实际指令)

执行上下文主要有两种类型:

  1. 全局执行上下文(gec):这是 javascript 开始运行代码的默认框。就像主舞台一样。
  2. 函数执行上下文(fec):这是每当调用函数时创建的新框。它仅适用于该功能。

分步示例

想象一下你写了这个简单的伪代码:

// global code
var name = "alex";
function greet() {
    var message = "hello, " + name;
    return message;
}
greet();

以下是 javascript 的逐步执行过程:


1.创建全局执行上下文

程序启动时,javascript 会自动创建一个全局执行上下文(gec)

  • 内存(可变环境):

    • name = undefined(暂时占位符)
    • greet = 函数定义(存储greet()的代码)
  • 代码执行阶段:

    • 它逐行运行全局代码:
    • var name = "亚历克斯"; → 更新内存:name =“alex”
    • 遇到greet(); → 调用greet函数。

2.创建函数执行上下文

当调用greet()时,javascript会专门为greet创建一个新的函数执行上下文(fec)

  • 内存(可变环境):

    • message = undefined(greet 中变量的占位符)
  • 代码执行阶段:

    • 运行问候函数:
    • var message = "你好," 名字; → 将“hello,”与姓名(“alex”)组合,因此消息 =“hello, alex”。
    • 返回消息; → 回复“你好,亚历克斯”。

3.清理并返回

greet 函数完成后,其 函数执行上下文 就会被移除(删除)。程序返回到全局执行上下文


执行上下文会发生什么?

javascript 使用调用堆栈来跟踪所有这些执行上下文。

什么是调用堆栈?

调用堆栈就像一堆盘子:

  1. 全局执行上下文位于底部(第一块板)。
  2. 每次调用函数时,都会在顶部添加一个函数执行上下文(一个新板)。
  3. 函数完成后,其上下文将被删除(板被取下)。

用伪代码可视化

以下是 javascript 处理我们代码的方式:

  1. 初始全局代码(创建 gec):

    gec:
      memory: { name: undefined, greet: function }
      code: execute global lines
    
  2. 全局执行更新(运行代码):

    gec:
      memory: { name: "alex", greet: function }
      code: encounters greet()
    
  3. 调用greet()(创建fec):

    call stack:
      1. gec
      2. fec for greet()
    fec (greet):
      memory: { message: undefined }
      code: execute function lines
    
  4. 运行greet()并返回:

    fec (greet):
      memory: { message: "hello, alex" }
      return value: "hello, alex"
    call stack after return:
      1. gec
    
  5. 完成执行:

    call stack:
      empty (program ends)
    

要记住的关键事项

  1. 执行上下文就像 javascript 运行代码的容器。每个程序都以全局执行上下文开始,每个函数都有自己的函数执行上下文
  2. 调用堆栈跟踪正在运行的内容。最后添加的内容是第一个删除的内容(lifo:后进先出)。
  3. 当函数完成时,javascript 会进行清理。这就是为什么函数的内存不会永远保留的原因。

为什么这很重要?

理解执行上下文可以帮助您编写更好的程序:

  • 您将知道为什么变量在某些地方可用而在其他地方(范围)不可用。
  • 您将理解诸如“未定义”变量之类的错误。
  • 您将了解函数如何交互以及它们返回值的原因。

挑战自己

尝试在脑海中运行这个伪代码:

var x = 10;
function multiply(y) {
    return x * y;
}
var result = multiply(5);

问自己:

  1. 全局执行上下文中有什么?
  2. 调用multiply() 时会发生什么?
  3. 结果的最终值是多少?

通过掌握执行上下文,您将为解决最棘手的 javascript 问题奠定坚实的基础!

以上就是JavaScript 的工作原理:了解执行上下文(针对初学者的简化版)的详细内容,更多请关注php中文网其它相关文章!

上一篇:Web 组件就是 Web 组件

下一篇:返回列表