The first stage of a compiler’s work is called lexical, or lexicalization. This phase checks for characters in the code

This is where the lexical scope gets its name.

To put it simply: the lexical scope depends on where you write the variable and block-level scope when you write code, and the lexical analyzer keeps the scope the same when it processes the code.

Scoped bubbles

In the figure above, there are three scopes.

The light green scope is the global scope and contains an identifier foo. The orange scope is the scope created by Foo and contains three identifiers b, A, and bar. The blue scope is the scope created by bar and contains only one identifier C

How does the engine find identifiers?

The scope nesting structure gives the engine enough information to find.

Console.log () is first searched from the bar scope when executed. If the bar scope contains variables, it doesn’t look up.

If it doesn’t, it keeps looking up.

Scoped lookups stop when the first matching identifier is found

2.1. Masking effect

If the same identifier is defined in different scopes, the inner identifier overshadows the outer identifier (starting from the scope in which the code runs).

If the shaded identifier is in global scope, it can be obtained from a global object, such as window.a. Otherwise, the masked identifier cannot be queried.

2.2. How to determine the scope position?

No matter where or how a function is called, its lexical scope is determined only by the position in which the function is declared.

3. Deceptive morphology

Can a function change its scope at run time?

In JS, there are two mechanisms for cheating morphology. These are eval and with

3.1. How does Eval cheat?

Eval can execute a string as if it were a piece of code in that place.

eval('console.log(1)')

Output: 1

Let’s look at the following code

function foo (str, a) {
    eval(str)
    console.log(a, b)
}

b = 2

foo('var b = 3; '.1)
Copy the code

Normally, console.log(a, b) does not have b in scope foo. The global scope is looked up.

But eval(‘var b = 3’) is executed. When Foo is run, eval modifies the scope’s environment.

So the code above will print: 1, 3 instead of 1, 2 as in the journey case

3.2. How does with cheat lexical scope?

Before we talk about with and scope, let’s look at what it does.

var obj = {
    a: 1.b: 2.c: 3
}

with(obj){
    a: 2.b: 3.c: 4
}
console.log(obj)
Copy the code

Execution Result:

As you can see, with with it is possible to eliminate the need for repeated references to the object itself.

Relationship between with and lexical scope

With can handle an object with no or more attributes as a fully isolated lexical scope, and the attributes of the object are defined as lexical identifiers within the scope.

The with syntax creates a whole new lexical scope depending on the object you pass.

Here’s an example:

function foo (obj) {
    with (obj) {
        a = 2}}var o1 = {a: 3}
var o2 = {b: 3}

foo(o1);
console.log(o1.a) 3 / / output

foo(o2)
console.log(o2.a) / / output is undefined
console.log(a) // 2 memory leaks
Copy the code

When the code above executes foo(o2), with creates a new scope for O2

There is only b in the scope of O2, so WE output O2. A is undefiend

So why does A leak into the global scope?

This is because when a = 2 is executed, a is not defined and LHS references are made to automatically create a variable globally.

The LHS references here are from my previous article [javascript series you Don’t Know] – what is scope today

Eval and with are not recommended

When eval and with are executed, completely new scopes are created, cheating the scope of the lexical definition.

JS engine in the compilation stage, code optimization is based on lexical parsing, know the definition of all variables and functions in advance, in order to execute the code, quickly find the location of variables.

Because eval and with are compiled in such a way that it is impossible to determine where the code will be executed, the JS engine does not optimize eval and with.

So the benefits of using Eval and with do not compensate for the performance loss.

All read here, move your hand, like before you go, wish you 2021, want everything.

I am Alfy, a GTD practitioner, a deep work practitioner.

Advertising Time:

I made a public account: green lemon reading club, I hope to grow up on the road, accompanied by you.