In-depth understanding of the scope of JavaScript-function declarations why pre-

 Tags: javascript function objectsThis blog post solves the following confusion

• function declaration why the predecessor
• function declaration pre-and variable pre-precedence issues
• Why the JS file can be used at the beginning of the math,string and other libraries, without the need to import header files

1. Variable Object vo

The Variable object (Variable object, abbreviated to VO) is an abstract
The "Object" in the concept, which is used to store the execution context:
1. Variables
2. Function declaration
3. Function parameters

The JS interpreter uses variable objects (VO) to find the variables and functions we define.

As an example:

var A = 10; function test (x) {var b = 20;} Test (30); 
 
           For example the VO record for the browser JS engine: 

//全局作用域VO(globalContext) = {a : 10,//变量test : <ref to function>//函数声明};//test函数的函数作用域VO(test functionContext) = {x : 30,//函数参数b: 20//函数声明};

2.js does not need to add a header file to solve the puzzle

Before the JS code executes, the JS engine initializes the following global scope VO for us.

In the global context

//在全局上下文中 ，vo===this===global

VO(globalContext) === [[global]];

[[global]] = {Math : <...>,String : <...>,isNaN : function() {[Native Code]}......window : global // applied by browser(host)};

Then string (10) is equivalent to [[Global]]. String (10); This is why the JS code can call the math library before it executes.

String(10); //[[global]].String(10);window.a = 10; // [[global]].window.a = 10this.b = 20; // [[global]].b = 20;GlobalContextVO (VO === this === global)

Interestingly, we found that global's window points to global itself, so we can try Window.window.window in the browser ... The loop continues to be called to prove that window is an infinite loop call.

3. Vo–ao in the function

In the context of the function, we create VO when we enter the function context, which is called AO (Activation object).
AO can be regarded as the active object of VO.

VO(functionContext) === AO;AO = {arguments : <Arg0>};arguments = {callee,length,properties-indexes};

The function of AO goes through two stages

1. Initialization phase of a variable
2. Code Execution phase

3.1 Variable Initialization phase

Vo is populated in the following order:
function Parameters (if not passed in, initialize the parameter value to undefined)
function Declaration (If the name of life conflict, will be covered)
Variable Declaration (The value of the initialization variable is undefined, and if a name conflict occurs, it will be ignored.) )

As an example:

function test (A, b) { var C = 10; function d () {} var e = function _e () {};(function Span class= "Hljs-title" >x () {}); b = 20;} Test (10);             

VO Scan creation Process:
Add all incoming parameters : a:undefined,b:undefined
Add all function declarations , repeat name overrides: D:func
Add all the variable declarations , and repeat the name to ignore: c:undefined,e:undefined

So it's VO:

AO(test) = {a: 10,b: undefined,c: undefined,d: <ref to func "d">e: undefined};

One more example:

function foo(x,y,z){    function x(){}; alert(x);}foo(100);

Result Alert:function x () {}

Analysis: Scan incoming parameters : x:undefined,y:undefined,z:undefined
Scan function declaration : x:func Overlay undefined
Scan Variable declaration : None

The final x is func.

function foo(x,y,z){    function func(){}; var func; consoel.log(func);}foo(100);

Result Console.log:func () {}

Analysis: Scan incoming parameters : x:undefined,y:undefined,z:undefined
Scan function declaration : x:func Overlay undefined
Scan Variable declaration : X name conflict does not change, ignore directly.

The final X or Func.

3.2 Code Execution phase

Or is this an example?

function test(a, b) {var c = 10;function d() {}var e = function _e() {};(function x() {});b = 20;}test(10);

VO after analysis:

AO(test) = {a: 10,b: undefined,c: undefined,d: <ref to func "d">e: undefined};

Very well understood to add a value for each VO variable

VO[‘c‘] = 10;VO[‘e‘] = function _e() {};VO[‘b‘] = 20;

The result is:

AO(test) = {a: 10,b: 20,c: 10,d: <reference to FunctionDeclaration "d">e: function _e() {};};

3.3 Practice

Topic:

// functionvar x = 10;alert(x); // 10x = 20;function x() {}alert(x); // 20if (true) {var a = 1;} else {var b = true;}alert(a); // 1alert(b); // undefined

Analytical:
Variable initialization phase:
Find function declaration: X:func
Look for variable declaration: X does not overwrite (or func) a:undefined,b:undefined

So the first line of alert (x) returns function

Code Execution phase:
X:10
Alert turns out to be 10.
X:20
Alert turns out to be 20.

If statement does not produce a new scope, true is always true, assignment A is 1

The last two sentences print a for 1,b never get executed, print as undefined

In-depth understanding of the scope of JavaScript-function declarations why pre-