Comprendre le cycle de vie de la mémoire JS, la mémoire de pile et la mémoire de tas, la copie profonde et superficielle de la série JS (2) sur une seule feuille de papier

Écrivez au début : sous la colonne javascript, c'est une série que je suis sur le point de commencer à écrire, principalement à l'ère des frameworks rampants, bien que Je suis au travail Un framework est utilisé, mais pour les entretiens et l'avancement technique, la base des connaissances de base en JS est la cerise sur le gâteau, et c'est aussi une connaissance qui doit être apprise, même si les automobilistes n'ont pas besoin de savoir. beaucoup sur les voitures, il leur suffit de maîtriser les fonctions courantes des voitures. Mais si vous connaissez les voitures, vous pouvez mieux conduire, et par la même occasion. Bien sûr, un article ne parlera pas uniquement d'un seul point de connaissance. Généralement, les points de connaissance associés seront connectés en série. Tout en enregistrant votre propre apprentissage, vous partagerez votre propre apprentissage et vous encouragerez mutuellement ! Si vous le pouvez, s'il vous plaît, donnez-moi un like Votre like me fera également travailler plus dur pour mettre à jour !

Aperçu

• Temps de repas : 6-12 minutes
• Difficulté : Facile, ne courez pas, surveillez avant de partir

Cycle de vie de la mémoire JS

• Allocation de mémoire

• Lecture et écriture de la mémoire

• Libérer de la mémoire

Mémoire de pile et mémoire de tas

Types de données JS

Avant de parler de mémoire de pile et de mémoire de tas, tout le monde devrait Nous savons tous que JS est divisé en deux types de données :

• Type de données de base

  Chaîne, Nombre, Booléen, nul, non défini, Symbole (taille fixe , volume Léger, relativement simple)

• Type de données de référence

  Objet, Tableau, Fonction (La taille n'est pas forcément certaine, elle prend beaucoup d'espace, c'est relativement complexe)

Mécanisme de stockage en mémoire

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

C'est précisément à cause des différents types de données que leurs méthodes de stockage sont également différent, tout comme les pauvres et les riches dans la vraie vie. Les résidences des gens sont complètement différentes (éloignées). Jetons d'abord un coup d'œil à une image :

Vous pouvez voir que a , b , c sont tous des types de données de base, d et e Les deux sont des types de données de référence et présentent des différences essentielles dans les méthodes de stockage Les valeurs des types de données de base sont stockées dans la mémoire de pile, tandis que les valeurs des types de données de référence sont stockées dans la mémoire tas. mémoire Il stocke uniquement sa référence dans la mémoire de la pile (c'est-à-dire son adresse dans la mémoire du tas. Tout comme son nom, le type de données de référence

mécanisme d'accès à la mémoire

Le). ci-dessus concerne le stockage. Parlons ensuite de l'accès aux variables. Les types de données de base peuvent accéder directement à la valeur de la variable à partir de la mémoire de la pile, tandis que le type de données de référence doit d'abord trouver son adresse de référence correspondante dans la mémoire de la pile, puis la conserver. référence. Adresse, recherchez dans la mémoire du tas pour obtenir la valeur de la variable

Copie sombre et superficielle

• Copie superficielle

  Je l'ai déjà dit. vous les bases ci-dessus Il existe des différences de stockage entre les types de données et les types de données de référence. Donc, la copie profonde et superficielle mentionnée ci-dessous, je pense que tout le monde la rencontre souvent dans les questions d'entretien. À l'ancienne, regardons d'abord un morceau de code <.>

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

  Vous le ferez Il s'avère que

  n'est pas affecté, et nous avons changé le nom en name Pourquoi cela affecte-t-il toujours objCopy.age C'est parce que le problème de copie profonde et superficielle est à l'origine ? problème. Jetons un coup d'œil à l'image ci-dessousobj.age

La raison pour laquelle cela se produit est que JS traite les types de base et les types de référence lorsque nous copions la référence. types, le copié est l'adresse de référence de l'objet, donc lors de l'exécution de

, l'var objCopy=obj; adresse de référence obj de est copiée vers , donc les deux objets pointent en fait vers le même objet. , c'est-à-dire que changer objCopy change également la valeur de objCopy Nous appelons cette situation objcopie superficielle Elle copie uniquement la référence de l'objet et n'ouvre pas de nouvelle mémoire. remis. , la copie est trop superficielle. (La copie superficielle ne se produit que pour les types de référence)

• Copie complète
  Regardons le morceau de code suivant

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

  On peut constater qu'après la conversion

  , la copie superficielle n'existe plus. Cette vague est la JSON.parse(JSON.stringify(obj))copie profonde La copie profonde ouvre une nouvelle adresse mémoire de tas et pointe la référence de l'objet vers The new. L'adresse mémoire ouverte est complètement indépendante de l'objet précédemment copié. Elle est autonome et copiée en profondeur. C'est comme apprendre le kung-fu et maîtriser les compétences et se débrouiller seul .

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

  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（视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!