Red Treasure Book Reading Notes Chapter 4

Keywords: Javascript Front-end ECMAScript

Variable scope memory

The es variable has two different types of data: original value and reference value
Original values: undefined, null, boolean, number, string, symbol
The variable that holds the original value is accessed by value
Reference value: an object stored in memory. It is an object composed of multiple values. JavaScript cannot directly access the memory location, so it cannot directly manipulate the memory space where the object is located. When you manipulate an object, you actually manipulate the reference of the object rather than the actual object itself. Variables that hold reference values are accessed by reference (strings are original values, not reference values)

Feynman learning method:
I personally feel that the reference value and pointer should be the same truth, a reference value a point
 One in memory object,
b=a;
b Also point object,So it's similar to a pointer
 Book 85 pictures, very vivid

Transfer parameters

Note that the parameters of all functions in JavaScript are passed by value, which is different from other languages
By passing parameters by value, the value is copied to a local variable
When parameters are passed by reference, the location of the value in memory will be saved to a local variable. Modification inside the function will affect the outside of the function

Prove why it is passed by value
//1
function setName(obj) {
    obj.name = 'zhaosi'
}
let person = new Object()
setName(person)
console.log(person.name)//'zhaosi'

//2
function setNameElse(obj) {
    obj.name = 'zhaosi'
    obj = new Object()
    obj.name = 'la'
}
let person = new Object()
setName(person)
console.log(person.name)//'zhaosi'

First, if passed by reference, the second group should return la,So it's not passed by reference
 And why can passing by value change person.name?
person Copied to obj,Inside a function obj and person All point to the same object, even if the function is passed by value, obj Objects are also accessed by reference. And external changes because obj The object pointed to is stored in the heap memory of the global scope

Baidu defines a pointer as a memory address. I intend to understand it as a variable pointing to an object (I can't tell, that means, anyway, I'm a pointer and I point there, a Equal to me, a Just point there). Passing by reference is to give that memory address to obj,obj=new Object()It doesn't point there, but to a new object; But because of value passing, obj You also have the right to point there, or you can use this direction, but you can't change this direction (you can live in your house, but the house is your parents' name. You can live there or elsewhere, but the house is never yours)

Determine type

The original type is typeof, otherwise it is all object

s='aaa'
o = new Object()
m = null
h = function(){}
console.log(typeof s)
console.log(typeof o)
console.log(typeof m)
console.log(typeof h)

string
object
object
function

therefore instanceof More suitable for reference values

o = new Object()
m = null
h = function(){}
console.log(o instanceof Object)
console.log(m instanceof Object)
console.log(h instanceof Function)
console.log([1,2] instanceof Array)


true
false
true
true

Execution context and scope

First of all, I think the explanation and description of the context in the book are not detailed enough. Anyway, I'm a little confused
, context is the translation of context
https://zhuanlan.zhihu.com/p/348452188
https://www.jianshu.com/p/0d2fb2f2f52c
https://www.php.cn/js-tutorial-407137.html Very good
Feynman learning method: the execution context I understand is the running environment of the current code, which is divided into global environment and function environment
Before execution, the engine will build the global context and put it into the context stack, so the bottom of the stack is always the global context, and it will not come out of the stack until the browser is closed. Then put the corresponding function context on the stack. Each context corresponds to a variable object, which contains variables, functions, etc. of the context. When the context is executed, the variable object becomes an active object, and various properties can be accessed.
Attributes of execution context: variable object, scope chain, this point
Lifecycle of execution context: create, execute
In the creation stage, the variable object is generated, the scope chain is established, and the direction of this is determined; Create an attribute with the function name as the attribute name and the memory address where the function is located as the current value. Create a variable name as the attribute name and undefined as the attribute value
In the execution phase, perform operations such as variable assignment: change it into an active object and assign a value to the variable
Scope chain is the feeling of stringing contexts together. Store the previous context in the [[scope]] attribute, and then put the current one into it. Access a variable from the top and the context from top to bottom
this: point to, determined before execution;
this of global variable and calling function separately is window (non strict mode), otherwise it is undefined; Object calls the function, pointing to the object; Constructor points to instance

Variable declaration

var is added to the nearest context. If var is not written, it is added to the global context
There will be promotion for variable and function declarations

let and const are declarations of block level scopes
No promotion, cannot be declared in the same scope repeatedly

Priority const let var

garbage collection

The execution environment is responsible for managing memory during code execution
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_ That's enough

memory management

Keeping the memory usage at a small value will have better performance. Optimizing memory is to save only necessary data; If the data is unnecessary, it is set to null to free memory, which is called dereference

function createPerson(name) {
    let localP = new Object()
    localP = name;
    return localP
}
//Automatic dereference of local variables
let globalP = new createPerson('aaa')
//Global variables need to be explicitly released
globalP = null

Hidden class

Try to make two objects share the same constructor, and try to avoid constructing first and then supplementing

Memory leak

Memory leak refers to the failure of a program to release memory that is no longer used due to negligence or error in computer science Memory leakage does not mean that there is a physical disappearance in the memory, but that after the application allocates a certain section of memory, due to design errors, the control of the section of memory is lost before releasing the section of memory, resulting in a waste of memory

Try to avoid declaration of global variables
function setName() {
    name ='jake'
}

The timer causes a memory leak
let name = 'jj'
setInterval(() => {
    console.log(name)
},100);//Keep using name so that it cannot be recycled


Careful closure
let outer = function() {
    let name = 'jake'
    return function() {
        return name;
    };
}//Name has a memory leak. As long as outer exists, name cannot be cleaned up

Static allocation and object pool

Avoid redundant garbage collection and reduce the number of browser garbage collection

Posted by Smruthi on Sat, 06 Nov 2021 05:36:34 -0700