Detailed explanation of JS pre parsing and execution process

If you want to understand the process of JavaScript parsing and execution, you must first understand the scope and scope chain of JavaScript. First, look at the article about the scope and scope chain of js that I summarized: http://blog.csdn.net/bingo_wangbingxin/article/details/79172449

Global code processing

  1. Pre analysis stage
    1. Read the entire source code
    2. Find the function declaration first, and then the variable declaration
      ·Function declaration conflicts, will overwrite
      ·Variable declaration conflicts, ignoring
    3. Save the found functions and variables to an object (Global save to window object)
    4. The value of the variable is undefined, and the value of the function points to the function (function string)
      · { a: undefined, f: 'function(){...}' }
  2. Operation stage
    From top to bottom, in sequence

Function processing

  1. Pre analysis stage
    1. Read the entire function source code
    2. Adding parameters of a function to a lexical object
    3. Find function declaration first, then variable declaration
      ·If there are duplicate function declarations, the latter will overwrite the former
      ·If there are duplicate variable declarations,
    4. Save the found functions and variables to a lexical object
    5. The value of the variable is undefined, and the value of the function points to the function (function string)
      · { a: undefined, f: 'function(){...}' }
  2. Operation stage
    From top to bottom, in sequence
// examp1
console.log(a)
var a=1
console.log(a)
function a(){
    console.log(2)
}
console.log(a)
var a=3
console.log(a)
function a(){
    console.log(4)
}
console.log(a)
a()
/**
 * Pre parsing:
 *   Scan function first
 *     function a(){console.log(2)} => a:function a(){console.log(2)}
 *     function a(){console.log(4)} => Conflicting function declarations will override a:function a(){console.log(4)}
 *   In scanning variables
 *     var a=1 => Conflicts in variable declaration will be ignored a:function a(){console.log(4)}
 *     var a=3 => a:function a(){console.log(4)}
 * Implementation phase:
 *   var a=1 => a:1
 *   var a=3 => a:3
 * Print results:
 *   function a(){console.log(4)}
 *   1
 *   1
 *   3
 *   3
 *   Error reporting: a is not a function
 */
// examp2
console.log(a)
console.log(b)
fn1()
fn2()
var a=1
b=2
function fn1(){
    console.log(1)
}
var fn2=function(){
    console.log(2)
}
/**
 * Pre parsing:
 *   Scan function first
 *     function fn1(){console.log(1)} => fn1:function a(){console.log(1)}
 *   In scanning variables
 *     var a=1 => a:undefined
 *     var fn2=function(){console.log(2)} => fn2:undefined
 * Implementation phase:
 *   console.log(a) => undefined
 *   console.log(b) => Error report, comment this line and see the following results
 *   fn1() => 1
 *   fn2() => undefinedNot a function
 * Print results:
 *   undefined
 *   Error reporting: b is not defined
 *   1
 *   Error reporting: fn2 is not a function
 */
// examp3
function fn(a,b){
    console.log(a)
    console.log(b)

    var b=10
    function a(){}
}
fn(1,2)
/**
 * Parsing execution within a function
 * Pre parsing:
 *   Find function parameters
 *     a:undefined
 *     b:undefined
 *   Find function declaration
 *     function a(){} => a:function a(){}
 *   Find variable declaration
 *     var b=10 => b:undefined
 * Implementation phase:
 *   fn(1,2) => First parameter1Assign to a, but a is a function, assignment fails, the second parameter2Assigned to b, b is a variable. Copy successful
 *   console.log(a) => function a(){}
 *   console.log(b) => 2
 * Print results:
 *   function a(){}
 *   2
 */
