Verstehen Sie den Lebenszyklus des JS-Speichers, den Stapelspeicher und den Heap-Speicher sowie die tiefe und flache Kopie in der JS-Serie (2) auf einem Blatt Papier

Vorn geschrieben: Unter der Spalte Javascript werde ich bald mit dem Schreiben dieser Serie beginnen, vor allem in einer Zeit, in der Frameworks weit verbreitet sind Die Grundlage grundlegender JS-Kenntnisse ist das Tüpfelchen auf dem i und es ist auch ein Stück Wissen, das erlernt werden muss. Obwohl Menschen, die Autos fahren, nicht viel über Autos wissen müssen, müssen sie nur die allgemeinen Funktionen von Autos beherrschen. Aber wer sich mit Autos auskennt, kann auch besser fahren. Natürlich geht es in einem Artikel nicht nur um einen einzelnen Wissenspunkt. Im Allgemeinen werden verwandte Wissenspunkte in Reihe geschaltet. Während Sie Ihr eigenes Lernen aufzeichnen, teilen Sie Ihr eigenes Lernen und ermutigen sich gegenseitig. Wenn Sie können, geben Sie mir bitte auch ein „Gefällt mir“, Ihre „Gefällt mir“-Angaben werden mich auch dazu bringen, härter an der Aktualisierung zu arbeiten!

Übersicht

Essenszeit: 6-12 Minuten
• Schwierigkeit:
• Einfach, nicht rennen, warten, bis Sie mit dem Lesen fertig sind

JS-Speicherlebenszyklus

• Speicher zuweisen

• Speicher Lesen und Schreiben

• Speicher freigeben

Stapelspeicher und Heapspeicher

JS-Datentypen

Bevor wir über Stapelspeicher und Heapspeicher sprechen, sollte jeder wissen, dass JS in zwei Datentypen unterteilt ist:

• Grundlegende Datentypen
  String, Zahl, Boolescher Wert, Null, undefiniert, Symbol

  (feste Größe, leichtgewichtig, relativ einfach)

• Referenzdatentypen
  Objekt, Array, Funktion

  (Größe ist nicht sicher, nimmt Platz ein mehr Platz) Groß, relativ komplex)

Speichermechanismus

var a=true;      //布尔型，基本数据类型var b='jack';    //字符型，基本数据类型var c=18;        //数值型，基本数据类型var d={name:'jack'};   //对象，引用数据类型var d=[0,1,2,3,4,5];   //数组，引用数据类型复制代码

Gerade aufgrund der unterschiedlichen Datentypen sind auch ihre Speichermethoden unterschiedlich, was sich völlig von den Wohnorten der Armen und Reichen unterscheidet echtes Leben (ich gehe zu weit) ). Schauen wir uns zunächst ein Bild an:

Sie können sehen, dass a , b , c alles grundlegende Datentypen sind. d und e sind beide Referenzdatentypen. Sie weisen wesentliche Unterschiede in der Speichermethode auf.

Die Werte der Basisdatentypen werden im Stapelspeicher gespeichert, während die Referenzdatentypen Der Wert des Typs wird im Heap-Speicher gespeichert (d. h. seine Adresse im Heap-Speicher). Der Referenzdatentyp ist a , b , c 都是基本数据类型， d 和 e 都是引用数据类型，他们在存放方式上有着本质性的区别，基本数据类型的值是存放在栈内存中的，而引用数据类型的值是存放在堆内存中的，栈内存中仅仅存放着它在栈内存中的引用（即它在堆内存中的地址），就和它的名字一样，引用数据类型

内存访问机制

上面讲的是存储，接下来说一下变量的访问，基本数据类型可以直接从栈内存中访问变量的值，而引用数据类型要先从栈内存中找到它对应的引用地址，再拿着这个引用地址，去堆内存中查找，才能拿到变量的值

深浅拷贝

• 浅拷贝

  上面已经和大家说过了基本数据类型与引用数据类型在存储上的不同，那么，接下来说的这个深浅拷贝，想必大家也在面试题中经常碰到，老方式，先来看一段代码

  var name='jack';var obj={  age:24};var nameCopy=name;var objCopy=obj;
  
  nameCopy='bob';
  objCopy.age=15;console.log(name);    //jackconsole.log(obj.age);     //15复制代码

  你会发现， name 是没有被影响的，而我们命名是修改objCopy.age，为什么还会影响到 obj.age呢，这就是因为深浅拷贝的问题在捣鬼，先来看下下面的一张图

