This is the 20th day of my participation in the Genwen Challenge

JavaScript is a language that uses lexical scope, or static scope. This means that the function is executed using the variable scope in which the function was defined, not the variable scope in which the function was called. The opposite is dynamic scoping, where the scope of a function is determined at the time the function is called.

Take a look at a piece of code and guess what it says.

let name = 'LvLin';

function funcA() {
    console.log(name);
}

function funcB() {
    let name = 'Lvalue';
    funcA();
}

funcB()  // What is the output?
Copy the code

Since JavaScript is static scoped, the name that funcA outputs should be the outer scope in which funcA was defined, the global variable name, so it outputs LvLin.

If it is dynamically scoped, then the name in funcA is the name of the scope in which it was called, as defined in funcB, and the output is Lvalue.

Execution context

JavaScript execution context is divided into global context and local context. Local context includes function context and block-level context. The context in which variables or functions are placed determines what data they can access.

let name = 'LvLin';  // in the global context

function funcA() {
    console.log(name); // in function context of funcA
}

function funcB() {
    let name = 'Lvalue'; // in the function context of funcB
    funcA(); 
}

funcB()  
Copy the code

The local context is destroyed after all of its code has been executed, including all variables and functions defined on it. The global context is not destroyed until the application exits, for example from the browser.

Execution context stack

Whenever the code execution stream enters a function, the context for that function is created and pushed into a context stack, which pops up after the function completes execution, returning control to the previous execution context.

With Chrome’s development tools, you can see how the context stack changes when executing code.

The variable object

Each execution context has an associated variable object on which all variables and functions defined in that execution context reside.

Also with Chrome’s developer tools, we can see variable objects for each context. Look at the context variable object for funcB as shown below:

Local shows the variables in the current function, and you can see their values highlighted in the source code. Global displays Global variables (not in any function).

The scope chain

Code that executes the context creates a chain of scopes for the variable object when executed. This chain of scopes determines the order in which the code at each level of context accesses variables and functions. The variable object of the context in which the code is executing is always at the front of the scope chain.

The next variable object in the scope chain comes from the containing context, the next variable object comes from the next containing context, and so on, the variable object in the global context is always the last variable object in the scope chain.

Identifier resolution (that is, getting the value of a variable) at code execution is a hierarchical search of the identifier name down the scope chain until it is found, and usually an error is reported if it is not found.

let name = 'LvLin';

function funcA() { // The scope chain is a global variable object -> funcA variable object
    console.log(name);   // The current variable object has no name, look up the global variable object along the scope chain
    // find name = 'LvLin'
}

function funcB() {
    let name = 'Lvalue'; 
    funcA(); 
}

funcB()  
Copy the code

The last

If the article is helpful to you, give it a thumbs up

The relevant data

JavaScript Advanced Programming

Hu Yu’s blog