// examp4
var a=1
function fn(){
    console.log(a)
    var a=2
}
fn()
console.log(a)
/**
 * global scope
 * Pre parsing:
 *   Find function declaration
 *     fn:function fn(){
 *          console.log(a)
 *          var a=2
 *        }
 *   Find variable declaration
 *     var a=1 => a:undefined
 * Scope within a function
 * Pre parsing:
 *   Find function parameters
 *     nothing
 *   Find function declaration
 *     nothing
 *   Find variable declaration
 *     var a => a:undefined
 * Implementation phase:
 *   fn() => console.log(a) => Visit a in fn
 *   console.log(a) => Visit your global a
 * Print results:
 *   undefined
 *   1
 */
//examp5
var a=1
function fn(){
    console.log(a)
    a=2
}
fn()
console.log(a)
/**
 * global scope
 * Pre parsing:
 *   Find function declaration
 *     fn:function fn(){
 *          console.log(a)
 *          a=2
 *        }
 *   Find variable declaration
 *     var a=1 => a:undefined
 * Scope within a function
 * Pre parsing:
 *   Find function parameters
 *     nothing
 *   Find function declaration
 *     nothing
 *   Find variable declaration
 *     nothing
 * Implementation phase:
 *   fn() => console.log(a) => fn If there is no a defined in, access the global a
 *   fn() => a=2
 *   console.log(a) => Visit your global a
 * Print results:
 *   1
 *   2
 */
// examp6
var a=1
function fn(a){
    console.log(a)
    a=2
}
fn()
console.log(a)
/**
 * global scope
 * Pre parsing:
 *   Find function declaration
 *     fn:function fn(a){
 *          console.log(a)
 *          var a=2
 *        }
 *   Find variable declaration
 *     var a=1 => a:undefined
 * Scope within a function
 * Pre parsing:
 *   Find function parameters
 *     a:undefined
 *   Find function declaration
 *     nothing
 *   Find variable declaration
 *     nothing
 * Implementation phase:
 *   fn() => console.log(a) => Access a in fn, no parameter passed
 *   console.log(a) => Visit your global a
 * Print results:
 *   undefined
 *   1
 */
// examp7
var a=1
function fn(a){
    console.log(a)
    a=2
}
fn(a)
console.log(a)
/**
 * global scope
 * Pre parsing:
 *   Find function declaration
 *     fn:function fn(a){
 *          console.log(a)
 *          a=2
 *        }
 *   Find variable declaration
 *     var a=1 => a:undefined
 * Scope within a function
 * Pre parsing:
 *   Find function parameters
 *     a:undefined
 *   Find function declaration
 *     nothing
 *   Find variable declaration
 *     nothing
 * Implementation phase:
 *   fn(a) => console.log(a) => Access variable a in fn, access global variable a in parameter a, assign to variable a in fn
 *   console.log(a) => Visit your global a
 * Print results:
 *   1
 *   1
 */
// examp8
var a=1
function fn(a){
    arguments[0]=3
    console.log(a)
    var a=2
    console.log(arguments[0])
}
fn(a)
console.log(a)
/**
 * global scope
 * Pre parsing:
 *   Find function declaration
 *     fn:function fn(a){
 *          arguments[0]=3
 *          console.log(a)
 *          var a=2
 *          console.log(arguments[0])
 *        }
 *   Find variable declaration
 *     var a=1 => a:undefined
 * Scope within a function
 * Pre parsing:
 *   Find function parameters
 *     a:undefined
 *   Find function declaration
 *     nothing
 *   Find variable declaration
 *     a:undefined
 * Implementation phase:
 *   fn(a) => Parameter a accesses global variable a
 *   arguments[0]=3 => Local variable a=3
 *   var a=2 => Local variable a=2
 *   Here, arguments[0] and a are interlinked
 * Print results:
 *   3
 *   2
 *   1
 */
// examp9
var x= 123;
function f(){
    var x = 100;
    //g.[[scope]]  == window
    var g = new Function("","alert(x)");
    g();
}
f();
/**
 * The function created through new Function() has the scope of window object, so it can only access the x in the global environment, but not the x in the f function
 * Print results:
 *   123
 */

Tags: Javascript

Posted on Tue, 28 Apr 2020 07:49:36 -0700 by doni49