Starting from the declaration of variables and functions, to scope, scope chain re-understanding. Take you back to the scope of a series of issues to explore, once again solidify the JS scope foundation.

Statement of ascension

Variable declaration promotion

Variables declared using the var keyword are declared before code execution (but not assigned –undefined)

console.log(a);  //undefined
var a = 'xxx'
Copy the code

Function declaration promotion

Functions created using function declarations are created before the code is executed and can be called before the function is declared, but functions created using function expressions are not defined.

fun1()   / / 111
function fun1() {
  console.log(111)
}
fun2()   // fun2 is not a function
var fun2 = function () {
  console.log(222)}Copy the code

scope

Scope: The scope of a variable. Scope is divided into global scope and function scope. Action: Isolation of variables, defining the same variables in different action and without affecting each other.

Global scope

The global scope is created when the page is open and destroyed when the page is closed.

The global scope has a global object window(which represents a browser window and is created by the browser) that can be used directly.

Variables created are saved as global properties (any part can be accessed), and functions created are saved as global methods.

Function scope

The scope of the function is determined when it is defined, which is determined by the position of the function declaration. After the completion of the function, the scope of the function is destroyed. Each call to a function creates a function scope, independent of each other.

Global-scope variables can be accessed from function scope, but global variables cannot access variables in function scope. In a function scope, a variable is operated on. If the variable does not exist in the current scope, it is searched up to the global scope.

var e = 0
    fun1()   / / 0
function fun1() {
  var a = 1
  console.log(e)
}
console.log(a)  // ReferenceError: a is not defined
Copy the code

In function scope, variables declared without var become global

var e = 0
function fun1() {
  console.log(e)
  e = 1
}
fun1()  / / 0
console.log(e) / / 1
Copy the code

Parameters in a function are equivalent to defining variables in the function

var e = 0
fun1()  // undefined
function fun1(e) {
  console.log(e)
}
Copy the code

Scope other classes

Scope can be divided into static scope and dynamic scope.

Static scope: also known as lexical scope. Variables with lexical scope are called lexical variables. Lexical variables are visible within the lexical scope but not outside it. The static scope is determined by the function definition position. The scope in JS is the static scope (lexical scope).

  function bar() {
    var a = 1000
  }
Copy the code

Dynamic scope: Variables with dynamic scope are called dynamic variables. This variable is present throughout the dynamic scope execution time; At the end of the code snippet, the variable disappears. Is determined by where the function runs when it is called.

function fn() {
  console.log(x)
}
function show() {
  var x = 20
  fn()
}
Copy the code

When show() is called, it calls fn(). During execution, fn() is called by show() to represent a dynamic relationship.

The scope chain

Definition: There is scope nesting. A nested scope is a structure from the inside out. Function: Find variables.

When code is executed in an environment, a scoped chain of variable objects is created. The scope chain ensures that all variables and functions that are accessible are accessed in order. The scope chain is determined when the function is defined. The scope chain is related to where the function is defined.

Case 1:

var x = 10
function fn() {
  console.log(x)
}
function show() {
  var x = 20
  fn()
}
show()  / / 10
Copy the code

Example 2:

var x = 10
function show1() {
  var x = 20
  function fn() {
    console.log(x)
  }
  fn()
}
show1()  / / 20
Copy the code

Understanding: Function scope is defined at definition time, so in example 1, the parent scope of function fn is window. If there is no x in FN, it will look for x from its parent, which has an x variable. So it outputs 10. In example 2, fn’s parent environment is the show1 function, so look for x in show1 and output 20.

Execution environment and execution environment stack

The scope is static and will remain unchanged as long as the function is defined; The execution environment is dynamic, created when a function is called and automatically destroyed at the end of the call.

Execution context is divided into global execution context and function execution context. Here the execution context is also called the execution environment. The execution environment is created as the code runs.

Global execution environment

Before executing global code, identify window as the global execution environment. Then the global data is preprocessed: the global variable is added as the window property, the global function is declared as the window method, and this refers to window.

Function execution environment

While the function is running, the corresponding function execution environment object is created. Preprocessing the local data.

Execution environment stack

Before the global code is executed, the JS engine creates a stack to store the objects that manage all the execution environments.

After the global execution environment is determined, it is added to the stack.

Adds a function execution environment to the stack after it has been created.

After the function completes execution, the function execution environment is removed from the stack.

After all the code is executed, only the window global execution environment will be left on the stack.

The running process of the function

var a = 10
function fn(x) {
  var a = 100,
    c = 300
  b = 20
  console.log(a, b, c, x)
  function bar(x) {
    var a = 1000,
      d = 4000
    console.log(a, b, c, x)
  }
  bar(1)
}
fn(10)  
// 100 20 300 10
// 1000 20 300 1
Copy the code

First, determine the global scope and function scope.Secondly, the corresponding execution environment should be determined in turn, always bearing in mind that the execution environment is dynamic.

Create global execution environment before fn function code execution, record global variables.

When fn is executed, the fn function execution environment is created. If there is an undefined variable b inside the fn function, b will become a global variable. When the bar function is executed, the bar function execution environment is created. At this time, the execution environment is as follows:

Run the fn function to print a, b, c, x. Create the corresponding scope chain of the variable object in the execution environment corresponding to the current scope. A outputs 100, C outputs 300, and x outputs 10. B does not exist in the current law enforcement environment, so it searches for its upper scope through the scope chain, that is, the global scope. In the global execution environment corresponding to the global scope, there is a b variable output 20 (this process is called “variable resolution”).

Note: at this point, the output statement is defined after b. When b = 20, the variable b already exists in the global execution environment, so the output statement contains b and its value is 20. If b = 20 is interchanged with the output statement, then B is not defined in the output statement (no B in the global execution environment).

In the bar function, output a, b, c, x. In the execution environment corresponding to the current scope, output 1000 exists in A and output 1 exists in X. If b does not exist, search the fn scope of its parent, but b does not exist in the FN execution environment. Look up to the next level of scope, the global scope. In the global execution environment, there is a variable b with a value of 20, so the output b is 20. C does not exist in the current scope, so c looks for c in the scope of its parent fn function. C exists and its value is 300, so c prints 300.

The process of executing the environment stack

When the code executes, a stack of execution environments is created. When the flow of execution enters a function, the function’s execution environment is pushed onto the execution stack, and when the function completes, its environment is ejected.

1. In the above example, enter the global execution environment and push the global execution environment to the execution stack. 2. Execute fn and press the FN execution environment on the stack. 3. Execute bar in FN, and push bar into the execution environment stack.

4, after the execution of bar, bar function execution environment is removed from the stack. 5. After executing FN, the fn execution environment is removed from the stack. 6. After execution, only the global execution environment exists in the stack. 7. When the page is closed, the global execution environment is removed and the execution environment stack is destroyed.