Deep understanding of JavaScript scopes the lexical scope and dynamic scope _javascript techniques for the second article

Front.

Most of the time, the main reason for our confusion about the scope is that it is not clear whether the variable should be found in the nesting order of the function, or in the order in which the function is called. Plus the interference of this mechanism makes the variable lookup extremely error prone. This is actually caused by two kinds of scope working models, the scope is divided into lexical scope and dynamic scope, so distinguishing these two scope models can make a clear understanding of the variable lookup process. This article is a deep understanding of the JavaScript Scope series second-lexical scope and dynamic scope

Lexical scopes

In the first chapter, the compiler's first working phase is called participle, which is to decompose a string composed of characters into lexical units. This concept is the basis for understanding lexical scopes

Simply put, the lexical scope is defined as the scope of the lexical phase, which is determined by where the variables and block scopes are written when the code is written, so that when the lexical analyzer processes the code, it remains scoped

Relationship

Regardless of where the function is invoked, and no matter how it is invoked, its lexical scope is determined only by where the function is declared

function foo (a) {
var b = A * 2;
function Bar (c) {
Console.log (A, B, c);
}
Bar (b * 3);
}
Foo (2); 2 4 12

In this example, there are three nested scopes. To help understand, think of them as a few bubbles that are progressively included.

Scope bubbles are written where the corresponding scope block code is determined, they are progressively contained

Bubble 1 contains the entire global scope, with only one identifier: foo

Bubble 2 contains the scope created by Foo, which has three identifiers: A, bar, and B

Bubble 3 contains the scope created by bar, which has only one identifier: C

Find

The structure of the scope bubbles and the position relationship between each other provide enough location information for the engine to find the location of the identifier with this information

In the code fragment, the engine executes the Console.log (...) Declaration and find references to three variables in a, B, and C. It starts with the most internal scope, which is bar (...). The scope of the function begins the lookup. The engine cannot find a in here, so it goes to the upper level to the nested foo (...) continues to find in the scope of the A is found here, so the engine uses this reference. It's the same for B. And for C, the engine is in bar (...). Found it in the

[note] The lexical scope lookup will only look for a level identifier, and if the code references Foo.bar.baz, the lexical scope lookup will only attempt to find the Foo identifier, after which the object property access rules take over access to bar and Baz properties, respectively.

Foo = {
bar:{
baz:1
}
};
Console.log (Foo.bar.baz);//1

Covered

Scope Lookup starts at the most internal scope at run time, step outwards or upwards until the first matching identifier is met

An identifier with the same name can be defined in a multi-tiered nested scope, called the "shadowing effect", and the internal identifier "obscures" the external identifier

var a = 0;
function test () {
var a = 1;
Console.log (a);//1
}
Test ();

Global variables are automatically properties of global objects, so you can access them indirectly through references to global object properties, not directly through the lexical names of global objects.

var a = 0;
function test () {
var a = 1;
Console.log (WINDOW.A);//0
}
Test ();

This technique allows access to global variables that are obscured by variables of the same name. But non-global variables, if obscured, cannot be accessed in any way

Dynamic scopes

JavaScript uses a lexical scope, and its most important feature is that its definition process takes place in the writing phase of the code

So why do you want to introduce dynamic scopes? Actually the dynamic scope is another important mechanism of JavaScript this cousin. The scope confusion is mostly due to the confusion between the lexical scope and the this mechanism.

Dynamic scopes do not care about how functions and scopes are declared and declared at any point, but only about where they are invoked. In other words, the scope chain is based on the call stack, not on the scope nesting in the code

var a = 2;
function foo () {
console.log (a);
}
function Bar () {
var a = 3;
Foo ();
}
Bar ();

"1" is in the lexical scope, which is now the JavaScript environment. Variable A is first looked up in the Foo () function and is not found. It then follows the scope chain to the global scope, finds it, and assigns a value of 2. So the console outputs 2

If "2" is in a dynamic scope, similarly, variable A is first looked up in Foo () and is not found. This will look in the call stack at the place where the Foo () function is called, the bar () function, and find and assign a value of 3. So the console outputs 3

　　Summary: The difference between the two scopes, in short, the lexical scope is defined at the time of definition, and the dynamic scope is determined at runtime

The above is a small series to introduce the in-depth understanding of JavaScript scope of the second part of the lexical scope and dynamic scope, I hope to help you, if you want to learn more content please pay attention to cloud habitat community!