JavaScript 真正的工作原理，你知道吗？

你是否只是听说过JavaScript，但是不了解它的基本原理？不知道后台究竟发生了什么？在面试中遇到麻烦了吗？不用担心，这篇文章将帮助大家了解JavaScript的一些基本概念。你可能会，也可能不会在日常活动中使用这些概念，但是如果你对JavaScript世界感到好奇并想深入了解，那么我相信你会发现这些内容真的很有趣。

这篇文章将涵盖JS最基本的主题之一——执行上下文。好的，事不宜迟，让我们开始吧。

你听说过执行上下文吗？

执行上下文是JS中最基本的概念之一。可以这样说：

JS中的所有东西都在执行上下文内发生的。

举个例子来便于理解。下面的代码用于找到给定数字的平方。

var n = 10;function square(number) {var ans = number * number;return ans;
}var squareOf5 = square(5);var squareOfn = square(n);

当我们运行JS程序时，就会创建一个执行上下文。此过程涉及两个阶段。第一阶段称为内存创建（Memory Creation）阶段，第二阶段称为代码执行（Code Execution）阶段。

在内存创建阶段，JS解析程序并查找变量和函数定义。如果遇到变量，就分配一个命名为undefined的特殊关键字，如果是函数，则JS会存储整个函数定义的副本。（查看上面的图表）。

注意：undefined不是一个值，而是JS中使用的特殊关键字，用于指示未定义或未被分配任何值的变量。

第二阶段是代码执行阶段。在此阶段，JS从头开始并以同步的方式运行（一次一行代码）。

注意：这可能成为你的第一个面试问题。“JavaScript是同步语言还是异步语言？”，我想现在你应该知道答案了。

var n = 10;function square(number) {var ans = number * number;return ans;
}var squareOf5 = square(5);var squareOfn = square(n);

在第1行中，n的值设置为10，因此JS删除了关键字undefined，并将值设置为10。现在，控制权转到下一个代码块。由于这是一个函数定义，因此这里没有代码执行，这样JS就跳过该函数定义并将控制移至第8行。一旦JS遇到函数调用square(5)，就会创建一个新的执行上下文，如下所示：

现在，针对该函数调用重复执行上下文的整个过程。让我们看看函数块的执行是如何发生的。

内存创建阶段有两个变量，number是函数参数，ans是本地变量。两者的值都将设置为undefined。在当前执行上下文的第二阶段，JS从此函数声明的第一行开始。由于我们在函数调用中将5作为参数传递，因此5被作为值分配给变量number。然后控制权转到下一行。

在下一行代码中，JS执行number * number，并将操作结果（25）存储在变量ans中。现在，可以看到下一行有return关键字。JS一旦遇到return关键字，就会将控制权移回到父级执行上下文。由于我们返回的是ans的值，因此将返回值25并将其存储在变量squareOf5中。记住：
当控制权移回到进行函数调用的位置时，新创建的执行上下文将被删除。
查看下图:

现在，控制权转到下一行，这次又是函数调用，于是执行上下文的整个过程再次重复一遍。
JS如何跟踪这些执行上下文？

这是通过称为调用堆栈（Call Stack）或执行堆栈（Execution Stack）的方式发生的。它跟常规堆栈差不多，但主要用于跟踪执行上下文。

EC的代码执行部分，每当JS引擎遇到函数调用时，它都会创建一个新的执行上下文并将其推送到调用堆栈。
引擎执行其执行上下文位于堆栈顶部的函数。完成此函数后，其执行堆栈就会从堆栈中弹出，然后继续执行脚本的其余部分。
写在最后的话

现在你应该对执行上下文有了更多的了解。如果用简单的语言来解释执行上下文的重要性，那么可以说执行上下文是JS的核心。
顺便要说明的是，本文并没有深入讲太多，但可以涵盖很多概念。、

感谢大家阅读本文。

JavaScript 真正的工作原理，你知道吗？相关推荐

JavaScript定时器的工作原理（翻译）
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
一家之言：说说 JavaScript 计时器的工作原理
看下面内容之前,看一小段代码,如果读者能说出代码的用意,那就没必要往下看了,因为你都懂.setTimeout(function(){ /* Some long block of code- */ se ...
说说 JavaScript 计时器的工作原理
原文:John Resig http://ejohn.org/blog/how-javascript-timers-work/ How JavaScript Timers Work 从基础的层面来 ...
JavaScript中this工作原理
** this是JavaScript语言中的一个关键字在JavaScript语言中,this可以是全局对象.当前对象或其它任意对象. 在AJAX中,this指向Window全局对象. 而在Backb ...
javascript引擎工作原理的初步了解
From:https://segmentfault.com/a/1190000014242281 Javascript引擎是能运行javascript代码的程序或解释器.做为前端开发人员,了解java ...
js 数组实现完全树_JavaScript的工作原理：解析、抽象语法树（AST）+ 提升编译速度5个技巧
摘要: JS的"编译原理". 原文:JavaScript的工作原理:解析.抽象语法树(AST)+ 提升编译速度5个技巧作者:前端小智 Fundebug经授权转载,版权归原作者所有 ...
JavaScript 是如何工作的：解析、抽象语法树（AST）+ 提升编译速度5个技巧
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
JavaScript是如何工作的：引擎，运行时和调用堆栈的概述！
JavaScript是如何工作的:引擎,运行时和调用堆栈的概述! 摘要: 理解JS执行原理. 原文:JavaScript是如何工作的:引擎,运行时和调用堆栈的概述! 作者:前端小智 Fundebug经 ...
javascript原理_JavaScript程序包管理器工作原理简介
javascript原理 by Shubheksha 通过Shubheksha JavaScript程序包管理器工作原理简介 (An introduction to how JavaScript pa ...

JavaScript 真正的工作原理，你知道吗？

JavaScript 真正的工作原理，你知道吗？相关推荐

最新文章

热门文章