理解Javascript_01_理解內(nèi)存分配原理分析
更新時(shí)間:2010年10月11日 22:52:45 作者:
在正式開(kāi)始之前,我想先說(shuō)兩句,理解javascript系列博文是通過(guò)帶領(lǐng)大家分析javascript執(zhí)行時(shí)的內(nèi)存分配情況,來(lái)解釋javascript原理,具體會(huì)涵蓋javascript預(yù)加載,閉包原理,面象對(duì)象,執(zhí)行模型,對(duì)象模型...,文章的視角很特別,也非常深入,希望大家能接受這種形式,并提供寶貴意見(jiàn)。
原始值和引用值
在ECMAScript中,變量可以存放兩種類型的值,即原始值和引用值。
原始值指的就是代表原始數(shù)據(jù)類型(基本數(shù)據(jù)類型)的值,即Undefined,Null,Number,String,Boolean類型所表示的值。
引用值指的就是復(fù)合數(shù)據(jù)類型的值,即Object,Function,Array,以及自定義對(duì)象,等等
棧和堆
與原始值與引用值對(duì)應(yīng)存在兩種結(jié)構(gòu)的內(nèi)存即棧和堆
棧是一種后進(jìn)先出的數(shù)據(jù)結(jié)構(gòu),在javascript中可以通過(guò)Array來(lái)模擬棧的行為
var arr = []; //創(chuàng)建一個(gè)棧
arr.push("apple");//壓入元素"apple" ["apple"]
arr.push("orange");//壓入元素"orange" ["apple","orange"]
arr.pop();//彈出"orange" ["apple"]
arr.push("banana");//壓入元素"banana" ["apple","banana"]
我們來(lái)看一下,與之對(duì)應(yīng)的內(nèi)存圖:

原始值是存儲(chǔ)在棧中的簡(jiǎn)單數(shù)據(jù)段,也就是說(shuō),他們的值直接存儲(chǔ)在變量訪問(wèn)的位置。
堆是存放數(shù)據(jù)的基于散列算法的數(shù)據(jù)結(jié)構(gòu),在javascript中,引用值是存放在堆中的。
引用值是存儲(chǔ)在堆中的對(duì)象,也就是說(shuō),存儲(chǔ)在變量處的值(即指向?qū)ο蟮淖兞?,存?chǔ)在棧中)是一個(gè)指針,指向存儲(chǔ)在堆中的實(shí)際對(duì)象.
例:var obj = new Object(); obj存儲(chǔ)在棧中它指向于new Object()這個(gè)對(duì)象,而new Object()是存放在堆中的。
那為什么引用值要放在堆中,而原始值要放在棧中,不都是在內(nèi)存中嗎,為什么不放在一起呢?那接下來(lái),讓我們來(lái)探索問(wèn)題的答案!
首先,我們來(lái)看一下代碼:
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b','c'];
var person = new Person(100,"jxl",22);
然后我們來(lái)看一下內(nèi)存分析圖:

