JavaScript Topic One: Variable Promotion and Precompilation

Table of Contents

• Foreword
• 1. Interesting Phenomenon
• 2. Pre-parsing of Js
• 3. Priority between promotions
• 4. ES6

• Write at the end

(Related free learning recommendations:javascript video tutorial)

Preface

This article is the "JavaScript Specialized Advanced Series" 》The first article, the whole series may include, for example:

• anti-shake throttling
• flattening
• deep and shallow copy
• array Deduplication
• Sort
• …

and other classic special knowledge points. They are namedSpecialized Advancedbecause they have a high "appearance rate" on many occasions. In order to avoid becoming agoogle content searcher, the "JavaScript Specialized Advanced Series" was born ! ! !

1. Interesting phenomenon

According to common sense, JavaScript code must be executed from top to bottom. You need to output a string, and of course you need to declare avariableto save the string type in advance. If I can understand the profound truth, I read the following code.

1.1 The opening I thought

var str = '123';console.log(str); // 123

Let’s change the position of the code and look at it again:

console.log(str); // undefinedvar str = '123';

I seem to have found a pattern!!!

After I read the first two pieces of code and conducted "deep thinking", I seemed to have found the pattern, that is: in the function after the current code block, before variable declaration and initializationWhen using variables, you will not get the correct value.

1.2 This is actually the case

I came here with the above "conclusion"

var val = '余光';(function(){ console.log(val); // 余光})();

As expected! , aftervariable declaration and initializationJesus can’t stop me from getting the value of val, I said it! ! !

When I saw the following piece of code, I was already shaken. This matter must be strange.

var val = '余光';(function(){ console.log(val); // undefined var val = '测试';})();

Ps: If you have questions about executing functions immediately, you might as well take a look at "JavaScript's In-depth Understanding of Immediately Invoked Function Expressions (IIFE)"~

This...I'm scared, what is it? What causes this phenomenon to occur? How does Js handle it?

2. Js pre-parsing

In the current scope, no matter where the variable is declared, it will be done behind the scenes An invisible movement.

Note:Only statements are "moved". That is, declaration and assignment are passively separated at some point. And this invisible movement is actually the parsingof Js during the compilation phase.

name = '余光'; // 未添加关键字（未声明），name为全局变量，，即window.name = '余光'var name; // 再次声明name，此时name未进行初始化，它的值是undefined吗？console.log(name); // ？

invisible movementIt happens during Js pre-parsing (compilation).

variables## All declarations including # andfunctionswill be processed first before any code is executed. When you seevar a = 2;, you might think that this is a statement. But JavaScript actually sees this as two declarations: var a; and a = 2;.

• The second assignment statement will be left in place waiting for the execution phase.
• That is, the code is written like this:

// 我们看到的代码：var name = '余光';

But Js will parse it into:

// 声明(Declaration)var name; // 声明但未初始化，所以分配 undefined// 初始化(Initialization)name = '余光'; // 初始化（赋值）

So a piece of code in this summary should be analyzed like this:

var name; // 声明name提到作用域顶部，并被分配了一个undefinedname = '余光'; // 进行初始化操作console.log(name); // '余光'

2.2 Note: Only the declaration is promoted

. So there will be the following problem:

foo();function foo(){ console.log(name); // undefined var name = '余光';}

2.3 Each scope will be promoted

Still the above code:

foo();function foo(){ console.log(name); // undefined var name = '余光';}

Actually, it looks like this when compiling:

function foo(){ var name; // 声明 console.log(name); // undefined name = '余光'; // 初始化}foo(); // 函数执行

Now that we know that

andfunctionswill be promoted , how do they judge priorities?

3.1 函数会被首先提升，然后才是变量

foo();var foo; // 1function foo(){ console.log('余光');}foo = function(){ console.log('小李');}

function foo(){ console.log('余光');}foo(); // 余光foo = function(){ console.log('小李');}

foo();var foo = function(){ console.log(1);}// TypeError: foo is not a function

// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;