In-depth understanding of scope and context in Javascript_javascript skills

Overview

The implementation of scope and context in Javascript is a unique feature of the Javascript language. To a certain extent, the Javascript language is very flexible. Functions in Javascript can take on a variety of contexts, and scopes can be encapsulated and saved. It is precisely because of these characteristics that Javascript also provides many useful design patterns. However, scope and context are also areas where Javascript programmers often get confused during development.
The following will introduce to you the concepts of scope and context in Javascript, as well as their differences.

Scope VS Context

The first important thing to note is that scope and context are not the same concepts, and they do not refer to the same thing. As a front-end geek, I often see articles that confuse these two concepts. As a result, some things become less clear the more I read them. These two concepts seem to have been confused for a long time. Therefore, I checked a lot of information and briefly explained these two concepts. :stuck_out_tongue_closed_eyes:
In Javascript, when a function is called, there is a scope and context bound to the function. Fundamentally, scope is function-based and context is object-based. In other words, scope applies to access to variables within a function when the function is called. Context usually refers to the value of the "this" keyword, which is a reference to the object that owns the currently executing code.

Variable scope

Variables can be defined in the local or global scope, called local variables and global variables respectively. Global variables refer to variables declared outside the function. Global variables can be accessed anywhere in the program. Local variables refer to variables defined within the function body. They can only be accessed within the function body or nested functions, and cannot be accessed outside the function.
Javascript currently does not support block-level scope (variables defined in if, switch, for, etc. statements). This means that variables defined inside a block can also be accessed outside the block. However, in ES6, we can define block-level scope using the "let" keyword.
Regarding the content of the scope, you can check other information. This part of the content is relatively simple.

"this" context

Context usually depends on how the function is called. When a function is called as a method on an object, "this" refers to the object on which the function was called.

Copy code The code is as follows:

var obj={
foo:function (){
console.log(this === obj);
}
};
obj.foo(); //Output true

Similarly, when we use the "new" keyword to create a new object, this refers to the newly created object.

Copy code The code is as follows:

function foo(){
console.log(this);
}
foo(); //Output window
var obj=new foo(); //Output foo {}

One thing to note is that when a function in the global scope is called, this refers to the global object, which in the browser environment refers to window. However, when running the code in strict mode, "this" is set to "undefined"
Execution Context

Javascript is a single-threaded language, which means that when Javascript is running in the browser, it can only do one thing at a time, and other things will be queued in the method, waiting to be processed.

1. When the Javascript code file is loaded by the browser, the latest entry is a global execution context by default. When a function is called in the global context, the program enters the called function, and the Javascript engine creates a new execution context for the function and pushes it to the top of the execution context stack. The browser always executes the context currently at the top of the stack. Once execution is complete, the context is popped from the top of the stack and then executes code in the context below it. In this way, the contexts in the stack will be executed sequentially and popped off the stack until returning to the global context.

2. An execution context can be divided into two phases: creation phase and execution phase. In the creation phase, the JavaScript interpreter first creates a variable object (also called an "activation object"). Active objects consist of variables, function declarations and parameters. At this stage, the function's scope chain is initialized and the object referenced by this is also determined. Next comes the execution phase, where the code is interpreted and executed.
In Javascript code, there can be any number of function contexts. We already know that when a function is called, the Javascript interpreter will create a new context and a private scope. Any variables declared inside the function will be It cannot be accessed directly outside the scope of the current function.

3. Through the above explanation, we have a basic concept of the "execution context" of the function, but this is also the place where everyone is most confused. The "execution context" in Javascript mainly refers to the scope, not the "this context" referred to in the fourth section above. There are many similar confusing concepts in Javascript, but as long as we understand the specific object that each concept refers to, we will no longer be confused. Therefore, I also hope that everyone can truly distinguish "execution context". and "this context".

In a simple sentence, execution context is a concept related to scope, although this may not be rigorous.

Scope chain

For each execution context, there is a scope bound to it. The scope chain contains the execution context activation object (which sounds a bit convoluted) in the execution context stack. The scope chain determines access to variables and resolution of identifiers.

Code example:

Copy code The code is as follows:

function first(){
Second();
Function second(){
        third();
         function third(){
            fourth();
             function fourth(){
//Code
            }
}
}
}
first();

Execute the above code, and the nested functions will be executed. As far as the above code is concerned, a scope chain will also be formed. The order of the scope chain from top to bottom is: fourth, third, second, first, global. Function fourth can access variables in the global scope and can access any variables defined in functions third, second, and first.
One thing to note is that within the function body, local variables have higher priority than global variables with the same name. If a local variable declared within a function or a variable contained in a function parameter has the same name as a global variable, the global variable will be overwritten by the local variable.
To put it simply, every time we try to access a variable, the program will search for the variable in the scope of the current function. If it cannot be found, it will search along the scope chain to the upper level of the function until the variable is found. If it cannot be found, Returns undefined.

Summary

This article introduces the related concepts of context and scope in javascript. There are also several more important concepts in javascript, such as closures, etc. If you understand these in the future, you will write an article~~