First, scope

  • Scope is the area of a program’s source code where variables are defined

  • A scope specifies how to look up a variable, that is, determine the access to the variable for the currently executing code

  • JavaScript uses lexical scoping, also known as static scoping

2. Lexical scope (static scope)

  • The lexical scope is defined at the lexical stage, meaning that the lexical scope is defined at the time the code is written

  • Because JavaScript uses lexical scope, the scope of a function is determined at function definition time. The opposite of lexical scope is dynamic scope, where the scope of a function is determined at the time the function is called

  • In JavaScript, there is only lexical scope, not dynamic scope. The execution mechanism of this makes scope behave like dynamic scope. The binding of this is determined at code execution time

// lexical scope
var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}
 
bar(); / / 1
// It doesn't matter where the function is called, the location of the variable is determined during the lexical analysis phase of the compilation.
Copy the code

Code analysis: execute function foo, first look in its internal scope to see if there is a local variable value, if there is a local variable value, then use the local variable, if not, according to the written code to find the value variable exists 1, this is the lexical scope

Dynamic scope

  • Dynamically scoped variables are called dynamic variables. As long as the program is executing the code segment that defines a dynamic variable, the variable exists for that time; The variable disappears at the end of the code section.
// Dynamic scope
var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}
bar(); / / 2
Copy the code

Code analysis: Execute foo and still look for local variable value from inside foo. If not, the value variable is looked up from within the scope of the calling function, the bar function, so the result prints 2, which is dynamic scope

Four, think about the question

  • Examples from the Definitive JavaScript Guide
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();
Copy the code
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();
Copy the code

Both pieces of code will print: local scope. The reason is simple, too, because JavaScript is lexical, and functions are scoped based on where they are created

JavaScript functions are executed using a scope chain, which is created at the time the function is defined. The nested function f() is defined in the scope chain, where the variable scope must be a local variable. This binding remains in effect when f() is executed, no matter where or when f() is executed