21-進階 JS里的類型

  • 類型轉(zhuǎn)換

  1. 轉(zhuǎn)換為string戒傻、boolean
image.png

類型轉(zhuǎn)換中的一些特殊情況:

  • 其他類型轉(zhuǎn)換為boolean時為false的有:
    number :0,NaN恭理;
!!0
false
!!NaN
false

string :""(空字符串);

!!''
false
!!' '          //空格字符串為true
true

null、undefined:均為false荠医;

!!null
false
!!undefined
false

值為 false 總結(jié):

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all) [1]

  • object全部為true
  1. 轉(zhuǎn)換為number

一般情況下,只會將0-9組成的字符串轉(zhuǎn)換成 number,轉(zhuǎn)換方法有:

  • Number('1')===1;
  • parseInt('011',10)===11; ; parseInt('011',8)===9; ; parseInt('011',2)===3;
  • parseFloat('1.23')===1.23;
  • '1'-0===1;
  • +'1'===1; ; +'-1'===-1;
    以上5中方法是將只有0-9組成的字符串轉(zhuǎn)換成 number的方法彬向,然而對于包含非數(shù)字的字符串豫喧,parseInt()、parseFloat() 方法依然有效幢泼;
    比如:
Number('111a')
NaN
-------------
parseInt('011sd')
11
parseInt('011sd11',2)
3
-----------
parseFloat('011.4sd.23')
11.4
---------
'122ff'-0
NaN
-----------------
+'01a'
NaN

注意:parseInt()紧显、parseFloat()會從左往右開始轉(zhuǎn)換遇到的數(shù)字,直到非數(shù)字就結(jié)束缕棵。

  • 內(nèi)存圖

此處孵班,只通過以下幾張圖簡單了解JS的在所分配的內(nèi)存中的一些存儲過程。

  1. 內(nèi)存分配簡圖


    js-21-01.png

    內(nèi)存是讀寫速度最快的招驴,當(dāng)前運行的程序都會拷貝到內(nèi)存中運行篙程。開機就是將操作系統(tǒng)讀取到內(nèi)存中運行。

  2. 假定瀏覽器給JS分配了100M內(nèi)存别厘,那JS是如何使用的虱饿??
    js-21-02.png

    JS會將分到的內(nèi)存劃分為代碼區(qū)和數(shù)據(jù)區(qū)触趴,比如代碼var a=1;氮发,a 就存在代碼區(qū),數(shù)字1則存在數(shù)據(jù)區(qū)冗懦,兩者之間會有某種關(guān)聯(lián)爽冕。
  3. 數(shù)據(jù)區(qū)又是如何存儲的?披蕉?


    js-21-03.png

    數(shù)據(jù)區(qū)會劃分為2塊颈畸,棧內(nèi)存和堆內(nèi)存;
    當(dāng)瀏覽器開始運行代碼區(qū)的代碼時没讲,第一步首先是:變量提升眯娱;之后才開始運行,運行時也就開始將數(shù)據(jù)存儲在數(shù)據(jù)區(qū)爬凑;

js-21-04.png

如上圖徙缴,數(shù)字1、2贰谣、.......在JS中都是以固定的64位2進制來存儲的娜搂,然而其他內(nèi)型并不都是按固定長度二進制來存儲的,那么如圖:如果隨著運行按順序存儲每一步的數(shù)據(jù)吱抚,當(dāng)給 對象 o 增加新的鍵值對時百宇,就需要在第一次存 o 的位置插入一段空間,這就很尷尬了...............

因此實際存儲時秘豹,根據(jù)數(shù)據(jù)類型荀澤對應(yīng)的存儲區(qū):


image.png

如上圖携御,實際對對象 o 的存儲是分2部分的,棧內(nèi)存中存的是一個地址,這個地址指向堆內(nèi)存中存放具體數(shù)據(jù)的一段空間啄刹。

當(dāng)執(zhí)行o2 = o;涮坐,時:

image.png