變量num,bol,str為基本數(shù)據(jù)類型,它們的值,直接存放在棧中,obj,person,arr為復(fù)合數(shù)據(jù)類型,他們的引用變量存儲(chǔ)在棧中,指向于存儲(chǔ)在堆中的實(shí)際對(duì)象。
由上圖可知,我們無(wú)法直接操縱堆中的數(shù)據(jù),也就是說(shuō)我們無(wú)法直接操縱對(duì)象,但我們可以通過(guò)棧中對(duì)對(duì)象的引用來(lái)操作對(duì)象,就像我們通過(guò)遙控機(jī)操作電視機(jī)一樣,區(qū)別在于這個(gè)電視機(jī)本身并沒(méi)有控制按鈕。
現(xiàn)在讓我們來(lái)回答為什么引用值要放在堆中,而原始值要放在棧中的問(wèn)題:
記住一句話:能量是守衡的,無(wú)非是時(shí)間換空間,空間換時(shí)間的問(wèn)題
堆比棧大,棧比堆的運(yùn)算速度快,對(duì)象是一個(gè)復(fù)雜的結(jié)構(gòu),并且可以自由擴(kuò)展,如:數(shù)組可以無(wú)限擴(kuò)充,對(duì)象可以自由添加屬性。將他們放在堆中是為了不影響棧的效率。而是通過(guò)引用的方式查找到堆中的實(shí)際對(duì)象再進(jìn)行操作。相對(duì)于簡(jiǎn)單數(shù)據(jù)類型而言,簡(jiǎn)單數(shù)據(jù)類型就比較穩(wěn)定,并且它只占據(jù)很小的內(nèi)存。不將簡(jiǎn)單數(shù)據(jù)類型放在堆是因?yàn)橥ㄟ^(guò)引用到堆中查找實(shí)際對(duì)象是要花費(fèi)時(shí)間的,而這個(gè)綜合成本遠(yuǎn)大于直接從棧中取得實(shí)際值的成本。所以簡(jiǎn)單數(shù)據(jù)類型的值直接存放在棧中。
總結(jié):
程序很簡(jiǎn)單,但它是一切的根本,基礎(chǔ)是最重要的,因?yàn)槟μ齑髲B也是一塊磚一塊瓦的搭建起來(lái)的。
內(nèi)存是程序執(zhí)行的根本,搞懂了內(nèi)存,就等于搞懂了一切。
心血之作,鼓勵(lì)一下自已,加油!
參考:
JavaScript高級(jí)程序設(shè)計(jì)
在ECMAScript中,變量可以存放兩種類型的值,即原始值和引用值。
原始值指的就是代表原始數(shù)據(jù)類型(基本數(shù)據(jù)類型)的值,即Undefined,Null,Number,String,Boolean類型所表示的值。
引用值指的就是復(fù)合數(shù)據(jù)類型的值,即Object,Function,Array,以及自定義對(duì)象,等等
棧和堆
與原始值與引用值對(duì)應(yīng)存在兩種結(jié)構(gòu)的內(nèi)存即棧和堆
棧是一種后進(jìn)先出的數(shù)據(jù)結(jié)構(gòu),在javascript中可以通過(guò)Array來(lái)模擬棧的行為
復(fù)制代碼 代碼如下:
var arr = []; //創(chuàng)建一個(gè)棧
arr.push("apple");//壓入元素"apple" ["apple"]
arr.push("orange");//壓入元素"orange" ["apple","orange"]
arr.pop();//彈出"orange" ["apple"]
arr.push("banana");//壓入元素"banana" ["apple","banana"]
我們來(lái)看一下,與之對(duì)應(yīng)的內(nèi)存圖:

原始值是存儲(chǔ)在棧中的簡(jiǎn)單數(shù)據(jù)段,也就是說(shuō),他們的值直接存儲(chǔ)在變量訪問(wèn)的位置。
堆是存放數(shù)據(jù)的基于散列算法的數(shù)據(jù)結(jié)構(gòu),在javascript中,引用值是存放在堆中的。
引用值是存儲(chǔ)在堆中的對(duì)象,也就是說(shuō),存儲(chǔ)在變量處的值(即指向?qū)ο蟮淖兞?,存?chǔ)在棧中)是一個(gè)指針,指向存儲(chǔ)在堆中的實(shí)際對(duì)象.
例:var obj = new Object(); obj存儲(chǔ)在棧中它指向于new Object()這個(gè)對(duì)象,而new Object()是存放在堆中的。
那為什么引用值要放在堆中,而原始值要放在棧中,不都是在內(nèi)存中嗎,為什么不放在一起呢?那接下來(lái),讓我們來(lái)探索問(wèn)題的答案!
首先,我們來(lái)看一下代碼:
復(fù)制代碼 代碼如下:
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b','c'];
var person = new Person(100,"jxl",22);
然后我們來(lái)看一下內(nèi)存分析圖:

