摘要:內存空間分為兩種,棧內存與堆內存棧是系統自動分配的內存空間,由系統自動釋放,堆則是動態分配的內存,大小不定不會自動釋放。
JavaScript的內存空間
在JavaScript中,每一個數據都需要一個內存空間。內存空間分為兩種,棧內存(stack)與堆內存(heap)
棧是系統自動分配的內存空間,由系統自動釋放,堆則是動態分配的內存,大小不定不會自動釋放。
基本數據類型JavaScript中的基本數據類型,這些值都有固定的大小,保存在棧內存中,由系統自動分配存儲空間在棧內存空間的值,我們可以直接進行操作,因此基礎數據類型都是按照值訪問
在棧內存中的數據發生復制的行為時,系統會自動為新變量開辟一個新的內存空間,當復制執行后,兩個內存空間的值就互不影響,改變其中一個不會影響另一個
棧內存空間數據復制示例 var a = `I am variable a`; var b = a; console.log(b); //`I am variable a` b = `I am variable b`; console.log(a); //`I am variable a` console.log(b); //`I am variable b`引用數據類型
引用類型的值是保存在堆內存中的對象,在JavaScript中我們不能直接操作對象的堆內存空間。因為引用類型的值都是按引用訪問的,所以在操作對象時,實際上是操作對象的引用而不是實際的對象。引用可以理解為保存在棧內存中的一個地址,該地址指向堆內存中的一個實際對象
引用類型值的復制,系統會為新的變量自動分配一個新的棧內存空間這個棧內存空間保存著與被復制變量相同的指針,盡管他們在棧內存中的內存空間的位置互相獨立但是在堆內存中訪問到的對象實際上是同一個,因此,當我們改變其中一個對象的值時,實際上就是改變原來的對象
棧內存空間保存指針(地址),堆內存空間保存實際的對象,我們通過變量訪問對象時,實際上訪問的是對象的引用(地址)
內存中的棧區域存放變量(基本類型的變量包括變量聲明和值)以及指向堆區域存儲位置的指針(引用類型的變量包括變量聲明和指向內容的指針)
var a = { name : `I am object a`, type : "object" } var b = a; console.log(b); // {name: "I am object a", type: "object"} b.name = `I am object b`; console.log(a); // {name: "I am object b", type: "object"} console.log(b); // {name: "I am object b", type: "object"}基本類型總結
基本數據類型:
包括:null、undefined、number、string、boolean、symbol(es6)
存放位置:內存中的棧區域中
比較:值的比較,判斷是否相等,如果值相等,就相等。一般使用===進行比較,因為==會進行類型的轉換
拷貝:賦值(通過(=)賦值操作符 賦值),賦值完成后,兩個變量之間就沒有任何關系了,改變其中一個變量的值對另一個沒有任何影響
引用類型總結引用數據類型:
包括:數組、對象、函數
存放位置:內存的棧區域中存放變量和指針,堆區域存儲實際的對象
比較:是引用的比較(就是地址的比較,變量在棧內存中對應的指針地址相等就指向同一個對象)判斷是否為同一個對象,示例如下
變量a和變量b的引用不同,對象就不是同一個對象 var a = {name:"Jay"}; var b = {name:"Jay"}; a===b //false
我們對JavaScript中引用類型進行操作的時候,都是操作其對象的引用(保存在棧內存中的指針)
賦值、深拷貝和淺拷貝 (Assignment, deep copy and shallow copy)賦值:兩個變量的值(指針)都指向同一個對象,改變其中一個,另一個也會受到影響
所謂拷貝就是復制,通過復制原對象生成一個新的對象
淺拷貝:重新在堆內存中開辟一個空間,拷貝后新對象獲得一個獨立的基本數據類型數據,和原對象共用一個原對象內的引用類型數據,改變基本類型數據,兩個對象互不影響,改變其中一個對象內的引用類型數據,另一個對象會受到影響
var obj = { name: "Jay Chou", age: 32, song:{ name:"發如雪", year:2007 } } var obj1 = obj; function shallowCopy(obj){ var scObj = {}; for(var prop in obj){ if(obj.hasOwnProperty(prop)){ scObj[prop] = obj[prop] } } return scObj; } var obj2 = shallowCopy(obj); console.log(obj === obj1,"obj === obj1","賦值"); console.log(obj === obj2,"obj === obj2","淺拷貝"); // true "obj === obj1" "賦值" // false "obj === obj2" "淺拷貝" console.log(obj.song === obj2.song); //true obj2.song.name="雙截棍"; obj2.name="Jay"; console.log(obj) // {name: "Jay Chou", age: 32, song: {name:"雙截棍",year:2007}} console.log(obj1); // {name: "Jay Chou", age: 32, song: {name:"雙截棍",year:2007}} console.log(obj2); {name: "Jay", age: 32, song: {name:"雙截棍",year:2007}} console.log(obj===obj1) //true console.log(obj===obj2) //false
深拷貝:不論是對象內的基本類型還是引用類型都被完全拷貝,拷貝后兩個對象互不影響
一種比較簡單實現方法是使用var dcObj = JSON.parse(JSON.stringify(obj))
var obj = { name: "Jay Chou", age: 32, song:{ name:"發如雪", year:2007 } } var dcObj=JSON.parse(JSON.stringify(obj)); console.log(dcObj); // {name: "Jay Chou", age: 32, song: {name:"發如雪",year:2007}} console.log(dcObj.song === obj.song); //false dcObj.name="Jay"; dcObj.song.name="雙截棍"; console.log(obj); // {name: "Jay Chou", age: 32, song: {name:"發如雪",year:2007}} console.log(dcObj); //{name: "Jay", age: 32, song: {name:"雙截棍",year:2007}}
需要注意的是,使用JSON.Stringify()序列化對象時會把對象內的function和原型成員忽略掉,示例如下
var obj = { name: "Jay Chou", job: "artist", say:function(){ alert(this.job); } } JSON.stringify(obj); //"{"name":"Jay Chou","job":"artist"}"
通過遞歸淺拷貝函數實現深拷貝
function deepCopy(obj){ if(!obj || typeof obj !== "object"){ return ; } var dcObj = Array.isArray(obj) ? [] : {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ if(obj[key] && typeof obj[key] === "object"){ dcObj[key] = Array.isArray(obj[key]) ? [] : {}; dcObj[key] = deepCopy(obj[key]); } dcObj[key] = obj[key] } } return dcObj; }
比較:賦值、深拷貝、淺拷貝
賦值:變量獲得原對象的引用,改變該引用指向的對象的值(基本類型和引用類型)其實就是修改原對象的值
淺拷貝:改變新對象基本類型的值不會使原對象對應的值一起改變,但是改變新對象引用類型的值會使原對象對應的值一同改變
深拷貝:改變新對象基本類型和引用類型的值,都不會影響原對象,兩者互相獨立,互不影響
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103594.html
摘要:深拷貝和淺拷貝的區別背景最近在用框架寫頁面,賦值給中的對象時會出現一個問題,賦值和被賦值對象之中任何一個有變化,另一個也會隨之變化。 深拷貝和淺拷貝的區別 背景:最近在用vue框架寫頁面,賦值給Vue.$data中的對象時會出現一個問題,賦值和被賦值對象之中任何一個有變化,另一個也會隨之變化。例如: var b = { foo: 123 }; var vm = new Vue(...
摘要:實際上,是禁止這樣做的。傳值和傳址基本數據類型賦值基本數據類型的賦值是在內存中新開辟一段棧內存,然后再把再將值賦值到新的棧中。結果見輸出,可以看出來,無論是修改賦值得到的對象和淺拷貝得到的都會改變原始數據。 存儲問題:深拷貝和淺拷貝的主要區別:在內存中的存儲類型(堆和棧)不同堆:動態分配的內存,大小不定也不會自動釋放棧:自動分配的內存,由系統自動釋放數據類型: 基本數據類型: jav...
摘要:深拷貝和淺拷貝問題的本質還是不同數據類型的存儲方式差異,尤其是引用數據類型的特殊。 深拷貝和淺拷貝問題的本質還是不同數據類型的存儲方式差異,尤其是引用數據類型的特殊。showImg(https://segmentfault.com/img/bVbb8XH?w=1058&h=409); 現分別對賦值、淺拷貝、深拷貝做深入研究: 1.賦值 原理:直接將對象指針直接賦值給另一個變量 代碼: ...
摘要:接下來我們進入正片數據類型六種基本數據類型布爾值,和一個表明值的特殊關鍵字。一種數據類型,它的實例是唯一且不可改變的。在中是沒有方法是可以改變布爾值和數字的。參考資料深拷貝淺拷貝 前言 筆者最近整理了一些前端技術文章,如果有興趣可以參考這里:muwoo blogs。接下來我們進入正片: js 數據類型 六種 基本數據類型: Boolean. 布爾值,true 和 false. nu...
閱讀 1160·2023-04-25 17:28
閱讀 3550·2021-10-14 09:43
閱讀 3964·2021-10-09 10:02
閱讀 1947·2019-08-30 14:04
閱讀 3133·2019-08-30 13:09
閱讀 3273·2019-08-30 12:53
閱讀 2901·2019-08-29 17:11
閱讀 1826·2019-08-29 16:58