JavaScript precompiled

JavaScript Run trilogy

1. Syntax analysis: scan all the code first to see if there are any syntax errors
2. Precompilation (moments before execution) : Variable and function declarations are promoted
3. Execution: line by line

precompiled

1. In the current scope, the browser will first declare or define all var and function functions in advance before executing the JS code
2. The var variable declaration will only be declared, but will not be defined
3. Function declarations declare and define, and assign the body of the function

Precompilation in the global

1. Creating a global object
2. Find the global variable declaration, declare the variable as the property name of the global object, and assign the value undefined
3. Find the function declaration in the global, assign the function name as the property name of the global object, and assign the function body

Precompilation in the function

1. Create an AO object (execution context)
2. Find the parameter and use it as the AO attribute name; If there are arguments, assign arguments; Otherwise, undefined is assigned
3. Find the variable declaration, use the variable as the AO property name, and assign undefined
4. Find the function declaration, assign the function body as the attribute name of the AO

Precompilation in block-level scopes

1. The var variable declaration does not change
2. Function function declarations are promoted to the global scope or to the head of the function scope, similar to var
3. At the same time, function function declarations are promoted to the head of the block-level scope

if(false) {
  function f() {}}/ / equivalent to the
var f;//var f= undefined; Global scope
if(false) {
  function f() {}}Copy the code

Precompiled cases

Variables and functions have the same name

When a variable has the same name as a function, only the value of the function is left, regardless of who comes before or who comes after, so the function declaration takes precedence

console.log(b);
function b() {
  console.log('bbb');
}
var b = 2;
// Parsing process
/ / the precompiled
function b() {console.log('bbb'); }var b;
// Execute line by line
console.log(b);//[Function: b]
b = 2;
Copy the code

console.log(a);
var a = 1;
function a() {
  console.log(2);
}
console.log(a);
var a = 3;
console.log(a);
function a() {
  console.log(4);
}
// Parsing process
/ / the precompiled
var a;
function a() {console.log(2); }function a() {console.log(4); }// Execute line by line
console.log(a);//function a() {console.log(4); }
a = 1;
console.log(a);/ / 1
a = 3;
console.log(a);/ / 3
Copy the code

Precompilation in the function

Precompilation in a function is not done until the moment before the function is executed

var a = 10;
function f1() {
  var b = 2 * a;
  var a = 20;
  var c = a + 1;
  console.log(b);
  console.log(c);
};
f1();
// Parsing process
/ / the precompiled
var a;
function f1() {... }// Execute line by line
a = 10;
f1();
  // Precompile in the function
  var b;
  var a;
  var c;
  // line by line in the function
  b = 2 * a;//2 * undefined
  a = 20;
  c = a + 1;
  console.log(b);//NaN
  console.log(c);/ / 21
Copy the code

Precompilation of function expressions

console.log(fn);
var fn = function() {
  console.log('ok');
};
console.log(fn);
// Parsing process
/ / the precompiled
var fn;
// Execute line by line
console.log(fn);//undefined
fn = function() {console.log('ok'); };console.log(fn);//[Function: fn]
Copy the code

Precompilation of function arguments

Parameters in a function are variables declared in the function

function fun(n) {
  console.log(n);
  var n = 456;
  console.log(n);
}
var n = 123;
fun(n);
// Parsing process
/ / the precompiled
function fun(n) {}
var n;
// Execute line by line
n = 123;
fun(n);
  // Precompile in the function
  var n = 123;// The argument assigns a value to the parameter. The function already declared the variable n, so there is no need to redeclare it
  // line by line in the function
  console.log(n);/ / 123
  n = 456;
  console.log(n);/ / 456
Copy the code

Perform precompilation of the function immediately

Immediate functions are not precompiled, and as with normal functions, definition and execution are completed as the code executes to this point line by line

(function(num) {
  console.log(num);
  console.log(n); }) (100);
var n = 10;
// Parsing process
/ / the precompiled
var n;
// Execute line by line
(function(num) {... }) (100);// Function execution
  // Perform precompilation in the function immediately
  var num = 100;// The argument is assigned to the parameter
  // Execute line by line in the function immediately
  console.log(num);/ / 100
  console.log(n);//undefined
  n = 10;
Copy the code

Precompiling the return inside a function

The code after the return is not executed, but is precompiled

function fn() {
  console.log(num);
  return num;
  var num = 100;
}
fn();
// Parsing process
/ / the precompiled
function fn() {... }// Execute line by line
f();
  // Precompile in the function
  var num;// The code after return is not executed, but is precompiled
  // line by line in the function
  console.log(num);//undefined
  return num;
Copy the code

Precompilation in the if code block

• If precompiled regardless of whether the if judgment is true; If true, the code block in if is executed; Otherwise, if is precompiled, not executed.
• Getting started with the ES6 standard (only available for ES6 browser implementations) :

1. Allows functions to be declared in block-level scopes (function declarations should be avoided and can be written as function expressions)
2. Function declarations are similar to var in that they are promoted to the global scope or to the head of the function scope
3. Function declarations are also promoted to the head of their block-level scope

//ES6 browser
(function() {
  if(false) {
    function f() {
      console.log('ok'); } } f(); } ());// An error is reported, but the following code is actually run
(function() {
  var f;//var f = undefined
  if(false) {
    // The declaration of a function in a block-level scope is promoted to the head of the function scope
    function f() {
      console.log('ok'); } } f(); } ());Copy the code

//if false
console.log(num);
console.log(f);
if(false) {
  var num = 100;
  function f() {
    console.log(123); }}console.log(f);
console.log(num);
// Parsing process
/ / the precompiled
var num;
// Declarations of block-level scope functions are promoted to the head of the global scope
var f;// The precompilation of block-level scope functions is similar to var, which is declared first and then assigned
// Execute line by line
console.log(num);//undefined
console.log(f);//undefined
// The code in the if block is not executed because if is judged false
console.log(f);//undefined
console.log(num);//undefined
Copy the code

//if true
console.log(num);
console.log(f);
if(true) {
  var num = 100;
  function f() {
    console.log(123); }}console.log(f);
console.log(num);
// Parsing process
/ / the precompiled
var num;
// Declarations of block-level scope functions are promoted to the head of the global scope
var f;// The precompilation of block-level scope functions is similar to var, which is declared first and then assigned
// Execute line by line
console.log(num);//undefined
console.log(f);//undefined
// Execute the code in the if block if the condition is true
num = 100;
f = function() {console.log(123); }console.log(f);//[Function: f]
console.log(num);/ / 100
Copy the code

If blocks have different scopes before and after function declarations

console.log(a);
var a = 0;
if(true) {
  console.log(a);
  a = 1;
  console.log(a);/ / 1
  function a() {}
  a = 21;
  console.log(a);
}
console.log(a);
// Parsing process
/ / the precompiled
var a;
// Execute line by line
console.log(a);//undefined
a = 0;
  //if true
  function a() {}Function declarations are promoted to the head of the block-level scope
  console.log(a);//[Function: a]
  a = 1;// Change the value of a global variable
  console.log(a);/ / 1
  // The function name is the same as the global variable name
  function a() {}// the function is followed by another scope. The function is followed by a global scope and a local scope
  a = 21;// The value of the local scope
  console.log(a);/ / 21
console.log(a);/ / 1
Copy the code