Scope and context in JavaScript deep understanding of _javascript techniques

Overview

The implementation of scopes and contexts in JavaScript is a unique feature of the JavaScript language and, to some extent, the JavaScript language is very flexible. Functions in JavaScript can take a variety of contexts, and scopes can be encapsulated and saved. Because of these features, JavaScript also provides a number of useful design patterns. However, scopes and contexts are also areas where JavaScript programmers are often confused in development.
Here's a description of the scope and context concepts in JavaScript, and their differences.

Scope VS Context

The important point to begin with is that scopes and contexts are not the same concept, they refer to not the same thing. As a front of the food forcing, often see some articles to confuse the two concepts, the result of some things more and more do not understand. These two concepts seem to have been confused for a long time. Therefore, a lot of information has been searched and the two concepts are briefly explained. : Stuck_out_tongue_closed_eyes:
In JavaScript, when a function is called, a scope and context are bound together with the function. Fundamentally, scopes are based on functions and contexts are object-based. In other words, scopes apply to the access rights of variables in a function when a function is invoked. The 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 either local or global scope, known as locals and global variables. A global variable is a variable declared outside the body of a function that can access global variables anywhere in the program. A local variable is a variable defined in the body of a function that can only be accessed within a function body or nested functions and cannot be accessed outside the function.
JavaScript does not currently support block-level scopes (variables defined in if, switch, for, and so on). This means that variables defined within a block can also be accessed outside the block. However, in ES6, we can use the "let" keyword to define block-level scopes.
On the scope of the content, you can check the other data, this part of the relatively simple.

The "This" context

Contexts (context) usually depend on how the function is invoked. When a function is invoked as a method of an object, "This" refers to the object that calls the function.

Copy Code code as follows:

var obj={
Foo:function () {
Console.log (this = = obj);
}
};
Obj.foo (); Output true

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

Copy Code code 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 a global scope is called, this refers to a global object, and window is the middle finger in the browser environment. However, if you run code in strict mode, "This" is set to "undefined"
Execution Contexts (Execution context)

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

1. When the JavaScript code file is loaded by the browser, the default latest entry is a global execution context. When a function is called in the global context, the program stays inside the called function, at which point the JavaScript engine creates a new execution context for the function and presses it onto the top of the execution context stack. The browser always executes the current context at the top of the stack, and once executed, the context is ejected from the top of the stack, and then the context under which the code executes. The context in the stack is then executed sequentially and the stack pops up until it returns to the global context.

2. An execution context can be divided into two phases: the creation phase and the execution stage. During the creation phase, the JavaScript interpreter first creates a variable object (also "active object", activation object). The active object consists of a variable, a function declaration, and a parameter. At this stage, the scope chain of the function is initialized, and the object referenced by this is also determined. The next step is the execution phase, at which the code is interpreted and executed.
In JavaScript code, there can be any number of function contexts, and we already know that when a function is invoked, the JavaScript interpreter creates a new context and creates a private scope, and any variables declared within the function cannot be accessed directly outside the current function scope.

3. By the above explanation, we have a basic concept of the "execution context" of a function, but this is also one of the most confusing places. The "execution context" in JavaScript primarily refers to the scope, not the "This context" in section fourth above. There are a lot of similar confusing concepts in JavaScript, but as long as we figure out what each concept refers to, we don't get confused anymore, so we want to be able to really separate the "execution context" and "this context".

In a nutshell, the execution context is the concept associated with the scope, although that may not be very rigorous.

Scope chain

For each execution context, there is a scope that binds to it. The scope chain contains the execution context activity object (activation object) in the execution context stack that sounds a bit around the mouth. The scope chain determines the access of variables and the resolution of identifiers.

code example:

Copy Code code as follows:

function A () {
Second ();
function second () {
Third ();
function third () {
Fourth ();
function Fourth () {
Code
}
}
}
}
A ();

Executing the above code, nested functions will be executed. In the code above, a scope chain is also formed, and the order of the scope chain from top to bottom is: Fourth, third, second, one, and global. Function fourth can access variables in the global scope and can access any variables defined in the function third, second, and a.
It is important to note that in the body of a function, local variables have precedence over global variables of the same name. A global variable is overwritten by a local variable if the variable and the global variable have the same name as the local variable or function argument declared within the function.
In short, every time we try to access a variable, the program looks for the variable in the scope of the current function, and if it can't find it, go to the upper level of the function to find it, until it finds it, and returns undefined if it is not found.

Summarize

This article introduces the concepts of context and scope in JavaScript, and there are a few more important concepts in JavaScript, such as closures, which are later written in the article ~ ~