Examples explain JavaScript static scope and dynamic scope in detail

Preface to the table of contents Static scope and dynamic scope Static scope execution process
Dynamic scope execution process
Exercise Exercise 1
Exercise 2
Exercise 3
Summarize

Preface

At the beginning of the article, learn a few concepts:

Scope: "What You Don't Know js" states that scope is a set of rules that govern how the engine looks up variables based on identifier names in the current scope and nested sub-scopes. Simply put, scope specifies how to find variables. Static scope: Also known as lexical scope, the scope of a function is determined when the function is defined. In common terms, it is determined by where you write variables and block scopes when you write code. Dynamic scope: The scope of a function is determined when the function is called.

Static scope and dynamic scope

JavaScript uses static scope, and the location of the function definition determines the scope of the function.

Look at an example to understand what is the difference between static scope and dynamic scope in 1

var val = 1;
function test() {
    console.log(val);
}
function bar() {
    var val = 2;
    test();
}

bar();
//  The result is? ? ? 

In the above code:

We first define the global variable val and assign it to 1 Declare a function text whose function is to print the value of the variable val Declare a function bar, which defines a local variable val and assigns a value of 2; And the function executes the test () function internally Execute the bar () function

Static scope execution process

When executing the test function, first find whether there is a variable val from the inside of the test function. If not, find the code of the upper layer along the position of the definition function, and find the global variable val with a value of 1.

Scope lookups always start at the innermost scope of the runtime and step out until the first matching identifier is encountered.

No matter where a function is called, however it is called, its scope is determined only by the location of the function definition.

Dynamic scope execution process

To execute the test function, first query the val variable from inside the function. If not, search the variable val from inside the scope of the calling function, that is, the scope of the bar function, so print the result 2

Exercise

Let's look at three exercises, and well digest and understand the static scope under 1: the function definition position determines the scope.

Exercise 1

var a = 1
function fn1(){
    function fn3(){
        var a = 4
        fn2()
    }
    var a = 2
    return fn3
}
function fn2(){
    console.log(a)
}
var fn = fn1()
fn()

In the above code:

We first define the global variable a and assign it to 1 Declare a function fn1. The function fn3 is declared inside the function, the local variable a is defined, the assignment value is 2, and the return value is fn3 function The fn3 function internally defines the local variable a, assigns a value of 4, and executes fn2 () Declare the function fn2, and the function's function is to print the value of a fn is assigned to the return value of fn1 () Execute fn () (equivalent to executing fn3 function)

Before doing the problem, 1 must understand the concept of static scope. This question fn2 is defined in the global. When the variable a cannot be found in fn2, it will look for it in the global, which has nothing to do with fn1 and fn3. Print 1.

Exercise 2

var a = 1
function fn1(){
    function fn2(){
        console.log(a)
    }
    function fn3(){
        var a = 4
        fn2()
    }
    var a = 2
    return fn3
}
var fn = fn1()
fn()

fn2 is defined in the function fn1, so when there is no variable a in fn2, it will look for it in fn1, which has nothing to do with the function fn3. If it cannot be found in fn1, it will look for it in the upper layer (global) of the position defined by fn1 until the first matching identifier is found. This topic can be found in fn1 variable a, print 2

Exercise 3

var a = 1;
function fn1(){
    function fn3(){
        function fn2(){
            console.log(a)
        }
        var a;
        fn2()
        a = 4
    }
    var a = 2
    return fn3
}
var fn = fn1()
fn()

This question fn2 is defined in the function fn3. When the variable a cannot be found in fn2, it will be searched in fn3 first, and if it cannot be found, it will be searched in fn1. This topic can find the variable a in fn3, but because fn2 () is executed, a is not assigned, so print undefined.

Summarize

As for the static scope of JavaScript, we only need to remember one sentence: the position of function definition determines the scope of function, so don't be disturbed by other codes when encountering problems.