會將棧內(nèi)存中 o 的數(shù)據(jù)(即地址)拷給 o2 ,之后 o 和 o2 實際指向堆內(nèi)存中同一空間誓军。也就是說 “=”實際只在棧內(nèi)存中操作袱讹。“=”只是把右邊的對應(yīng)的東西放到左邊的對應(yīng)的空間里。

  1. JS中7種數(shù)據(jù)類型的存儲方式


    image.png

    對于6種簡單類型昵时,直接存在stack中捷雕,關(guān)于string此處暫不討論;
    對于Object類型壹甥,存在stack中的是對應(yīng)的heap中的一個空間的地址救巷,也就是Object的實際內(nèi)容是存儲在heap中,因此Object是對heap中一段空間的引用句柠。

  2. 幾個案例

  • 如下圖:


    image.png
  • 如下圖:


    image.png

    首先浦译,回顧這一句:“=”只是把右邊的對應(yīng)的東西放到左邊的對應(yīng)的空間里。左邊是b溯职,那么b對應(yīng)的空間是精盅??缸榄?
    b對應(yīng)的空間是: stack 給b分配的一小段空間渤弛;而右邊的是一個匿名 對象 ,首先給匿名對象在 heap 分配一個空間存放內(nèi)容甚带;之后再執(zhí)行“=”。

  • 如下圖:


    image.png

    b.name對應(yīng)的空間是: b在stack里存的地址所指向的heap中的一個空間里的名為“name”的key所對應(yīng)的空間佳头;而右邊的是一個字符串 鹰贵,字符串是簡單類型;直接執(zhí)行“=”康嘉。

  • 如下圖:


    image.png
  1. 關(guān)于對象里的self
    看下圖:


    image.png

    image.png

    對比上面兩附圖碉输,為什么結(jié)果不同?亭珍?敷钾?
    首先,在運行前肄梨,將變量提升阻荒,則第一幅圖可以等價于:

var a
a = {self:a}  //此時在heap中寫“=”右邊的對象時,a的值還是undefined
  1. 一個測試題
    如下圖:

    image.png

    解析:當(dāng)運行a.x = a = {n:2};時众羡,瀏覽器是先看左邊再看右邊的侨赡,然后再把右邊的東西傳給左邊的容器;也就是說先確定左邊是個什么東西,再確定右邊是個什么東西羊壹,然后從右邊開始往左邊塞東西蓖宦;首先,看“=”左邊的 a.x 時已經(jīng)明確了此時的a = ADDR 34油猫,然后在看中間的 a 明確了中間的a = ADDR 34稠茂,再然后看右邊的東西,發(fā)現(xiàn)右邊的是個匿名對象情妖,即在 Heap 里面創(chuàng)建這個對象睬关,這樣左、中鲫售、右都明確了共螺,然后再執(zhí)行a = {n:2};時,a = ADDR 54情竹,然而藐不,之前的 a.x 的指向并不會再次變更,導(dǎo)致鍵值對 x:{n:2} 添加在 ADDR 34里面秦效。

  2. 垃圾回收


    image.png

測試題:

var fn = function(){}
document.body.onclick = fn
fn = null
此時雏蛮,var fn = function(){} 里面的function(){} 是否是垃圾?阱州?挑秉?
image.png

那么,當(dāng)瀏覽器中的這個頁面關(guān)閉時苔货,var fn = function(){} 里面的function(){} 是否是垃圾犀概??
答:yes夜惭,頁面關(guān)閉時姻灶,即document = null,所以之前的functiong就沒有被引用了诈茧。除了IE6产喉;
在IE6中當(dāng)前頁面關(guān)閉,瀏覽器未關(guān)閉時敢会,var fn = function(){} 里面的function(){} 還會保留曾沈,這樣導(dǎo)致 內(nèi)存 會被浪費,解決方法:


image.png
window.onload = function(){
    document.body.onclick = null;
    .
    .
    .
    有多少個就重新賦值 null 多少個
}
  1. 淺拷貝 & 深拷貝
  • 深拷貝:


    image.png
  • 淺拷貝:


    image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鸥昏,一起剝皮案震驚了整個濱河市塞俱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌互广,老刑警劉巖敛腌,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件卧土,死亡現(xiàn)場離奇詭異,居然都是意外死亡像樊,警方通過查閱死者的電腦和手機尤莺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來生棍,“玉大人颤霎,你說我怎么就攤上這事⊥康危” “怎么了友酱?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長柔纵。 經(jīng)常有香客問我缔杉,道長,這世上最難降的妖魔是什么搁料? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任或详,我火速辦了婚禮,結(jié)果婚禮上郭计,老公的妹妹穿的比我還像新娘霸琴。我一直安慰自己,他們只是感情好昭伸,可當(dāng)我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布梧乘。 她就那樣靜靜地躺著,像睡著了一般庐杨。 火紅的嫁衣襯著肌膚如雪选调。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天灵份,我揣著相機與錄音学歧,去河邊找鬼。 笑死各吨,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的袁铐。 我是一名探鬼主播揭蜒,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼剔桨!你這毒婦竟也來了屉更?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤洒缀,失蹤者是張志新(化名)和其女友劉穎瑰谜,沒想到半個月后欺冀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡萨脑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年隐轩,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渤早。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡职车,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鹊杖,到底是詐尸還是另有隱情悴灵,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布骂蓖,位于F島的核電站积瞒,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏登下。R本人自食惡果不足惜茫孔,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望庐船。 院中可真熱鬧银酬,春花似錦、人聲如沸筐钟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽篓冲。三九已至李破,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間壹将,已是汗流浹背嗤攻。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留诽俯,地道東北人妇菱。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像暴区,于是被迫代替她去往敵國和親闯团。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內(nèi)容