Summary of js execution context and scope

Preface

If you are or want to become a qualified front-end developer, you must know the execution process of JavaScript code, know the execution context, scope, variable promotion and other related concepts, and apply them skillfully to your own code. This article refers to JavaScript You Don't Know, Advanced JavaScript Programming, and some blogs.

text

1. Concepts related to the execution process of JavaScript code

The execution of js code is divided into two stages: compiler compilation and js engine and scope execution. The compiler compilation stage (pre-compilation stage) is divided into three stages: word segmentation/lexical analysis, parsing/syntactic analysis, and code generation.

(1) In the word segmentation/lexical analysis stage, the compiler is responsible for segmenting the code and dividing the statements into lexical unit streams/arrays;

(2) In the parsing/lexical analysis phase, the lexical unit stream of the previous phase is converted into an abstract syntax tree consisting of nested elements that conforms to the program grammatical structure;

(3) In the code generation phase, the abstract syntax tree is converted into executable code and delivered to the JS engine.

Three important roles of js code execution:

(1) js engine: responsible for the entire process of code execution

(2) Compiler: responsible for parsing js code syntax and generating executable code

(3) Scope: Collect and maintain all declared identifiers and determine the access rights of the current code to the declared identifiers according to specific rules.

2. Execution context and execution stack

Whenever JavaScript code is running, it is running in an execution context. When it comes to execution context, you need to know what the execution stack is. The execution stack, which is the "call stack" in other programming languages, is a stack with a LIFO (last in, first out) data structure that is used to store the execution context created when the code is running. When the js engine encounters the code to be executed for the first time, it will first create a global execution context and push it into the current execution stack. Whenever the engine encounters a function call, it will create a new execution context for the function and push it to the top of the stack. The js engine executes the function at the top of the stack. When the function is executed, the execution context is popped from the stack and the control flow reaches the next context. Each execution context contains three important properties: variable object, scope chain, and this. These properties also need to be thoroughly understood.

2.1 Context call stack

var scope1 = "global scope";
 function checkscope1(){
 var scope1 = "local scope";
 function f(){
 console.log(scope1); 
 }
 return f();
 }
 checkscope1();

var scope2 = "global scope";
 function checkscope2(){
 var scope2 = "local scope";
 function f(){
 console.log(scope2);
 }
 return f;
 }
 checkscope2()();

Both of the above code snippets will output local scope

In the above code, scope must be a local variable. You can find the block-level scope. No matter when and where f() is executed, this binding is still valid when f() is executed. The same result appears, but the changes in the execution context stack of the two code segments are different:

The first code: push(<checkscope1>functionContext)=>push(<f>functionContext)=>pop()=>pop()

The second code: push(<checkscope2>functionContext)=>pop()=>push(<f>functionContext)=>pop()

2.2 Three types of execution context

(1) Global context

When the js engine starts parsing js code, the first thing it encounters is the global code. During initialization, a global execution context is pushed into the call stack. The execution context stack is cleared when the entire application ends. The bottom of the stack is always the global execution context. This is the default or basic global scope. The code inside any function is in the global scope. First, a global window object is created, and then the value of this is set equal to the global object. There is only one global execution context in a program. In the top-level js code, you can use this to reference the global object, because the global object is the head of the domain chain, which means that all non-qualified variables and functions are queried as functions of this object.

In short, there is only one global execution context, which is generally created by the browser in the client, that is, the window object we are familiar with, and we can access it directly through this.

(2) Function context

Whenever a function is called, a new context is created for that function. Each function has its own context, which is created when the function is called. It should be noted that a new context is created when the same function is called multiple times.

(3) eval and with context

Code executed inside eval and with functions also has its own execution context, but since JavaScript developers don't use eval very often, I won't discuss it here.

2.3 Execution context creation phase

The execution context creation is divided into two phases: creation phase and execution phase.

The js engine is mainly responsible for three things during the execution context creation phase: determining this ==> creating a lexical environment component ==> creating a variable environment component (I don’t quite understand it yet)

(1) Determine this, which will not be explained in detail

(2) Create a lexical environment component

A Lexical Environment is a specification type that defines the association of identifiers with specific variables and functions based on the lexical nesting structure of ECMAScript code. A Lexical Environment consists of an Environment Recorder and a possibly empty value that refers to an outer Lexical Environment. The environment record is used to store the actual location of variables and function declarations in the current environment. The external environment introduction record is easy to understand. It is used to save other external environments that can be accessed by its own environment. So when it comes to this, does it have a bit of a scope chain meaning?

There are two types of Lexical Environments:

