Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

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

  • Scope:Js you Don't Know, a scope is a set of rules that govern how the engine performs variable lookups based on identifier names in the current scope and nested subscopes. Simply put, a scope specifies how variables are found.
  • Static scope: also known as lexical scope, the scope of a function is determined when the function is defined. In plain English, the scope of variables and blocks is determined when you write code.
  • Dynamic scope: The scope of a function is determined when the function is called.

Static and dynamic scopes

JavaScript is static scoped, and the position of the function definition determines the scope of the function. See an example to understand the difference between a static scope and a dynamic scope

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

bar();
// The result is...?
Copy the code

In the code above:

  • Let’s start by defining global variablesvalFor, an assignment1
  • Declare a functiontext, the function printsvalThe value of this variable
  • Declare a functionbarLocal variables are defined inside the functionvalFor, an assignment2; And the function is executed internallytest()function
  • performbar()function

Static scoped execution procedure

When the test function is executed, it first looks inside the test function to see if there is a variable val. If there is no variable val, it looks for the global variable val, which has a value of 1, along the line where the function is defined.

Scoped look-ups always start at the innermost scope in which the runtime is located and work outward until the first matching identifier is encountered.

No matter where or how a function is called, its scope is determined only by where the function is defined.

Dynamic scoped execution process

The test function is executed and val is first queried from within the function. If not, val is searched from within the scope of the calling function, that is, the bar function, so 2 is printed

Problem sets

Let’s take a look at three exercises to digest the static scope: the function definition position determines the scope.

Problem sets a

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()
Copy the code

In the code above:

  • Let’s start by defining global variablesaFor, an assignment1
  • Declare a functionfn1The inside of the function declares the function separatelyfn3, define local variablesaFor, an assignment2, the return value isfn3function
  • fn3A function defines local variables internallyaFor, an assignment4, the implementation offn2()
  • Declare functionsfn2The function printsaThe value of the
  • fnThe assignment forfn1()The return value of the
  • performfn()(Equivalent to carrying outfn3Function)

Before you do this, be sure to understand the concept of static scope. Fn2 is defined globally. If the variable a cannot be found in Fn2, it will look for the variable globally, which has nothing to do with Fn1 and fn3. Print 1.

Problem set 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()
Copy the code

Fn2 is defined in function fn1, so when there is no variable a in fn2, it will look in fn1, which has nothing to do with function fn3. If it cannot find in Fn1, it will look in the layer above the position defined by fn1 (global) until it finds the first matching identifier. In this case, the variable a can be found in fn1. Print 2

Problem sets three

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()
Copy the code

This problem fn2 is defined in function fn3. If variable A cannot be found in fn2, it will be searched in FN3 first. If it cannot be found, it will be searched in Fn1. In this case, we can find the variable a in fn3, but because fn2() is executed, a is not assigned, printing undefined.

conclusion

There’s only one thing to remember about static scope in JavaScript: the location of the function definition determines the scope of the function, and don’t let other code interfere with the problem.

And the process of finding variables in problem two and problem three is essentially searching along the scope chain. For more information about the scope chain, please look forward to the following.

JavaScript in-depth study column table of contents

  • A thorough understanding of prototypes and prototype chains in JavaScript
  • JavaScript precompilation learning
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem
  • JavaScript hand rip call, apply