變量num,bol,str為基本數(shù)據(jù)類型,它們的值,直接存放在棧中,obj,person,arr為復(fù)合數(shù)據(jù)類型,他們的引用變量存儲(chǔ)在棧中,指向于存儲(chǔ)在堆中的實(shí)際對(duì)象。
由上圖可知,我們無(wú)法直接操縱堆中的數(shù)據(jù),也就是說(shuō)我們無(wú)法直接操縱對(duì)象,但我們可以通過(guò)棧中對(duì)對(duì)象的引用來(lái)操作對(duì)象,就像我們通過(guò)遙控機(jī)操作電視機(jī)一樣,區(qū)別在于這個(gè)電視機(jī)本身并沒(méi)有控制按鈕。
現(xiàn)在讓我們來(lái)回答為什么引用值要放在堆中,而原始值要放在棧中的問(wèn)題:
記住一句話:能量是守衡的,無(wú)非是時(shí)間換空間,空間換時(shí)間的問(wèn)題
堆比棧大,棧比堆的運(yùn)算速度快,對(duì)象是一個(gè)復(fù)雜的結(jié)構(gòu),并且可以自由擴(kuò)展,如:數(shù)組可以無(wú)限擴(kuò)充,對(duì)象可以自由添加屬性。將他們放在堆中是為了不影響棧的效率。而是通過(guò)引用的方式查找到堆中的實(shí)際對(duì)象再進(jìn)行操作。相對(duì)于簡(jiǎn)單數(shù)據(jù)類型而言,簡(jiǎn)單數(shù)據(jù)類型就比較穩(wěn)定,并且它只占據(jù)很小的內(nèi)存。不將簡(jiǎn)單數(shù)據(jù)類型放在堆是因?yàn)橥ㄟ^(guò)引用到堆中查找實(shí)際對(duì)象是要花費(fèi)時(shí)間的,而這個(gè)綜合成本遠(yuǎn)大于直接從棧中取得實(shí)際值的成本。所以簡(jiǎn)單數(shù)據(jù)類型的值直接存放在棧中。
總結(jié):
程序很簡(jiǎn)單,但它是一切的根本,基礎(chǔ)是最重要的,因?yàn)槟μ齑髲B也是一塊磚一塊瓦的搭建起來(lái)的。
內(nèi)存是程序執(zhí)行的根本,搞懂了內(nèi)存,就等于搞懂了一切。
心血之作,鼓勵(lì)一下自已,加油!
參考:
JavaScript高級(jí)程序設(shè)計(jì)
您可能感興趣的文章:
- js內(nèi)存泄露的幾種情況詳細(xì)探討
- 跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理
- js 內(nèi)存釋放問(wèn)題
- JavaScript也談內(nèi)存優(yōu)化
- 解決js函數(shù)閉包內(nèi)存泄露問(wèn)題的辦法
- IE JS編程需注意的內(nèi)存釋放問(wèn)題
- 容易造成JavaScript內(nèi)存泄露幾個(gè)方面
- js變量、作用域及內(nèi)存詳解
- Javascript 閉包引起的IE內(nèi)存泄露分析
- 深入理解JavaScript程序中內(nèi)存泄漏
- 詳解Nodejs內(nèi)存治理
- javascript 內(nèi)存模型實(shí)例詳解
相關(guān)文章
javascript實(shí)現(xiàn)焦點(diǎn)滾動(dòng)圖效果 具體方法
以下JS代碼實(shí)現(xiàn)了焦點(diǎn)滾動(dòng)圖的效果方法,有需要的朋友可以參考一下2013-06-06JS通過(guò)分析userAgent屬性來(lái)判斷瀏覽器的類型及版本
JavaScript判斷瀏覽器類型一般有兩種辦法,一種是根據(jù)各種瀏覽器獨(dú)有的屬性來(lái)分辨,另 一種是通過(guò)分析瀏覽器的userAgent屬性來(lái)判斷的2014-03-03微信小程序?qū)崿F(xiàn)3D輪播圖效果(非swiper組件)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)3D輪播圖效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09用Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格示例自己寫(xiě)的
動(dòng)態(tài)增加表格的方法有很多,但大多說(shuō)實(shí)現(xiàn)起來(lái)比較繁瑣,本文的這個(gè)示例是作者自己手寫(xiě)的,經(jīng)測(cè)試效果還不錯(cuò),但唯獨(dú)不兼容FF,感興趣的朋友可以參考下2013-10-10