Scope + closure

First, scope

[[scope]] definition:

Every javascript function is an object. Some properties of the object are accessible to us, but others are not. These properties are only accessible to the JS engine. [[scope]] is one of them. [[scope]] refers to what we call scopes, which store a collection of run-time contexts (i.e., scope chains).

All objects have attributes, and functions are also objects. Functions have attributes, such as the name attribute and the unreachable [[scope]] attribute

Runtime context definition:

When a function executes, an internal object called the execution-time context is created. An execution-time context defines the context in which a function is executed. The execution context of a function is unique each time it is executed. So calling a function multiple times results in the creation of multiple execution contexts. When the function completes execution, the execution context it creates is destroyed.

Function test(){} test() //-> AO{Copy the code

Definition of scope chain:

[[scope]] is a collection of execution context objects stored in [[scope]. This collection is linked in a chain called scope chain

Take the face function A for example

Var b = 234} var a = 123 b()} var global = 100 a()Copy the code

<1> Generated when a is defined — a is born in the execution context of its environment<2> EXECUTION of a produces an AO at the top of the scope chain

<3> A finishes destroying its OWN AO and returns to the defined state

B The same for execution!! The AO in B (of A) is the same as the AO in A (of A), taking a reference.

function a() {
    function b() {
        function c(){}
        c()
    }
    b()
}
a()
Copy the code

A defined a. [[scope]] – > 0: GO to perform a a. [[scope]] – > 0: AO (a), 1: GO to define b b. [[scope]] – > 0: AO (a), 1: GO to perform b. b [[scope]] – > 0: AO (b), 1: AO (a), 2: GO to define c c. [[scope]] – > 0: AO (b), 1: AO (a), 2: GO to perform c. c [[scope]] – > 0: AO (c), 1: AO (b), 2: AO, 3: (a) GO

$\color{red}{inside can access the outside, the outside can not see the inside! }$

Find variables: Look down from the top of the scope chain. If you look for variables in a function, you look down the top of the function’s scope chain.

Second, the closure

Definition:

When an internal function is saved externally, a closure is generated.

Disadvantages:

Closures can cause the original scope chain to not be released, causing a memory leak.

Function:

1. Implement public variable eg: function accumulator (Example 3) 2. Cache (storage structure) eg:(Example 5) 3. 4. Modular development to prevent pollution of global variables

Triggering conditions:

Multiple functions are nested, and the inside function is saved outside of the outside function, resulting in a closure. When an inside function executes outside, it must be able to call the variables in its original environment

Example:

function a() { function b() { var bbb = 234 console.log(aaa) //123 } var aaa = 123 return b } var global = 100 var demo Return a(a); return a(b); return a(a); demo()Copy the code

Whenever an internal function is saved externally, it must be a closure. Because the inner function preserves the fruits of the labor of the outer function. 2.

Function a() {var num = 100 function b() {num++ console.log(num)} return b} var demo = a()//a destroy demo() //101 demo() //102Copy the code

Select * from AO(a) where (a).num-> 101; select * from AO(a).num-> 101; Select * from AO(a) where (a).num-> 101; select * from AO(a).num-> 101;

function add() {
    var count = 0
    function demo() {
        count++
        console.log(count)
    }
    return demo
}
var counter = add()
counter() //1
counter() //2
counter() //3
Copy the code

function test() {
    var num = 100
    function a() {
        num++
        console.log(num)
    }
    function b() {
        num--
        console.log(num)
    }
    return [a, b]
}
var myArr = test()
myArr[0]() //101
myArr[1]() //100
Copy the code

function eater() {
    var food = ""
    var obj = {
        eat: function () {
            console.log(`eating ` + food)
            food = ""
        },
        push: function (myFood) {
            food = myFood
        }
    }
    return obj
}
var eater1 = eater()
eater1.push("banana")
eater1.eat() //eating banana
Copy the code