JSのメモリライフサイクル、スタックメモリとヒープメモリ、JSシリーズの深いコピーと浅いコピーを1枚の紙で理解する(2)

先頭に書いてください: javascript 列の下に、これは私がこれから書き始めようとしているシリーズです。主にフレームワークが横行する時代に、仕事中にもかかわらずフレームワークを使用していますが、面接や技術向上のために基礎となるJSの基礎知識はおまけであり、必ず習得しなければならない知識でもあります。車について詳しく知るためには、車の一般的な機能を習得するだけで十分です。しかし、車の知識があれば、同様に、より上手に運転することができます。もちろん、記事は一つの知識だけを語るのではなく、関連する知識が連続してつながっていくのが一般的で、自分の学びを記録しながら、自分の学びを共有し、励まし合いましょう！できれば、「いいね」もお願いします。あなたの「いいね」が更新の励みにもなります。

概要

• 食事時間: 6〜12分
• 難易度: 簡単、走らずに、帰る前に見てください。

JS メモリ ライフ サイクル

• メモリの割り当て

• メモリの読み取りと書き込み

• メモリの解放

#スタック メモリとヒープ メモリ

JS データ型

スタック メモリとヒープ メモリについて話す前に、誰もが次のことを行う必要があります。 JS が 2 つのデータ型に分かれていることは誰もが知っています:

• 基本データ型
  文字列、数値、ブール値、null、未定義、シンボル

  (固定サイズ) 、ボリューム 軽量、比較的シンプル）

• 参照データ型
  オブジェクト、配列、関数

  (サイズは必ずしも確実ではありません。大きなスペースであり、比較的複雑です)

メモリストレージメカニズム

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

データ型が異なるため、そのストレージ方法も異なります。現実の貧乏人と金持ちのように、人の住まいは全く違う（遠い）。まず写真を見てみましょう:

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 にコピーされるため、2 つのオブジェクトは実際には同じオブジェクトを指します。 , 変更 objCopy は obj の値も変更します。この状況を 浅いコピー と呼びます。これはオブジェクトの参照をコピーするだけで、新しいファイルは開きません1. メモリが不足しており、コピー スペースが浅すぎます。 (浅いコピーは参照型でのみ発生します) 深いコピー

次のコード部分を見てみましょう

• 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))

  による変換後、シャロー コピーは存在しなくなっていることがわかります。このウェーブは

  ディープ コピー

  、ディープ コピー開発です新しいヒープ メモリ アドレスが取得され、オブジェクトの参照は新しく開かれたメモリ アドレスを指します。以前にコピーされたオブジェクトから完全に独立しています。自立しており、深くコピーされます。スキルを学び、スキルを学びます。の気持ち。 </li><li><h4 data-id="heading-14">另外实现深拷贝的方法（更多方式请自行百度）</h4><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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()) 数组和对象通用复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div><p>接着上面的数组容易踩坑的地方 ，来看一个例子</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var array = [{name: &amp;#39;jack&amp;#39;}, [&amp;#39;old&amp;#39;]];var arrCopy = array.concat(); arrCopy[0].name=&amp;#39;new&amp;#39;;console.log(array); // [{name: &amp;#39;new&amp;#39;}, [&amp;#39;old&amp;#39;]]console.log(arrCopy); // [{name: &amp;#39;new&amp;#39;}, [&amp;#39;old&amp;#39;]]复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div></h3> <p>可以清楚地看到<strong>(数组无嵌套对象或者数组可用的情况下用 <code>concat 和 slice 才有效)

  系列目录

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

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

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

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

  以上がJSのメモリライフサイクル、スタックメモリとヒープメモリ、JSシリーズの深いコピーと浅いコピーを1枚の紙で理解する(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。