Function Advanced ③ -- (Execution Context Stack, Scope and Scope Chain)

execution context stack

1. Before the global code is executed, the JS engine will create 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 the stack)
3. After the function execution context is created, add it to the stack (push it)
4. After the current function is executed, the object on the top of the stack is removed (popped)
5. When all the code is executed, only window is left on the stack

E.g:

<script type="text/javascript">
  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)
  // bar(10)
</script>

Note: The function's execution context is only created when the function is called. It is not created when it is defined.

scope

①Understand

• is a "turf", an area where a code segment is located
• It is static (relative to the context object) and is determined when the code is written

②Classification

• global scope
• function scope
• No block scope (ES6 has it)

③ Function

• Isolate variables, variables with the same name in different scopes will not conflict

E.g:

<script type="text/javascript">
/*  //没块作用域
  if(true) {
    var c = 3
  }
  console.log(c)*/

  var a = 10,
    b = 20
  function fn(x) {
    
    
    var a = 100,
      c = 300;
    console.log('fn()', a, b, c, x)   //100，20，300，10
    function bar(x) {
    
    
      var a = 1000,
        d = 400
      console.log('bar()', a, b, c, d, x)  //1000,20,300,400,200
    }

    bar(100)
    bar(200)
  }
  fn(10)
</script>

In which scope, look for the current scope, and if you can't find it, look outside.

scope and execution context

difference 1

• Outside the global scope, each function creates its own scope, which is determined when the function is defined. instead of when the function is called
• The global execution context is created after the global scope is determined and immediately before the js code is executed
• The function execution context is created when the function is called, before the function body code is executed

difference 2

• The scope is static, it exists as long as the function is defined, and will not change
• The execution context is dynamic, created when a function is called, and automatically released when the function call ends

connect

• The execution context (object) is subordinate to the scope in which it resides
• global context ==> global scope
• Function context ==> corresponding function usage domain

E.g:

<script type="text/javascript">
  var a = 10,
    b = 20
  function fn(x) {
    
    
    var a = 100,
      c = 300;
    console.log('fn()', a, b, c, x)
    function bar(x) {
    
    
      var a = 1000,
        d = 400
      console.log('bar()', a, b, c, d, x)
    }

    bar(100)
    bar(200)
  }
  fn(10)
</script>

Correction of the above image: the global context should be b=20

scope chain

①Understand

• A chain formed by the scope of multiple subordinate relationships, its direction is from bottom to top (from inside to outside)
• When you look for a variable, you look up the scope chain

② Find the search rule for a variable

• Find the corresponding property in the execution context under the current scope, if there is a direct return, otherwise go to 2
• Find the corresponding attribute in the execution context of the upper-level scope, if there is a direct return, otherwise go to 3
• Perform the same operation of 2 again, until the global scope, if not found, throw a not found exception

Output results as shown above:
4, 3, 2, error (d is not define)