之所以会出现这种情况，是因为JS对于基本类型和引用类型的，当我们在复制引用类型的时候，复制的是该对象的引用地址，所以，在执行 var objCopy=obj;的时候，将 obj 的引用地址复制给了 objCopy，所以，这两个对象实际指向的是同一个对象，即改变 objCopy 的同时也改变了 obj 的值，我们将这种情况称为浅拷贝，仅仅复制了对象的引用，并没有开辟新的内存，拿人手短，拷贝地太浅了。（只有引用类型才会出现浅拷贝的情况）

• 深拷贝

  再来看接下来的一段代码

  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);    //jackconsole.log(obj.age);     //24复制代码

  可以发现,在经过 JSON.parse(JSON.stringify(obj))

  Speicherzugriffsmechanismus

  Als nächstes geht es um den Variablenzugriff, der direkt auf den Wert von Variablen aus dem Stapelspeicher zugreifen kann, während Referenzdatentypen zuerst auf die Variablen zugreifen müssen aus dem Stapel. Suchen Sie die entsprechende Referenzadresse im Speicher, suchen Sie sie dann im Heap-Speicher, um den Wert der Variablen zu erhalten

  Tiefe und flache Kopie 🎜🎜

  Flache Kopie🎜🎜Ich habe Ihnen oben den Unterschied in der Speicherung zwischen Basisdatentypen und Referenzdatentypen erklärt. Die als nächstes erwähnte flache Kopie ist also wahrscheinlich etwas, was Sie oft fragen Wenn Sie auf die alte Art und Weise stoßen, schauen Sie sich zuerst einen Code an. 🎜

  var objCopy=Object.assign({},obj);   //对象深拷贝的方法 Object.assign
  var arrayCopy=array.concat();       //数组深拷贝的方法  concat()  （数组无嵌套对象或者数组可用）
  var arrayCopy=array.slice();       //数组深拷贝的方法  slice()   （数组无嵌套对象或者数组可用）
  JSON.parse(JSON.stringify(array))     //顺带提下，JSON.parse(JSON.stringify())   数组和对象通用复制代码

  code>, warum es sich immer noch auf obj.age auswirkt. Dies liegt an dem Problem des tiefen und flachen Kopierens. Schauen wir uns das Bild unten an. 🎜🎜Der Grund dafür Dies geschieht, weil JS über Grundtypen und Referenztypen verfügt. Wenn wir den Referenztyp kopieren, wird daher beim Ausführen von var objCopy=obj; obj wird nach objCopy kopiert, sodass die beiden Objekte tatsächlich auf dasselbe Objekt verweisen, das heißt, wenn objCopy geändert wird Der Wert von obj wird ebenfalls geändert. Wir nennen diese Situation „flache Kopie“. Es wird nur die Referenz des Objekts kopiert und kein neuer Speicher geöffnet . 🎜(Nur Referenztypen verfügen über eine flache Kopie)🎜🎜🎜🎜

  Deep copy🎜🎜Sehen Sie sich den nächsten Codeabschnitt an🎜

  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']]复制代码

  🎜Sie finden ihn nach JSON. parse(JSON.stringify(obj)) Nach der Konvertierung existiert keine flache Kopie mehr. Diese Welle öffnet eine neue Heap-Speicheradresse und verweist auf das neu geöffnete Objekt Speicheradresse, die völlig unabhängig vom zuvor kopierten Objekt ist. Es fühlt sich an, als würde man Kung-Fu lernen und die Fähigkeiten der Eigenständigkeit beherrschen. 🎜

• 另外实现深拷贝的方法（更多方式请自行百度）

  var objCopy=Object.assign({},obj);   //对象深拷贝的方法 Object.assign
  var arrayCopy=array.concat();       //数组深拷贝的方法  concat()  （数组无嵌套对象或者数组可用）
  var arrayCopy=array.slice();       //数组深拷贝的方法  slice()   （数组无嵌套对象或者数组可用）
  JSON.parse(JSON.stringify(array))     //顺带提下，JSON.parse(JSON.stringify())   数组和对象通用复制代码

  接着上面的数组容易踩坑的地方 ，来看一个例子

  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']]复制代码

  可以清楚地看到(数组无嵌套对象或者数组可用的情况下用 concat 和 slice 才有效)

系列目录

• 一张纸搞懂JS系列（1）之编译原理，作用域，作用域链，变量提升，暂时性死区

• 一张纸搞懂JS系列（2）之JS内存生命周期，栈内存与堆内存，深浅拷贝

• 一张纸搞懂JS系列（3）之垃圾回收机制，内存泄漏，闭包

更多相关免费学习推荐：javascript（视频）

Das obige ist der detaillierte Inhalt vonVerstehen Sie den Lebenszyklus des JS-Speichers, den Stapelspeicher und den Heap-Speicher sowie die tiefe und flache Kopie in der JS-Serie (2) auf einem Blatt Papier. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!