The summary JavaScript basic concept series is divided into three parts: scope, event loop, prototype chain.

Problems:
1, JavaScript code compilation and execution process, lexical scope rules?
2. What are the dynamic binding methods for this?
3. Are there other scopes outside the global and functions?
4. Why is code specification forbidden with, eval?

First, JS compiled execution

(a), (pre) compilation period
The execution process of JS is divided into two stages: the compilation period (preprocessing) and the execution period. Error can be divided into two categories, compile-time errors and run-time errors:

SyntaxError is a syntax error that occurs when parsing code \

Referenceerror is an error that occurs when a variable that does not exist is referenced.

Rangeerror is an error that occurs when a value is outside the valid range.

TypeError is an error that occurs when a variable or parameter is not the expected type.

The JavaScript engine is not an explanation of the execution of JavaScript code, but rather a fragment of code blocks compiled to explain execution.

1. Code block
Code blocks in JavaScript refer to sections of code that are split by <script> tags, which can improve the efficiency of the engine execution. JS is compiled and executed according to blocks of code, and blocks are independent of each other, but variables and methods are shared.

Step 1. Read into the first block of code.
Step 2. Do grammar analysis, error is reported grammatical errors (such as parentheses mismatch, etc.), and jump to step 5. The error type at this time is syntax errors (such as parentheses mismatch, etc.), Chinese and English, and so on, does not affect the following code block compilation execution
Step 3. "Precompiled processing" of var variables and function definitions (never error, because only the correct declarations are parsed). In the pre-compilation phase, the variable is declared in the existing syntax tree, and the copy is moved to the variable object.
Step 4. Execute code snippet, error error (such as variable not defined reference error, variable type wrong).
Step 5. If there is a next code snippet, read the next code snippet and repeat the Step2.
Step 6. End.

(ii), the implementation process

Scope: A set of variables, data query rules.

JavaScript syntax uses lexical scopes (lexcical scope), meaning that JavaScript variables and function scopes are determined when writing code definitions, so the JavaScript interpreter only needs static analysis to determine each variable, The scope of the function, which is also known as the static scope (static scope).

Concepts such as execution environment, variable objects, internal variable tables, function tables are all abstract. You can use some code to try to explain the execution process.

<script>hi = ' Hello '; var num = 1;function fn (a) {Console.log (this.num); Console.log (hi); Console.log (a); Console.log (Arguments[0]);} var fn2 = function () {var b = 2;console.log (' fn2 '); return function () {console.log (b);}} FN (2), var fn3 = fn2 (); Fn3 ();</script>    

The

Executes the following procedure:

<script>//interpreted language, translated in code blocks, executed//# #step 1: Syntax error error type//DEBUGGER;//GEC = {//Global execution Environment//# #step 2:vo Variable object and active object within the AO function//# #step 2.1: Variable elevation, function declaration precedence, two naming differences//vo:{//fn:{//type:function,//ao:{//arguments:[],//a:undefined,//this:undefined// # #step 3.1:this points to the dynamic binding several forms of use////# #step 3.2: Shape participation arguments linkage between//},//scopechain:[gec.vo]//},//num:undefined,//fn 2:undefined,//fn3:undefined,//this:window//},//scopechain:[gec.vo],//# #step 3: Chain of scopes, including list of variable object pointers at all levels//callstack: [GE c]//# #step 4: Call stack, function control code execution Flow//}hi = ' hello ';//Find out if there is a hi on the variable object along the scope chain, have the assignment, do not and in non-strict mode will declare a outermost variable var num = 1;//num Assignment function FN (a) {Console.log (this.num); Console.log (hi); Console.log (a); Console.log (Arguments[0]);} Create the function and assign the value var fn2 = function () {var b = 2;console.log (' fn2 '); return function () {console.log (b);}} GEC = {//Global execution Environment at this time//vo:{//fn:{//type:function,//ao:{//arguments:[],//a:undefined,//this:undefined//},//Scope chain:[gec.vo]//},//num:1,//fn2:{//type:function,//ao:{//arguments:[],//b:undefined,this:undefined//},//scopechain:[gec.vo]//}//hi: ' Hello '//fn3:undefined,//this:window//},//ScopeChain:[GEC.vo] ,//CallStack: [Gec]//}fn (2);//Fnec = {//vo:{//arguments:[2],//a:2,//this:window//},//Scopechain:[gec.vo,fnec.vo], CallStack: [gec,fnec]//}//function execution Environment after execution end destroy var fn3 = fn2 ();//Fn2ec = {//vo:{//arguments:[],//b:2,//# #step 5: anonymous function Create, call the global, assignment is closed packet formation//anonymous:{//type:function,//ao:{//arguments:[],//this:undefined//},//Scopechain:[gec.vo, fn2ec.vo]//},//this:window//},//scopechain:[gec.vo,fn2ec.vo],//callstack: [gec,fn2ec]//}//returns an anonymous function after execution, back to the global environment Assign a value to Fn3, and Fn2ec.vo remain in memory. Generate closure memory, easy to cause memory leaks//GEC = {//Global execution Environment//vo:{//fn:{//type:function,//ao:{//arguments:[],//a:undefined,//This:undefin ed//},//scopechain:[gec.vo]//},//num:1,//fn2:{//type:function,//ao:{//arguments:[],//b:undefined,//This:undefi ned//},//scopechain:[gec.vo]//}//hi: ' Hello '//fn3:{//type:function,//ao:{//arguments:[],//this:undefined//}//SC Opechain:[gec.vo,fn2ec.vo]//}//this:window//},//scopechain:[gec.vo],//callstack: [gec]//}//fn3ec = {//vo:{//arguments:[],//th is:window//},//scopechain:[gec.vo,fn2ec.vo,fn3ec.vo],//callstack: [gec,fn3ec]//}</script>

　　

（三）、作用域欺骗

欺骗词法作用域：with，eval
with 会在作用域链前增加一个对象，会从对象属性中查找，修改赋值。但无法新增属性；对于查找不到的赋值会向外层查询。

eval ();

You can pass in the execution string code, just like Ben is in that position.

The two biggest problem is that it affects the engine's code optimization and performance is degraded.

Block-level scopes

Outside global and function scopes, there are additional scopes

Catch-caught variables are only internally meaningful

<script>      //ES6 code:    {Let        a = 2;        Console.log (a);    };    Console.log (a);    Convert to ES5 code:    try{        throw undefined;    } catch (a) {        a = 2;        Console.log (a);    }    Console.log (a);    </script>

　　

The

Summary JavaScript basic Concept Family plan is divided into three parts: scope, event loop, prototype chain.