Foreword
New to JavaScript, when they know that JavaScript is executed sequentially, as is parsed DOM tree browser of the same process, parsing the DOM structure of the time, if you encounter JS script or outreach script will stop parsing, continue to download after the script, execute the script, and then parse DOM.
However, they so often encounter problems.
See the following code, and an output:
var name; console.log(name); // undefined name = 'tom'; age = 10; var age; console.log(age); // 10
The above code so that we had doubts, we just declare the name of the time, print out the value is undefined, it stands to reason, then re-declared age, the value of age should also undefined fishes, but it is output to the 10. Is this how it's going children?
Our common explanation is met with variable lift.
And such a situation, we will see in the function, see the code below:
log();
console.log(name);
var name = 'tom';
function log() {
console.log('this is log');
}
What is the output of the above code?
Output: the this IS log undefined
Why would such a situation it? Our common explanation is that enhance the function declaration.
And for both cases, is to enhance the mechanisms we often encounter, that is, we often say Hoisting.
But merely a lifting mechanism to explain this phenomenon, it still felt foggy, may also unclear before if I feel vigorous Oh, sigh, and then no longer ignore such things, then why on earth is there such a situation?
JavaScript is how it was compiled
Sometimes we think, how some JS code is executed it? In fact, before JS code is executed, there is usually a compilation process.
This compilation process is very complicated, but in general, can not escape the steps of the compilation process, but JavaScript is at this step in the code is optimized processing.
First, lexical analysis
Lexical analysis is primarily a program code block is decomposed into meaningful, to facilitate decomposition of code blocks do resolve.
For example, var age = 10; this will be broken down into a code var, age, =, 10,;. This is a five lexical units.
These units after the analysis is complete, it will call to the parser generates the corresponding AST (abstract syntax tree).
Second, resolve lexical unit
Parsing lexical unit, in order to generate AST, AST So in the end what is it, we look at a piece of code parsing and generation of AST.
Likewise var age = 10; this code is parsed period became parser tree structure, this structure, the abstract syntax tree AST. You can view this website produced by AST: AST parser
The abstract syntax tree, but also can be converted into executable code. This relates to the third stage of compilation.
Third, generate executable code
Generating executable code process, AST and then converted into the equivalent of browser-executable code, or a variety of language engine executable code.
Such as our common babel, it allows us to use grammar ES6 is to develop a program, in fact, rely on babel compiler, our ES6 code into AST ES6, and then convert the ES6 the AST into AST ES5 or ES3 of AST, Finally, AST turn into code ES3 ES5 or to let the browser execute.
Similarly, TypeScript of TSC is a compiler, and do babel is the same, but compiled both AST ES6 is slightly different, would have resulted in a rich variety of plug-ins TypeScript not take Babel community, as eslint and so on.
Because eslint syntax checking, it is based on AST to do.
Well above the compilation process what use is it?
JavaScript中的声明和赋值
理解了语言的编译过程，那么JavaScript中的声明和赋值又是如何的一个流程呢？
比如，var age = 10;这段代码，在JavaScript中的编译方式是如何呢？
在JavaScript中，这段代码大概相当于是如下两个过程：
var age = undefined; // 隐式赋值，编译阶段 age = 10; //变量赋值 执行阶段
函数声明也是如此：
// 这一段代码就是一个完整的函数声明，在编译阶段中，会先执行所有声明，才会依次执行代码操作。
function log() {
console.log('this is log')
}
这个时候，我们再回头来，想一下提升机制是什么？
再看提升
JavaScript的执行，被分为了两个阶段，分别是编译阶段，以及执行阶段。依照这个来看，所谓的提升机制（有的叫做变量提升，考虑到函数的定义，并未用这个名词），就是JavaScript引擎把变量声明和函数声明在编译阶段首先进行默认赋值，之后，在程序执行阶段，才会被代码真正的执行。也就是说，针对声明先提升，后执行。
注意：函数声明和变量都有提升机制，两者之间也有优先级。这都遵循一个原则：函数优先原则。也就是说，函数声明会提升到普通变量声明之前。
总结
变量提升，是一个值得去探究的概念，只有理解了这个概念，我们理解JavaScript的执行机制将会变得清晰明了起来。
文中有什么描述不当的，希望各位大佬能指出，大家共同学习，一起进步。
我的博客：http://www.gaoyunjiao.fun/?p=143