Variable promotion and function promotion

1.1 Variable declarations are improved

** == A variable defined (declared) by var can be accessed before the statement is defined

* * value: undefined *

 var a = 3

      function fn() {
        console.log(a) //undefined
        var a = 4
      }
      fn()
Copy the code

1.2. Function declaration enhancement

** == the function declared by function can be called directly before ==*

** value: function definition (object)*

Var b = 3 function fn2() {console.log(' console.log ')} var b = 3 function fn2() {console.log(' console.log ')} var fn3 = function () { console.log('fn3()') }Copy the code

Question: How do variable promotion and function promotion come about?

Execution context

In short, an execution context is an abstraction of the context in which JavaScript code is evaluated and executed. Whenever Javascript code is running, it is running in an execution context.

  1. ** Definition: the ** execution context regulates variable storage, promotion, and this pointing with a very strict set of rules.
  2. Classification: global execution context; Function execution context
  3. ** Function: ** preprocesses data
  4. == How do I count the number of execution contexts? = =
    1. n+1
    2. N: the number of times a function is called. Each time a function is called, a global number is opened
    3. 1: global context

2.1 Type of execution context

There are three types of execution context in JavaScript.

  • Global execution context— This is the default or base context, and any code that is not inside a function is in the global context. It does two things: == creates a global Window object (in the case of the browser) and sets itthisIs equal to the global object. There is only one global execution context in a program. = =
  • Function execution context – == Every time a function is called, a new context is created for that function. Each function has its own execution context, but is created when the function is called. There can be any number of function contexts. == Every time a new execution context is created, it performs a series of steps in a defined order (discussed later).
  • The Eval function executes the context– perform inevalThe code inside a function also has its own execution context, which JavaScript developers don’t often useevalSo I won’t talk about it here.

2.2 Execution Context

  • Global execution context:

    1. Create a global Window object (in browser case)
    2. And settingthisIs equal to the global object.
    3. There is only one global execution context in a program.

  • == Preprocessing global data ==

    • The global variable defined by var ==>undefined is added as the property of window
    • Function declared global function ==> assignment (fun), added as window method
    • This = = > assignment (Windows)

  • Start executing global code

    console.log(a1, Console.log (this) //window var a1 = 3 function a2() {function a2() {function a2() { console.log('a2()') } console.log(a1) //3Copy the code

2.3 Function Execution Context

  • Function execution context object: Each time a function is called, a new context is created for the function.
    1. Each time a function is called, a new context is created for the function.
    2. Each function has its own execution context, but is created when the function is called.
    3. There can be any number of function contexts.
    4. Each time a new execution context is created, it performs a series of steps in a defined order (discussed later).
  • Local data is preprocessed
    • Parameter = => Assignment (argument)= => added as an attribute of the execution context
    • Arguments ==> Assign (argument list) to add as an attribute for the execution context
    • The local variable defined by var ==>undefined is added as an attribute of the execution context
    • Function declared function ==> assignment (fun), added as an execution context method
    • This ==> Assignment (the object calling the function)
  • Start executing the function body code

Execute the context stack

The JS interpreter in the browser is single-threaded. This means that you can only do one thing at a time in the browser, and all other actions and events are queued up on the Execution Stack. The following figure shows an abstract view of a single-threaded stack

There are five things to remember about the execution stack:

  • Single thread
  • Synchronous execution
  • A global context
  • Countless function contexts
  • Each function call frames a new execution context, even the call itself

Execute context stack:

1. Before global code execution, the JS engine creates a stack to store and manage all execution context objects

2. After the global execution context (window) is determined, add it to the stack (push)

3. After the function execution context is created, add it to the stack (pushdown)

4. After the current function completes, remove the object at the top of the stack (unstack)

5. When all the code has been executed, only Windows is left on the stack

<! Before the global code is executed, the JS engine creates a stack to store and manage all execution context objects. After the global execution context (window) is determined, add it to the stack (push) 3. After the function execution context is created, add it to the stack (push) 4. After the current function completes execution, remove the top object on the stack (push) 5. When all the code has been executed, Var a = 10 var bar = function (x) {var b = 5 foo(x + b)} var foo = function (y) { var c = 5 console.log(a + c + y) } bar(10) //30 // bar(10) </script>Copy the code

4. Interview questions

4.1 Function execution context stack

Question: 1. What is output in turn? 2. Several context stacks are executed

console.log('global begin: '+ i) 
var i = 1
foo(1);
function foo(i) {
    if (i == 4) {
        return;
    }
    console.log('foo() begin:' + i);  
    foo(i + 1);                       
    console.log('foo() end:' + i);
}
console.log('global end: ' + i);

// global begin: undefined
// foo() begin:1 
// foo() begin:2
// foo() begin:3
// foo() end:: 3
// foo() end:: 2
// foo() end:: 1
// global end: 1
Copy the code

4.2 Test 1: Perform variable promotion first, then function promotion

*/ function a() {} var a console.log(typeof a) // 'function'Copy the code

4.3 * Quiz 2:* Variable preprocessing, in operator

/* Test 2: variable preprocessing, in operator */ if (! (b in window)) { var b = 1 } console.log(b) // undefinedCopy the code

4.4 Test 3: Preprocessing, sequential execution

Var c = 1 function c(c) {console.log(c) var c = 3} c(2Copy the code