scope

Scope definition: the area where variables (also called context) and functions are in effect (can be accessed)

In general, the name used in a piece of program code is not always valid and available, and the scope of the code that defines the name’s availability is the scope of the name. The use of scopes improves the locality of program logic, enhances the reliability of programs, and reduces name conflicts.

There are two types of scope in JavaScript (pre-ES6) :

  • Global scope
  • Local scope (function scope)

Global scope: applies to the environment in which all code is executed (inside the entire script tag) or to a single JS file.

Local scope (function scope) : Applies to the code environment within a function, the local scope. It is also called function scope because it is related to functions.

Scope of a variable

In JavaScript, variables can be divided into two types according to their scope:

  • The global variable
  • A local variable

Variables declared under a global scope are called global variables (variables defined outside the function).

  • Global variables can be used anywhere in the code
  • Variables declared by var in global scope are global variables
  • In special cases, variables declared without var in functions are also global variables (not recommended).

Variables declared in a local scope are called local variables (variables defined inside a function)

  • Local variables can only be used inside the function
  • The variables declared by var inside a function are local variables
  • Function parameters are actually local variables

The difference between global and local variables:

  • Global variables: they can be used anywhere and are only destroyed when the browser is closed, so they take up a lot of memory
  • Local variables: used only inside functions and initialized when the block of code in which they reside is executed; When the code block is finished running, it is destroyed, thus saving more memory

Precompilation prelude

Js run trilogy

  1. Syntax analysis
  2. precompiled
  3. Explain to perform

Calling a function after declaring a function or before declaring a function can be executed because of precompilation

Function declaration improves overall: functions are brought to the front of the logic wherever they are written. So wherever you call it, you’re essentially calling it later, right

Variable declaration enhancement: Raise var a to the front

var a = 123 // This is a variable declaration reassignment.
// The variable declaration promotion is broken down into the following steps:
var a
a = 123 // Raise var a to the top
Copy the code

Imply Global: Any variable that is assigned an undeclared value is owned by a global object (which is a window).

All declared global variables are properties of the window.

function test () {
  var a = (b = 123)
}
test()
// console.log(a); / / an error
console.log(b) / / 123
// var a = b = 123; Assign the variable from right to left, first assign 123 to B, then declare variable A, and assign b to A
// In this process, b is assigned undeclared, and any variable is assigned undeclared. This variable is owned by the global object. So I print b to be 123.
// Access window.a is undefined, access window.b is 123
Copy the code

Precompilation (solving execution order problems) occurs just before the function is executed

Precompiled tetralogy (function)

  1. Creating an Activation Object (AO)
  2. Find the parameter and variable declarations and use the variable and parameter names as the AO property names with the value undefined equivalentAO { a : undefined, b : undefined }
  3. Unify argument values with parameters (pass argument values to parameters)
  4. Find the function declaration inside the function body and assign the value to the function body (see AO first, then see global GO).
function fn (a) {
  console.log(a) // function a() { }
  var a = 123
  console.log(a) / / 123
  function a () {}
  console.log(a) / / 123
  var b = function () {}
  console.log(b) // function () { }
  function d () {}
}
fn(1)
Copy the code

This example takes (a) and the variable declaration is also a

The above example varies in tetralogy as follows:

  1. Create an AO Activation Object (execution context),AO = {}
  2. Find the parameter and variable declarations and use the name of the variable and parameter (a) as the AO attribute name with the value undefined.AO = { a: undefined, b: undefined }
  3. Unify argument values and parameters.AO = { a: 1, b: undefined }
  4. Find the function declaration inside the function body and assign the value to the function body.function a () {}andfunction d () {}It’s all function declarations, butvar b = function (){}It isn’t.AO = { a: function a () {}, b: undefined, d: function d() {} }

Execute the first line console.log(a); AO = {a: function a () {} b: undefined, d: function d() {}}

Run var a =123; D: function d() {}} d: function d() {}}

Function (){}, AO = {a: 123, b: function (){}, d: function d() {}}

Global precompiled trilogy:

  1. Generate a GO Object Global Object (window is GO)
  2. Find the parameter and variable declarations and use the variable and parameter names as the GO attribute names with the value undefined
  3. Find the function declaration inside the function body and assign the value to the function body

Any global variable is a property on the window

It’s not declared, it’s assigned, it’s owned by window, it’s precompiled in GO

function test () {
  var a = (b = 123)
  console.log(window.b)
  console.log(a)
}
test()
console.log(b)
Copy the code

Do you GO or AO?

To execute globally, GO generates the AO just before test is executed

Several layers of nested relationships, the near priority, from the near to the far, there is AO to see AO, no AO to see GO

GO = {b: 123}, AO = {a: undefined}

The scope chain

[[scope]] : Every javascript function is an object. Some properties of the object are accessible to us, but others are not. These properties are only accessible to the javascript engine, and [[scope]] is one of them.

[[scope]] refers to what we call a scope, which stores a collection of run-time contexts.

Scope chain: a collection of execution-time context objects stored in [[scope]]. This collection is linked by what we call scope chains.

Runtime context: When a function executes, an internal object called the runtime context is created. An execution-time context defines the context in which a function is executed. The execution context is unique each time a function is executed, so multiple calls to a function result in the creation of multiple execution contexts. Each time a function is executed, the newly generated execution-time context is filled to the top of the scope chain. When the function completes execution, the execution context it creates is destroyed.

Find variables: Find variables in a function from the top of the function scope chain down.

function a () {
  function b () {
    var b = 234
  }
  var a = 123
  b()
}
var glob = 100
a()
Copy the code

When a function is defined, the following process occurs:

When function A is executed, the following process occurs:

When the b function is created, the following happens:

When b is executed, the following happens:

When the function completes, it kills its OWN AO and returns to the state in which it was created.

function a () {
  function b () {
    function c () {}
    c()
  }
  b()
}
a()
Copy the code

When c finishes executing, it will kill its own AO of C and return to its defined state. When C is executed again, it will generate a new AO object of C, and everything else will be the same, because the base is c’s defined state

Function B and function C are invisible if function A is not executed. Function a() can be executed only if function a is executed. Function a (){} function a (){