1. Language type

Static language VS dynamic language

Static language, before using a variable, need to confirm the data type of the variable;

In contrast, dynamic languages need to check data types at run time

Strongly typed vs. weakly typed

Languages that support implicit conversions are called weakly typed languages.

Conversely, those that are not supported are called strongly typed languages

The JavaScript language

(1) JavaScript is a weakly typed, dynamic language

Weakly typed, which means you don’t have to tell the JavaScript engine what the data type of the variable is, the JavaScript engine calculates it at run time, right

Dynamic, which means you can use the same variable to hold different types of data

(2) JavaScript has eight data types, divided into primitive and reference types

If you want to see the typeof a variable, you can use the “typeof” operation. However, when Typeof detects Null, Object is returned. This is an original JavaScript Bug

2. Memory space

1. Memory space type

During the execution of JavaScript, there are mainly three types of memory space: code space, stack space and heap space

2. Data type to be stored

Data values of primitive types are stored in the stack, and values of reference types are stored in the heap

(1) Because the JavaScript engine needs to use the stack to manage the state of the execution context, if the stack space is large, it will affect the efficiency of the context switch, and then affect the execution efficiency of the whole program, so the stack is mainly used to store some small data of primitive types

(2) The heap space is large, and the reference type of data occupies a large space, will be stored in the heap, but the disadvantage is that the allocation and reclamation of memory will take a certain amount of time

3. Variable assignment

An assignment of a primitive type copies the value of a variable, while an assignment of a reference type copies the address of the reference. The data in the heap is associated with the variable by reference. That is, JavaScript variables have no data types, values have data types, and variables can hold any type of data at any time

3. Memory allocation and reclamation of closures

function foo() { 
    var myName = "Your time" 
    let test1 = 1 
    const test2 = 2 
    var innerBar = { 
        setName:function(newName){ 
            myName = newName 
        }, 
        getName:function(){ 
            console.log(test1) 
            return myName 
        }
    } 
    return innerBar 
} 
var bar = foo() 
bar.setName("Your name") 
bar.getName() 
console.log(bar.getName()) 
/ / 1
//" Your name"
Copy the code

When the execution context of function foo is destroyed, the variables myName and test1 are not destroyed, but are stored in memory, because foo generates a closure.

From the perspective of the memory model, analyze the execution flow of this code:

  1. First, js code is compiled and then run before execution, so a global execution context is created first.

  2. Then, when function foo is called, the execution context of the function is compiled and created;

  3. Closure (foo); closure(foo); closure(foo); closure(foo); closure(foo); closure(foo); JavaScript is not accessible), used to hold the referenced **** variables myName and test1, and the collection of these referenced variables forms a closure;

  4. Because test2 is not referenced by an internal function, test2 remains on the call stack;

How do you access the variables of the original function after the execution context is popped up?

When foo is executed, both the getName and setName methods return a reference to a “clourse(foo)” object, so the next time you call bar.setName or bar.getName, you create an execution context that includes “clourse(foo),” This object is used to access the variables of the original function

In summary, there are two core steps to generating closures: the first step is to pre-scan the internal functions; The second step is to save the external variables referenced by the inner function to the heap

One more question, how do closures get recycled?

In general, if the function referencing a closure is a global variable, the closure will remain in place until the page closes; If this closure is not used in the future, it will cause a memory leak;

If the function that references the closure is a local variable, the JavaScript engine’s garbage collector will reclaim the memory if the closure is no longer used when the JavaScript engine performs garbage collection next time after the function is destroyed.

One rule to follow when using closures is this: if the closure is always in use, it can exist as a global variable. But if it’s used infrequently and takes up a lot of memory, try to make it a local variable