• The global environment (in the global execution context) is a Lexical Environment that has no outer environments referenced. The global environment's outer environment reference is null. It has built-in Object/Array/etc, prototype functions in the environment recorder (associated with the global object, such as the window object) and any user-defined global variables, and the value of this refers to the global object.
• In a function environment, user-defined variables inside a function are stored in the environment recorder. The outer environment referred to may be the global environment, or any outer function that contains this inner function.

(3) Create variable environment components

The variable environment can also be said to be a lexical environment. It has all the properties of a lexical environment and also has environment records and external environment introductions. The only difference in ES6 is that the Lexical Environment is used to store function declarations and variables declared with let const, while the Variable Environment only stores variables declared with var.

3. JavaScript scope and scope chain

3.1 Scope

Lexical scope is determined when writing code or defining, while dynamic scope is determined at runtime. (This is also the case) Lexical scope focuses on where the function is declared, while dynamic scope focuses on where the function is called from. JavaScript uses lexical scope, and its scope is determined by where you write the variables and block scope when writing the code, so the scope remains unchanged when the lexical analyzer processes the code. It can be understood that the scope is an independent territory that prevents variables from leaking or being exposed. In other words, the biggest use of scope is to isolate variables, and there will be no conflict between variables with the same name in different scopes.

Let's look at a question before understanding the scope

function foo() {
 console.log(value);
 }
 var value = 1;
 function bar() {
 var value = 2;
 console.log(value);
 foo();
 }
 bar();

What will the above code output? First, the foo() function, the value variable (whose value is undefined), and the bar() function are declared in the global context. During the code execution phase, the bar function context is pushed onto the stack and executed, and the value is printed as 2. Then foo() is executed and foo() is pushed onto the stack. When printing value, the variable cannot be found, so the js engine looks for the upper scope, that is, the global scope, and prints out 1. After the function is executed, the context is popped from the stack. Let’s look at the following function. The scope is layered. The inner scope can access the variables of the outer scope, but not vice versa.

Since ES6, the scopes in js are divided into global scope, function scope, block scope and deception scope.

3.1.1 Global Scope

Objects that can be accessed from anywhere in the code have global scope, the outermost function and variables defined outside the outermost function have global scope, and all undefined and directly assigned variables are automatically declared to have global scope.

3.1.2 Function Scope

Function scope means that all variables belonging to this function can be used and reused within the scope of the entire function (in fact, they can also be used in nested scopes);
This principle means that in software design, the necessary content should be exposed to the minimum extent possible, while other content should be "hidden";
Function expressions can be anonymous, but function declarations cannot omit the function name.
3.1.3. Block scope Block scope, usually refers to the { .. } inside
(1) if, try/catch create block scope;
(2) The let keyword can bind a variable to any scope (usually inside { .. } );
(3) The let at the head of the for loop not only binds i to the for loop block, but in fact it rebinds it to each iteration of the loop, ensuring that it is reassigned with the value at the end of the previous loop iteration;
(4) const can also be used to create block-scope variables, but their values ​​are fixed (constants). The value can be changed when the object is created.
3.1.4. Methods for cheating lexical scope, eval() and with()
The eval() parameter is a string, and the content is treated as the code written at that location (non-strict mode);
When you need to repeatedly reference multiple properties of an object with(), you don’t need to repeatedly reference the object itself.

3.2 Scope Chain

The scope chain is essentially a set of rules for looking up variables (identifier names) by name. The rule is very simple. If a variable cannot be found in its own variable object, it will search in the parent variable object. When it reaches the outermost global context, the search process will stop regardless of whether it is found or not. The search stops when it finds the first matching variable, which is called shadowing.

The purpose of the scope chain is to ensure orderly access to all variables and functions that the execution environment has access to.
Scope chain: When a function is defined, the system generates a ([scope]) attribute, which stores the scope chain of the function. The 0th bit of the scope chain stores the global execution context GO in the current environment. GO stores all global objects, including functions and global variables. When the function is precompiled before execution, the top of the scope chain (0th bit) stores the execution context AO generated by the function, and the first bit stores GO.
To search for a variable, you start from the top of the scope chain where the function is stored and search downwards (the scope inside the function is at the top, which proves that the function can access external variables, but the external cannot access the variables inside the function)

4. The difference between execution context and scope

Every function call has a scope and context associated with it. Fundamentally, scope is function-based and context is object-based. In other words, scope is about how variables are accessed each time a function is called, and each call is independent. The context is always the value of the keyword this, which is a reference to the object that called the currently executable code. The scope is determined when the function is defined. The variables in the function are related to the scope of the function, and the scope in which the function runs is also related to the scope when the function is defined. The context mainly refers to the value of the keyword this, which is determined when the function is running. In simple terms, this refers to whoever calls this function.

5. Last

The above is the detailed summary of js execution context and scope. For more information about js execution context and scope, please pay attention to other related articles on 123WORDPRESS.COM!