This is the second day of my participation in Gwen Challenge

Execution contextThe execution environment(execution context)

When JavaScript code executes a executable code (EC), the corresponding execution context is created

There are three execution contexts:

  • 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: it creates a globalwindowObject (browser case), and setthisIs equal to the global object. There is only one global execution context in a program
  • Function execution context: Each 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. Whenever a new execution context is created, it performs a series of steps in a defined order
  • evalFunction execution context: executes inevalThe code inside a function also has its own execution context

The Execution context is managed by creating an Execution Context stack (ECS)

The execution context has three important properties:

  • Variable environment (The Variable object, VO)
  • Scope chain (Scope chain)
  • this

The execution context is handled in two phases:

  • create
    • thisThe decision of the value
    • Create a lexical environment
    • Create variable environment
  • perform

this

This refers to the object:

  • In global scope, the context is alwayswindowobject
  • If the scope is defined in a method of an object, the context is the object of the method
  • If you are usingnewWhen a function is called, the context is set to the instance of the calling function

The context is undefined by default when a function is called using a global scope in strict mode, because strict mode forbids this from pointing to a global object.

Lexical environment

A lexical environment is a structure that holds identity-variable mappings. (The identifier here refers to the name of the variable/function, and the variable is a reference to the actual object [containing the object of the function type] or the original data).

There are two components inside the lexical environment:

  • Environment logger: The environment logger is the actual location where variable and function declarations are stored
  • References to the external environment: A reference to the external environment means that it has access to its parent lexical environment (scope)

There are two types of lexical environments:

  • A global environment (in the context of global execution) is a lexical environment that has no references to the external environment. The external environment reference for the global environment isnull. It has built-in Object/Array/ and other prototype functions in the environment logger (associating global objects, for examplewindowObject) and any user-defined global variables, andthisThe value points to the global object.
  • In a function environment, user-defined variables within a function are stored in the environment logger. And the referenced external environment may be the global environment, or any external function that contains this internal function.

There are also two types of environment loggers:

  • Declarative environment loggers store variables, functions, and parameters.
  • The object environment logger is used to define the relationship between variables and functions that appear in the global context.

In short:

  • In a global environment, the environment logger is the object environment logger.
  • In a functional environment, the environment logger is the declarative environment logger.

Note – For function environments, the declarative environment logger also contains a arguments object passed to the function (which stores the index and parameter mapping) and the length of the argument passed to the function.

The variable environment

It is also a lexical environment whose environment logger holds bindings created in the execution context of variable declaration statements. As mentioned above, the variable environment is also a lexical environment, so it has all the attributes of the lexical environment defined above. In ES6, one difference between a lexical environment component and a variable environment is that the former is used to store function declarations and variable (let and const) bindings, while the latter is used only to store var variable bindings.

Global scope and global variables

If a variable is defined outside of a function, it is in global scope:

// Default global scope
var a = 1;
function fn() {}
Copy the code

Variables in a global scope can be accessed and modified in any other scope:

var a = 1;
function fn() {
  console.log(a); / / show a
  a = 2; / / modify a
}
Copy the code

Global variables can be declared in one of three ways:

  • Don’t takevarImplicitly declared as a global variable, no matter where it is declared, even inside a function, right
  • withvarDeclared outside of a function, this is an explicit declaration
  • usewindowGlobal object, and the properties of the global object correspond to global variables

Advantages of global variables: You can reduce the number of variables and reduce the time consumption caused by the data passing of arguments and parameters

Disadvantages of global variables:

  • Global variables are stored in the static storage area. When the program starts to run, it allocates memory for it and releases memory at the end of the program. Compared with the dynamic allocation and release of local variables, the lifetime of global variables is relatively long
  • Global variables destroy the encapsulation performance of functions, make functions dependent on global variables, and reduce the portability of functions
  • Global variables reduce the readability of functions. Because multiple functions may use the same global variable, it is very bad for program error checking and debugging

Note: Use global variables sparingly

Local scope

Unlike languages such as C++, javascript has a local scope in terms of functions rather than block-level scope. (Note: The latest standard provides block-level scope.)

Each function is called with a different scope, meaning that variables with the same name can be used in different functions because they belong to different scopes and cannot be accessed in other functions.

Block-level scope

Block-level declarations include:

  • if
  • switch
  • for
  • while

Es6 introduced let and const, which support the creation of local scopes in block-level declarations.

Life cycle

A global scope has the same lifetime as an application, and a local scope only exists during the execution of a function call.

The scope chain

When a variable is searched, it is first searched in the variable environment of the current context. If it is not found, it is searched in the variable environment of the execution context from the parent (lexical level parent) until it finds the variable environment of the global context, that is, the global object. Thus a linked list consisting of variable environments with multiple execution contexts is called a scoped chain.

Created when the function is defined (scope is defined at the time of definition, so scope chains are also created)

The scope chain contains the variable environment. The scope chain is used to parse variables. When parsing a variable, start from the innermost layer to find the required variables or other resources along the parent level

Inner functions (which must be function declarations) can access resources such as variables in the parent scope. Means that the child function lexical is bound to the parent execution environment.

  • The child execution environment can access the parent variable and not vice versa
  • The same variable priority is executed in different execution environments