This is the 11th day of my participation in the August More Text Challenge
Stack memory in javascript and freeing
1.1 Create and free heap memory in JS
Memory classification in the JS engine:
- Stack memory (scope) The environment in which JS code executes and holds basic data types
- Heap memory: Stores reference data types
1.2 Creation and destruction of heap memory
1.2.1 heap to create
When an object, array, function, or other reference data type is created, the browser allocates a heap memory address to store the reference data type.
var obj = {
name: 'River Glaze'.age: 10.courses: ['How did the advanced front end come together?'.'How to make a front End FE man'.'How UI Designers Are Made']};// Every time a reference data type is created, the browser creates a heap and assigns the address of the heap to the obj variable
Copy the code// obj refers to the heap,
var obj2 = obj; // Obj2 also references this block of heap memory
Copy the code1.2.2 Heap Memory Release
Set all variables that reference the address of the heap space to null (there are no variables occupying the heap, and the browser will free it when it is free)
obj = null; // 将obj指向空对象指针null
obj2 = null; // Point obj2 to the null object pointer null
Copy the code1.3JS stack memory is opened and released
- Stack memory (scope) : The environment where JS code is executed and where basic data types are stored
1.3.1 Stack memory creation:
- When the browser is opened, a top layer of stack memory is opened, which is the global scope.
- When a function executes, it also opens up stack memory (private scope) for the function code to execute
function add(a, b) {
var total = 0;
total = a + b;
return total;
}
Copy the codeEach time a function is executed, it forms a new stack memory, that is, each function execution is executed in a new environment, so each function execution is independent of each other;
add(1.2);
add(1.3);
add(1.2);
function fe() {
return {
q1: 'q1'}}var o1 = fe(); //
var o2 = fe();
console.log(o1 === o2); // false fe creates several objects, so o1 and o2 are two different heap memory without any relation.
Copy the code1.3.2 Stack Memory Destruction:
- Global stack memory: destroyed only when the page is closed
- Private scope of functions: normally, stack memory is destroyed automatically after a function is executed. But there are some special cases to be aware of;
1.4 The stack memory is not destroyed
-
Function stack memory: Normally, function execution forms a stack memory (scope) that is automatically destroyed when the function execution is complete.
-
However, after the function is executed, some contents of the current stack memory are occupied by variables outside the stack memory, and the stack memory cannot be released (once released, the original contents can not be found outside the stack memory). Stack memory is not destroyed, and data stored in stack memory is not destroyed
1.4.1 Function Return Value Is Occupied
function fe() {
return {
name: "River Glaze"}}var obj = fe(); // The fe function is executed to form an indestructible stack memory. Objects defined in the stack are occupied by external obj variables, so the scope is not destroyed
fe(); // They normally form stack memory, but are destroyed after execution
Copy the code1.4.2 The scope of function execution is not destroyed when the reference data type inside the function is occupied by the outside.
var x = null;
function fn() {
x = {
name: 'q1'}}; fn();{name: 'q1'}}
Copy the code1.5 An example of cumulative counting
- Requirements: to achieve a cumulative count function, click once, so that the number in the button cumulative;
var btn = document.getElementById('btn');
Copy the code- There must be a place where the last value is stored. The key is where to store it.
1.5.1 Saving values in global scope
var count = 0; // count is stored in the global scope
btn.onclick = function () {
count++; // Manipulate global variables
btn.innerHTML = count;
};
Copy the code1.5.2 Customizing non-destructible private scopes
btn.onclick = (function () {
var count = 0; // The value of count is saved in
return function () {
btn.innerHTML = count;
}
})();
Copy the code1.5.3 Customizing the undestroyed function scope 2
(function () {
var count = 0; // Count is stored in the private scope of the self-executing function
btn.onclick = function () {
count++;
this.innerHTML = count;
}
})();
Copy the code1.5.4 Block-level scope
Let/const turns curly braces into a block-level scope, equivalent to a private scope, where the value of count is stored
{
let count = 0; //
btn.onclick = function () {
count++;
this.innerHTML = count; }}Copy the codeLet & const
Let const is a new ES6 keyword for declaring variables
- Let is used to declare common variables
- Const is used to declare constants
2.1 Differences between let & const and VAR
2.1.1. Let const there is no variable promotion. Variables declared using let const can only be used after definition
console.log(a); // a is not defined
let a = 0;
console.log(b); B is not defined
const b = 12;
Copy the code2.1.2 let const repeat declaration
You can’t declare variables twice (or var or function)
var n = 1;
var n;
var n = 2;
let n = 1; // declared: a has already been declared
Copy the code2.1.3 Let const has no effect on Window
Global variables or constants do not add global attributes like var window.
var num = 100;
console.log('num' in window); // The true in operator checks whether an object has an attribute
let css = 'css3';
console.log('css' in window); // false
Copy the code2.1.4. Let const temporary dead zone;
Occurs in code blocks, which form block-level scopes:
- If (condition) {let const in curly braces creates block-level scope}
let num1 = 2;
if (true) {
let num1 = 4;
console.log(num1); / / 4
}
Copy the code- for(…) {code block in the for loop}
for (var i = 0; i < 12; i++) {
console.log('Var has no block-level scope')}console.log(i); // var will expose I as a global variable
for (let j = 0; j < 3; j++) {
console.log('Let j j won't get out')}console.log(j); // Uncaught ReferenceError: j is not defined
Copy the code- Use {} to form block-level scopes
{
let a = 1;
console.log(a); // A is the block-level scope
}
{
let m = 12; // m's block-level scope is the parent of the next block-level scope and also follows the lookup rules of the scope chain
{
console.log(m); }}Copy the codeTDZ: Temporary Dead Zone
Variables declared with let const in a code block cannot be used before the declaration.
let q = 12;
if (true) {
console.log(q); // This variable q is locked by let in the block-level scope,
let q = 14;
}
Copy the code2.2 Details of const declaration variables
2.2.1 Const must be assigned when declared
let m;
var m;
const m; // Missing initializer in const declaration
Copy the code2.2.2 Once a value is defined, it cannot be modified
const num = 12;
num = 15; Error:Copy the code2.2.3 Const The reference type declared
If a const declares a constant to be a reference data type, the reference address of the constant with a table cannot be changed, but the contents of the heap can be changed.
const ary = [1.2.3];
ary.push('33');
console.log(ary);
// ary = [1, 3, 5]; / / error:
Copy the code