Learning JavaScript is fun and exciting, especially when you are looking to become a frontend developer. Many frontend frameworks are all written in JavaScript such as React, Angular, and Vue. However, when starting off learning by using these frameworks, the foundations they were built on can easily be overlooked.
学习JavaScript既有趣又令人兴奋，尤其是当您希望成为一名前端开发人员时。 许多前端框架都是用JavaScript编写的，例如React，Angular和Vue。 但是，使用这些框架开始学习时，很容易忽略它们的基础。
One concept that gets junior developers confused is the phenomenon known as hoisting.
使初级开发人员感到困惑的一个概念是称为吊装的现象。
To hoist something means to raise or haul up. A student that puts on their backpack could also be seen as a student who hoisted their backpack onto their shoulder. In JavaScript, hoisting refers to moving declarations (i.e. variables and functions) to the top. This is a default behavior that happens whenever a program gets executed. But what does this mean for your code?
举起东西意味着举起或牵引。 放在背包上的学生也可以看作是将背包悬挂在肩膀上的学生。 在JavaScript中，提升是指将声明(即变量和函数)移到顶部。 这是程序执行时发生的默认行为。 但这对您的代码意味着什么？
Before we move forward I’d like to place a disclaimer. The examples shown here are pulled from a Udemy course by Anthony Alicea called Javascript: Understanding the Weird Parts. I feel Alicea’s examples are straightforward and I’m using them here to illustrate how hoisting works.
在继续前进之前，我想声明一个免责声明。 此处显示的示例来自Anthony Alicea的Udemy课程，该课程称为Javascript：了解怪异的部分 。 我觉得Alicea的示例很简单，我在这里使用它们来说明提升的工作方式。
Okay, let’s do a little exercise. For those who are new to programming, continue to read along as the examples are explained in detail. For those who have a basic understanding of Javascript, take a second and answer this: What do you think the console will output for each block of code?
好吧，让我们做些运动。 对于那些不熟悉编程的人，请继续阅读，详细说明示例。 对于那些对Java语言有基本了解的人，花点时间回答一下：您认为控制台将为每个代码块输出什么？
Examples 1, 2, and 3 (in order) 示例1、2和3(按顺序)Let’s first breakdown each example:
让我们首先分解每个示例：
In example 1, we declare a variable called ‘a’ that is assigned the string ‘Hello World.’ We also have a function called ‘b’ that will console log the string ‘Called function b!’ whenever it is executed. Moving down the code, function b gets invoked followed by a console log of the variable ‘a.’
在示例1中，我们声明一个名为“ a”的变量，该变量被分配了字符串“ Hello World”。 我们还有一个名为“ b”的函数，它将控制台记录字符串“ Called function b！”。 无论何时执行。 向下移动代码，将调用函数b，然后调用控制台控制台记录变量“ a”。
In example 2, we start the code by invoking the function b followed by a console log of the variable ‘a.’ Moving down the code, variable ‘a’ gets declared and assigned the string ‘Hello World.’ Finally, function b is created. Variable ‘a’ and function ‘b’ are both the same in example 1 and 2.
在示例2中，我们通过调用函数b以及变量“ a”的控制台日志来启动代码。 向下移动代码，声明变量“ a”并将其分配给字符串“ Hello World”。 最后，创建函数b。 示例1和2中的变量'a'和函数'b'都相同。
In example 3, the code looks exactly the same as example 2, however, the variable declaration of ‘a’ is missing.
在示例3中，代码看起来与示例2完全相同，但是缺少变量声明“ a”。
Let’s take a look at each example’s output:
让我们看一下每个示例的输出：
Console output of examples 1, 2, and 3 (in order) 控制台输出示例1、2和3(按顺序)In example 1, the string ‘Called function b!’ is logged to the console first followed by the variable ‘a’s assigned value ‘Hello World.’
在示例1中，字符串“ Called function b！” 首先记录到控制台，然后是变量“ a”的分配值“ Hello World”。
In example 2, the string ‘Called function b!’ is logged to the console first followed by an undefined statement.
在示例2中，字符串“ Called function b！” 首先记录到控制台，然后是未定义的语句。
In example 3, the string ‘Called function b!’ is logged to the console first followed by a ReferenceError that says ‘a is not defined.’
在示例3中，字符串“ Called function b！” 首先记录到控制台，然后是出现“未定义a”的ReferenceError。
Did you get it right? In each example, function b is successfully executed with ‘Called function b!’ printed to the console first. However, the variable a’s value is different in each example. This is known as the hoisting phenomenon.
你说对了吗？ 在每个示例中，功能b均成功通过“调用功能b！”执行。 首先打印到控制台。 但是，每个示例中变量a的值都不同。 这被称为提升现象。
When a program is executed, JavaScript (JS) begins something called the Execution Context. This is basically JS’s way of setting up the environment based on the code you write. A compiler will go through your code, look for keywords JS has reserved, and set up the environment based on how it interprets your code. It is important to point out that when a compiler runs through your code it recognizes where you create variables and functions. JS is doing many things during the execution context to get your code ready for success. What we will focus on in this blog are the parts that contribute to the hoisting phenomenon. It happens during the two phases of the execution context: the creation phase and the execution phase.
执行程序时，JavaScript(JS)开始执行执行上下文。 基本上，这是JS根据您编写的代码设置环境的方式。 编译器将遍历您的代码，查找JS保留的关键字，并根据其解释代码的方式设置环境。 重要的是要指出，当编译器在您的代码中运行时，它会识别出在哪里创建变量和函数。 JS在执行上下文期间正在做很多事情，以使您的代码为成功做好准备。 在此博客中，我们将重点介绍导致起吊现象的部分。 它发生在执行上下文的两个阶段：创建阶段和执行阶段。
During the creation phase, functions and variables are allocated memory space. However, only functions are set up in its entirety — function name, arguments, and code logic. Variables are created but are not assigned its value. Instead, it is initially assigned to a special word in JS known as undefined. This is simply a placeholder for a variable that says “I have space allocated for this variable but I have not assigned it to anything you declared yet.” The variable is assigned what you declared in your code after the creation phase and during the execution phase.
在创建阶段，将为函数和变量分配内存空间。 但是，仅完整地设置了函数-函数名称，参数和代码逻辑。 变量已创建，但未分配其值。 相反，它最初被分配给JS中一个特殊的单词undefined 。 这只是一个变量的占位符，上面写着：“我已经为该变量分配了空间，但尚未将其分配给您声明的任何对象。” 为变量赋予你在创作阶段之后你的代码，并在执行阶段声明。
During the execution phase, JS will go through the code again but this time line by line, otherwise known as synchronous behavior. It has all the variables and functions in its memory space (created during the creation phase) and ready to do something with them. So when the variable is declared during the creation phase, it is not assigned the value you wrote for it until the execution phase. This is seen in example 2, when the console prints out undefined instead of ‘Hello World.’
在执行阶段，JS将再次遍历代码，但是这段时间逐行执行，否则称为同步行为。 它在其存储空间(在创建阶段创建)中具有所有变量和函数，并准备对其进行处理。 因此，在创建阶段声明变量时，直到执行阶段才为变量分配您为其编写的值。 从示例2中可以看到这一点，当控制台打印出未定义的内容而不是“ Hello World”时。
In example 3, a ReferenceError is given because the variable ‘a’ was never created during the creation phase. There is no memory space allocated for this variable because it was never declared in the first place. This is where junior developers are confused because ‘undefined’ does not mean ‘not defined’ as it does in English. Undefined is a reserved word in JS to serve as a placeholder until it gets replaced by an assigned value.
在示例3中，给出了ReferenceError，因为在创建阶段从未创建变量'a'。 没有为该变量分配内存空间，因为它从未被声明过。 这是初级开发人员感到困惑的地方，因为“未定义”并不意味着“未定义”，就像英语一样。 未定义是JS中的保留字，用作占位符，直到被分配的值替换为止。
So while hoisting means to raise or haul up, it can be seen in JavaScript as raising up the variables and functions to the top of your code during the creation phase. This is where memory space is allocated to them, waiting to be used during the execution phase.
因此，虽然提升意味着提升或提升，但在JavaScript中可以将其视为在创建阶段将变量和函数提升到代码的顶部。 这是为它们分配内存空间的位置，等待在执行阶段使用。
Hope this helps you understand the hoisting phenomenon. I will be doing a series of “Understanding Javascript” concepts so please follow my blog if you’d like to read more content like this.
希望这可以帮助您了解吊装现象。 我将做一系列的“理解Javascript”概念，因此，如果您想阅读更多类似的内容，请关注我的博客。
Happy coding 😄
快乐编码😄
翻译自: https://medium.com/@acdelvalle89/understanding-javascript-the-hoisting-phenomenon-cd8b15f6663b
相关资源：微信小程序源码-合集6.rar