Written in front, this is I will begin to write a series, mainly in the framework of time, although USES the framework to work, but for the interview, and advanced technology, the basics of JS bedding is the icing on the cake, also had to learn a piece of knowledge, though the car does not need to be very good car, you just need to master automobile commonly used functions. But if you know cars, you can drive better, same thing. Of course, an article will not only talk about a knowledge point, generally will be linked to the knowledge point series, while recording their own learning, while sharing their own learning, mutual encourage! If possible, please also give me a like, your like can also make me work harder to update!

An overview of

  • Serving time: 6-12 minutes
  • Difficulty: Easy, don’t run, watch before you walk

JS Memory lifecycle

  • Allocate memory

  • Memory read and write

  • Free memory

Stack memory and heap memory

JS data types

Before we talk about stack memory and heap memory, you should know that JS has two types of data:

  • Basic data type

String, Number, Boolean, null, undefined, Symbol (fixed size, light, relatively simple)

  • Reference data type

Object, Array, Function

Memory storage mechanism

var a=true;      // Boolean is the basic data type
var b='jack';    // Character, basic data type
var c=18;        // Numeric, basic data type
var d={name:'jack'};   // Object, reference data type
var d=[0.1.2.3.4.5];   // Array, reference data type
Copy the code

Because of the different types of data, they are stored in different ways, which is completely different from where the rich and poor live in real life (digresse). Let’s start with a picture:

As you can see, a, B, and C are all basic data types. D and E are all reference data types. There is a fundamental difference in the way they are stored. The stack memory simply holds a reference to its stack memory (that is, its address in heap memory), which, like its name, refers to the data type

Memory access mechanism

The basic data type can access the value of the variable directly from the stack memory, while the reference data type must first find its corresponding reference address from the stack memory, and then take this reference address, look in the heap memory, to get the value of the variable

Depth copy

  • Shallow copy

I’ve already told you about the difference between basic data types and reference data types in storage, so I’m going to talk about this deep and shallow copy, which I think you will often encounter in the interview questions, the old way, let’s look at a piece of code first

var name='jack';
var obj={
  age:24
};

var nameCopy=name;
var objCopy=obj;

nameCopy='bob';
objCopy.age=15;

console.log(name);    //jack
console.log(obj.age);     / / 15
Copy the code

As you can see, the name is not affected, and we changed objcopy. age to obj.age. Why is obj.age still affected

Var objCopy=obj; var objCopy=obj; var objCopy=obj; var objCopy=obj; When we change objCopy, we also change the value of obj. This is called a shallow copy. We only copy the reference to the object, and we don’t open up new memory. The copy is too shallow. (Shallow copies occur only for reference types)

  • Deep copy

Let’s look at the next piece of code

var name='jack';
var obj={
  age:24
};

var nameCopy=name;
var objCopy=JSON.parse(JSON.stringify(obj));

nameCopy='bob';
objCopy.age=15;

console.log(name);    //jack
console.log(obj.age);     / / 24
Copy the code

After json.parse (json.stringify (obj)), the shallow copy no longer exists, and this wave is a deep copy. The deep copy opens up a new heap memory address and references the object to the new memory address, completely independent of the previous copied object. Copy ground is very deep, learn kung fu to learn home, the feeling of independent portal.

  • Another way to implement deep copy (more ways please click here)

var objCopy=Object.assign({},obj); Object.assign var arrayCopy=array.concat(); ArrayCopy =array.slice(); // arrayCopy=array.slice(); Parse (json.stringify (array))) // By the way, json.parse (json.stringify ()) is used for arrays and objectsCopy the code

Take a look at an example where the array above is prone to potholes

var array = [{name: 'jack'},'old']].var arrCopy = array.concat();
arrCopy[0].name='new';
console.log(array); // [{name: 'new'}, ['old']]
console.log(arrCopy); // [{name: 'new'}, ['old']]
Copy the code

**(Concat and Slice only work if the array has no nested objects or is available)**

Series directory

  • This article understands JS series (a) compilation principle, scope, scope chain, variable promotion, temporary dead zone

  • This article understands JS series (2) JS memory life cycle, stack memory and heap memory, depth copy

  • JS series (3) to understand the garbage collection mechanism, memory leaks, closures

  • Understand JS series (four) closure application – Currie, partial function

  • Understand JS series (five) closure application – tremble, throttling

  • JS series (6) micro task and macro task, Event Loop

  • JS series (7) constructor, new, instance object, prototype, prototype chain, ES6 class