JS precompiled tetralogy

JavaScript is an interpreted language: interpret a line, one line.
JS run trilogy:

  1. Lexical analysis:
    Although JS is interpreted line executes one line, but before the first execution will be explained throughout the scan again see if there is low-level syntax error.
  2. Precompiled:
    occurs before the moment of code execution.
  3. Interpreted:
    start executing code, to interpret a line one line.

Precompiled acquaintance:

var a = 123;
console.log(a);
//控制台打印123;
console.log(a);
var a = 123;
//控制台打印undefined;
console.log(a);
//报错!Uncaught ReferenceError: a is not defined!(因变量a没定义)

This is because the precompiled role:

  1. Lifting variable declaration (var variable name);
    as said second section of code:
console.log(a);
var a = 123;

//经过预编译,其相当于:
var a; //变量声明提升,但此时还没有赋值
console.log(a); //打印a,由于没有赋值故打印undefined
a = 123;//打印完后,才把123赋给变量a
  1. Enhance the overall function declarations (always executed after defined);
    that is, a function written statement no matter what position on the code to see visually, the system will always function declarations raised to the top of logic.
    but! Note that the function to the expression (var variable name = function () {}) and function declarations (function variable name () {}) difference! Function expression not improve.

Precompiled prelude:

  1. Global variables imply global imply
    any variable, if not direct assignment statement, this variable is the global object all.
function test() {
	var a = b = 123; 
	/*这里相当于:
	var a; 变量 声明提升
	b = 123; 变量b 没有声明!直接赋值的,归全局变量,在全局可以访问到。
	a = b; 相当于把123赋给a,但变量a是在函数test里声明的局部变量,全局访问不到。
	*/
	console.log(a);//打印123
	console.log(b);//打印123
}
test();
console.log(a);//报错Uncaught ReferenceError: a is not defined.
console.log(b);//打印123
  1. Declare all global variables, all of the properties window;
    window is the global domain. var a = 123; ===> window.a = 123;

Precompiled tetralogy

  • Function system in the pre-compilation process:
  1. AO create objects; (AO === Activation object)
  2. Get parameter and variable declaration, the variable parameter name and attribute name as AO, is undefined;
  3. The parameter argument value and unity;
  4. Looking at the function body function declaration, the value assigned to the function body; (Note that the function expression does not enhance)
  • Global pre-compilation process:
  1. GO generating objects; (GO === window object)
  2. Find variable declaration, the variable attribute name as AO, is undefined;
  3. Find function declaration, given the value of the function thereof;

First, the function of the system in the pre-compilation process:

function test(a, b) {
   console.log(a); 
   console.log(b); 
   var b = 234; 
   console.log(b); 
   a = 123; 
   console.log(a);
   function a () {} 
   var a;
   b = 234;
   var b = function () {} 
   console.log(a); 
   console.log(b); 
}
test(1);

Precompiled function occurs before the moment of execution, according to a precompiled tetralogy step by step analysis:

  1. AO create objects; (Activation Object) execution context of
    AO {}
  1. Get parameter and variable declaration, the variable parameter name and attribute name as AO, is undefined;
    AO {
    // Here a, b are both variable parameter is declared as a property name to
    A: undefined,
    B : undefined
    }
  1. The parameter argument value and unity;
    AO {
    A: 1, A // is a parameter, an argument of
    B: undefined
    }
  1. Get function declaration inside the body of a function, the function value is assigned to the body;
    AO {
    // A is a function declaration, a function imparting body; Note b not function declaration
    A: A function () {}
    b: undefined
    }

After the top four steps are ended, AO object is created, it began to execute the function. Performing test (. 1); this code will be entered into the function when the test, a function to find the corresponding variables in the created object AO (step 4 above) when executed.

Source code analysis:

function test(a, b) {
   console.log(a); //打印function a () {}
   console.log(b); //打印undefined
   var b = 234; // (替换上述第4步中b的值变为234)
   console.log(b); // 打印234
   a = 123; // (替换上述第4步中a的值变为123)
   console.log(a); // 打印123
   function a () {} //预编译时函数声明已经提升了,忽略不看
   var a; //预编译时变量声明提升了,忽略不看
   b = 234; 
   var b = function () {} //函数表达式,不是函数声明不能提升(替换上述第4步中b的值234变为此函数)
   console.log(a); // 打印123
   console.log(b); //打印function () {}
}
test(1);

Second, the real pre-compilation process:

console.log(test); 
function test(test) {
   console.log(test); 
   var test = 234; 
   console.log(test); 
   function test() {} 
} 
test(1); 
var test = 123;
console.log(test);

Create objects GO (Global Object), then create AO objects (Activation Object).
GO: do not look at internal function code

  1. GO create objects;
    GO {}
  1. Get variable declaration, the variable name as the attribute AO, is undefined;
    the GO {
    Test: undefined
    }
  1. Find function declaration, given the value of the function thereof;
    the GO {
    Test: Test function (Test) {
    // ...} entire function body
    }

GO objects created, I began to read the code, until a global call to read the test function, a function of pre-compiled, AO begin creating objects (precompiled occurred before the moment of execution of the function)
AO:

  1. AO create objects; (Activation Object) execution context of
    AO {}
  1. Get parameter and variable declaration, the variable parameter name and attribute name as AO, is undefined;
    AO {
    Test: undefined
    }
  1. The parameter argument value and unity;
    AO {
    Test: Test 1 is // parameter, is argument 1
    }
  1. Then the function body to find a function declaration, given the value of the function thereof;
    AO {
    // find the function declaration, Test same name, arguments replace the original
    Test: Test function () {}
    }

After AO object creation is complete, began to enter the interior of the test function performs the function code. Performing test (. 1); this code will be entered into the function when the test. When performing the function code inside will first find the corresponding variable in the object thereof AO {}, AO {} if no, go to the global variable to find the object GO {}.

Source code analysis:

console.log(test); //1.打印下边整个test函数(在GO中找)
function test(test) {//2.函数声明,整个函数包括函数体先不看
   console.log(test); //4.打印function test () {}; (在AO中找)
   var test = 234; //5.(替换AO中test的值变为234)
   console.log(test); //6.打印234
   function test() {} //已经提升,忽略
} 
test(1); //3.调用函数(执行之前预编译先创建AO)
var test = 123; //7.(替换GO中test的值变为234)
console.log(test);//8.打印123
Published an original article · won praise 1 · views 60

Guess you like

Origin blog.csdn.net/qq_42301358/article/details/105232622