內存分配
在編譯階段，除了聲明變量和函數，查找環境中的標識符這兩項工作之外，還會進行內存分配。不同類型的數據會分配到不同的內存空間：
示意圖：
賦值與賦址
引擎不能直接操作堆內存中的數據，這就造成了對同一個變量賦不同類型的值，會出現完全不同的效果：為一個變量賦基本值時，實際上是創建一個新值，然后把該值賦給新變量，可以說這是一種真正意義上的" 賦值 “；為一個變量賦引用值時，實際上是為新變量添加一個指針，指向堆內存中的一個對象，屬于一種” 賦址 "操作。
例子：
//基本值 var a = 1; var b = a; a = 2; console.log(a); //輸出：2 console.log(b); //輸出：1 //引用值 //變量 c 和 d 指向堆中的同一個數組 var c = [0, 1, 2]; var d = c; c[0] = 5; console.log(c); //輸出：[5, 1, 2] console.log(d); //輸出：[5, 1, 2]
淺拷貝
淺拷貝可以簡單理解為，發生在棧中的拷貝行為，只能拷貝基本值和引用值的地址。
實現方式
ES6 定義了 Object.assign() 方法來實現淺拷貝。
例子：
let a = {
name: "Tom",
obj: {
age: 19
}
}
let b = Object.assign({}, a);
console.log(b); //輸出：{name: "Tom",obj: {age: 20}}
a.name = "Amy";
a.obj.age = 20;
console.log(a); //輸出：{name: "Amy",obj: {age: 20}}
console.log(b); //輸出：{name: "Tom",obj: {age: 20}}
數組的 slice() 方法也屬于淺拷貝
例子：
var a = [0, [1]];
var b = a.slice(0);
a[0] = 8;
a[1][0] = 9;
console.log(a); //輸出：[8, [9]]
console.log(b); //輸出：[0, [9]]
*concat() 方法也屬于淺拷貝，這里不再敘述。
深拷貝
深拷貝可以簡單理解為，同時發生在棧中和堆中的拷貝行為，除了拷貝基本值和引用值的地址之外，地址指向的堆中的對象也會發生拷貝。
實現方式
將需要深拷貝的對象序列化為一個 JSON 字符串，然后根據這個字符串解析出一個結構和值完全一樣的新對象，可以間接實現深拷貝。
例子：
let a = {
name: "Tom",
obj: {
age: 19
}
}
var b = JSON.parse(JSON.stringify(a));
console.log(b); //輸出：{name: "Tom",obj: {age: 19}}
a.name = "Amy";
a.obj.age = 20;
console.log(a); //輸出：{name: "Amy",obj: {age: 20}}
console.log(b); //輸出：{name: "Tom",obj: {age: 19}}
*這種方法需要保證對象是安全的，例如屬性值不能是 undefined、symbol、函數、日期和正則。
使用 $.extend() 方法實現深拷貝
$.extend() 方法并非原生 JavaScript 提供的方法，屬于 jquery 的方法。這個方法提供的實現深拷貝的基本思路是：如果是基本值或除了對象或數組之外的引用值，直接賦值；如果是對象或數組就需要進行遞歸，直到遞歸到基本值或除了對象或數組之外的引用值為止。
jquery 中 $.extend() 方法的代碼片段：
//如果 copy 內容是數組或對象則繼續調用 extend 函數
if (deep && copy && (jQuery.isPlainObject(copy) ||
(copyIsArray = jQuery.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[name] = jQuery.extend(deep, clone, copy);
//如果 copy 內容不是數組或對象則直接賦值
} else if (copy !== undefined) {
target[name] = copy;
}
參考 $.extend() 方法的思路，我們可以自己探索深拷貝的實現方式：
例子：
//深拷貝函數
function extend(source) {
var target = Array.isArray(source) ? [] : {};
for (var key in source) {
var isObject = Object.prototype.toString.call(source[key]) === "[object Object]";
if (isObject || Array.isArray(source[key])) {
//如果是對象或數組，繼續調用 extend 函數
target[key] = extend(source[key]);
} else {
//遞歸到基本值或除了對象或數組之外的引用值，直接賦值
target[key] = source[key];
}
}
return target;
}
//測試代碼
var a = {
a1: undefined,
a2: null,
a3: 123,
a4: false,
a5: "Tom",
a6: Symbol.for("6"),
obj: {
s: "book",
n: 10
},
arr: [1, 2, 3, [4]],
fn: function() {
console.log(999);
},
now: new Date(),
}
var b = extend(a);
a.a5 = "Amy";
console.log(a.a5); //輸出：Amy
console.log(b.a5); //輸出：Tom
a.obj.s = "pen";
console.log(a.obj.s); //輸出：pen
console.log(b.obj.s); //輸出：book
a.arr[3][0] = 9999;
console.log(a.arr[3][0]); //輸出：9999
console.log(b.arr[3][0]); //輸出：4
運行時流程圖
結合本課的的內容，JavaScript 的運行時流程圖如下：
*這張圖會根據內容的增加不斷進行補充。
以上所述是小編給大家介紹的JavaScript棧內存與堆內存詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
