內(nèi)置類型
JS中一共有七個(gè)內(nèi)置類型:
- number
- string
- boolean
- undefined
- null
- object
- symbol
typeof操作的bug
typeof undefined === 'undefined' //true
typeof true === 'true' //true
typeof 42 === 'number' //true
typeof "42" === 'string' //true
typeof { life: 42 } === 'object' //true
// ES6中新加入的類型
typeof Symbol() === 'symbol' // true
上面六種類型用typeof操作均有同名的字符串與之對(duì)應(yīng)臼寄。但是對(duì)于null來(lái)說(shuō), 結(jié)果可能跟我們想象的不同
typeof null === 'object' //true
我們預(yù)期的返回結(jié)果應(yīng)該是'null', 但是返回的卻是object, 這個(gè)bug在js中存在大概有已經(jīng)有20年了, 也許永遠(yuǎn)都不會(huì)修復(fù)了.....
因此對(duì)于null的檢測(cè), 我們需要用到復(fù)合檢測(cè)
let a = null
if(!a && typeof a === 'object') {
...
}
js的變量沒(méi)有類型, 只有值才有, 變量可以隨時(shí)持有任何類型的值, 所以對(duì)變量進(jìn)行typeof操作, 實(shí)際上操作的是變量當(dāng)前持有的值的類型顿痪。
其他特殊情況
對(duì)于函數(shù)來(lái)說(shuō)typeof操作返回的是'function', 其length為參數(shù)的個(gè)數(shù), 數(shù)組的typeof返回的則是'object', 其length為數(shù)組的長(zhǎng)度钧忽。
undefined和undeclared
在js的世界中, 很多人傾向于認(rèn)為undefined和undeclared是同一個(gè)東西, 但是實(shí)際上他們是兩個(gè)不同的東西, 有如下代碼
let a
a //undefined
b //ReferenceError: b is not defined
上例中, b is not defined很容易讓人覺(jué)得b是一個(gè)undefined, 實(shí)際上b是一個(gè)undeclared, 但是好在js中有一個(gè)機(jī)制可以讓我們避免undeclared造成的程序報(bào)錯(cuò), 有如下代碼
if(DEBUG) {
console.log('Debugger is starting')
}
對(duì)于上面的代碼, 如果全局環(huán)境中沒(méi)有DEBUG變量, 則程序直接報(bào)錯(cuò), 為了解決上述問(wèn)題, 我們可以用typeof來(lái)解決, 對(duì)于undeclared, typeof返回的也是undefined
if(typeof DEBUG !== 'undefined') {
console.log('Debugger is starting')
}
經(jīng)過(guò)上面的改造, 無(wú)論DEBUG是否聲明, 程序都不會(huì)報(bào)錯(cuò)葡粒。
原生函數(shù)
js中常用的原生函數(shù)有:
- String()
- Number()
- Boolean()
- Array()
- Object()
- Function()
- RegExp()
- Date()
- Error()
- Symbol()
我們可以這樣用原生函數(shù):
let a = new Number(50)
console.log(a) //50
但是, 用原生函數(shù)構(gòu)造出來(lái)的對(duì)象可能個(gè)我們?cè)O(shè)想的有所不同
console.log(typeof a) //'Object'
console.log(a instanceof Number) //true
通過(guò)構(gòu)造函數(shù)（如 new String("abc") ）創(chuàng)建出來(lái)的是封裝了基本類型值（如 "abc" ）的封裝對(duì)象。
js的裝箱和拆箱
由于基本類型沒(méi)有.length和.toString()等方法, 所以當(dāng)我們對(duì)基本類型使用這些方法時(shí), js會(huì)自動(dòng)為基本類型包裝一個(gè)對(duì)應(yīng)的封裝對(duì)象, 比如數(shù)字會(huì)自動(dòng)變?yōu)?code>Number, 字符串會(huì)自動(dòng)變?yōu)?code>String黎炉，這種現(xiàn)象就叫做裝箱梅桩。
由于js會(huì)自動(dòng)為基本類型進(jìn)行裝箱, 所以一般我們不建議手動(dòng)直接使用封裝對(duì)象。
封裝對(duì)象釋疑
使用封裝對(duì)象時(shí)有些地方需要特別注意拜隧。比如Boolean
let a = new Boolean(false)
if(!a) {
console.log('aaa') //執(zhí)行不到這里
}
我們?yōu)?code>false創(chuàng)建了一個(gè)封裝對(duì)象, 我們的本意是想讓這個(gè)封裝對(duì)象的值是false, 然而一個(gè)對(duì)象的值永遠(yuǎn)都是真值宿百。所以我們得到了截然相反的結(jié)果趁仙。
如果想得到封裝對(duì)象中的基本類型, 則我們需要拆箱。在js中我們可以使用valueOf()函數(shù)來(lái)進(jìn)行拆箱:
var a = new String( "abc" );
var b = new Number( 42 );
var c = new Boolean( true );
a.valueOf(); // "abc"
b.valueOf(); // 42
c.valueOf(); // true
在需要用到封裝對(duì)象中的基本類型值的地方會(huì)發(fā)生隱式拆箱垦页。 具體過(guò)程（即強(qiáng)制類型轉(zhuǎn) 換）將在后面詳細(xì)介紹雀费。
類型轉(zhuǎn)換
將值從一種類型轉(zhuǎn)換為另一種類型通常稱為類型轉(zhuǎn)換 （type casting） ，這是顯式的情況痊焊；隱式的情況稱為 強(qiáng)制類型轉(zhuǎn)換 （coercion）盏袄。
let a = 42
let b = a + '' //強(qiáng)制類型轉(zhuǎn)換成字符串
let c = String(a) //顯式類型轉(zhuǎn)換為字符串
轉(zhuǎn)換成字符串
我們可以使用全局方法String()將其他字符轉(zhuǎn)換成字符串
String(1) //'1'
String(true) //'true'
String({}) // [object Object]
String(undefined) //'undefined'
String(null) //'null'
或者用toString()方法, 用toString()方法需要注意以下幾點(diǎn)
- 由于數(shù)字沒(méi)有
.運(yùn)算, 所以給數(shù)字用toString()方法需要用()包裹 - undefined和null使用toString()方法會(huì)報(bào)錯(cuò)
(1).toString() //'1'
undefined.toString() //報(bào)錯(cuò)
null.toString() //報(bào)錯(cuò)
轉(zhuǎn)換成數(shù)字
我們可以使用全局方法Number()將其他字符轉(zhuǎn)換成字符串, 這里面需要注意幾點(diǎn)
- 通常情況下解析字符串時(shí), 先把參數(shù)按照數(shù)字解析, 當(dāng)遇到無(wú)法解析成數(shù)字時(shí), 整個(gè)參數(shù)會(huì)被解析成NaN
- 空字符串, false, null會(huì)轉(zhuǎn)換為0
- true會(huì)被解析為1
- undefined, 對(duì)象, NaN都會(huì)被解析成NaN
Number('') //0
Number(undefined) //NaN
Number(null) //0
Number(NaN) //NaN
Number({}) //NaN
Number(true) //1
Number(false) //0
Number('123') //123
Number('123asc') //NaN
我們還可以用parseInt()來(lái)轉(zhuǎn)換成整數(shù), parseFloat()轉(zhuǎn)換成小數(shù)
這里個(gè)需要注意的地方, 當(dāng)遇到'123df'這種字符串的時(shí)候, parseInt()只會(huì)解析到最后一個(gè)數(shù)字處, 所以結(jié)果是123, parseFloat()同理, '1.26dcd'會(huì)解析成1.26
parseInt('1234dcsd') //1234
parseFloat('1.26ddd') //1.26
轉(zhuǎn)換成boolean
我們可以用Boolean()將其他類型轉(zhuǎn)換成boolean類型, 這里也有一點(diǎn)需要注意
- 除
undefined,null,0,NaN,''這五個(gè)falsy值是false外, 其余全部解析成true
我們也可以用!!后跟一個(gè)值來(lái)轉(zhuǎn)換成boolean如, !!1就是true
關(guān)于+和-的騷操作
我稍后加啊
內(nèi)存圖
基本類型在內(nèi)存中存儲(chǔ)的示意圖
基本類型的值按值傳遞
引用類型的內(nèi)存示意圖
引用類型的值按引用傳遞
關(guān)于內(nèi)存的幾個(gè)題目
1.最簡(jiǎn)單的,有以下代碼
let a = 1
let b = a
b=2
請(qǐng)問(wèn)a的值是多少？
答: a的值是1, 因?yàn)榛绢愋褪前粗祩鬟f
2.來(lái)一個(gè)稍微復(fù)雜點(diǎn)的
let a = {name: 'a'}
let b = a
b = {name: 'b'}
請(qǐng)問(wèn)a的值是多少?
答: a的值是{name: 'a'}
解析：
let a = {name: 'a'} //a指向堆內(nèi)存中的{name: 'a'}, 此時(shí)a存的是{name: 'a'}的地址
let b = a //將{name: 'a'}的地址賦值給b, 此時(shí)a和b指向同一個(gè)對(duì)象{name: 'a'}
b = {name: 'b'} //將一個(gè)新的對(duì)象{name: 'b'}的地址賦值給b, 此時(shí)a和b指向了不同的對(duì)象
此過(guò)程的內(nèi)存圖如下
3.在繼續(xù)來(lái)一個(gè)
let a = {name: 'a'}
let b =a
b.name = 'b'
請(qǐng)問(wèn) a.name是什么?
答: a.name是'b'
解析
let a = {name: 'a'} //a指向堆內(nèi)存中的{name: 'a'}, 此時(shí)a存的是{name: 'a'}的地址
let b = a //將{name: 'a'}的地址賦值給b, 此時(shí)a和b指向同一個(gè)對(duì)象{name: 'a'}
b.name = 'b' //修改對(duì)象{name: 'a'}的name為'b', 由于a也指向這個(gè)對(duì)象, 所以a.name也是'b'
內(nèi)存圖如下
4.最后再來(lái)一個(gè)
let a = {name: 'a'}
let b = a
b = null
請(qǐng)問(wèn)a.name是什么?
答: a.name是'a'
解析
let a = {name: 'a'} //a指向堆內(nèi)存中的{name: 'a'}, 此時(shí)a存的是{name: 'a'}的地址
let b = a //將{name: 'a'}的地址賦值給b, 此時(shí)a和b指向同一個(gè)對(duì)象{name: 'a'}
b = null //將null賦值給b, 此時(shí)b的值是null, 不是對(duì)象的地址, 與對(duì)象的鏈接已斷開
內(nèi)存圖如下
解決引用類型賦值相關(guān)問(wèn)題的解題方法就一個(gè): 畫內(nèi)存圖
循環(huán)引用問(wèn)題
假設(shè)我們有如下代碼
let a = {
name: 'Adam',
age: 25
}
a.self = a
當(dāng)我們調(diào)用a.self的時(shí)候, 我們神奇的發(fā)現(xiàn), a.self竟然指向的是他自己, 然后他自己里面依然有self, 我們?cè)僬{(diào)用的時(shí)候, 發(fā)現(xiàn)我擦, 還能調(diào)用自己, 于是我就就來(lái)了一個(gè)騷操作:
a.self.self.self.self.self.self.self
我們發(fā)現(xiàn), 不管我們調(diào)用多少次self, 都會(huì)指向自己, 這就是循環(huán)引用
繼續(xù)上內(nèi)存圖
通過(guò)內(nèi)存圖我們發(fā)現(xiàn), 當(dāng)我們給a.self賦值a之后,在對(duì)象中, 會(huì)有一個(gè)self屬性, 它的值就是a對(duì)象的地址, 所以每次我們調(diào)用a.self的時(shí)候, 它都會(huì)通過(guò)地址引用自己, 所以我們才可以無(wú)限次調(diào)用
再來(lái)一個(gè)題就結(jié)束吧
let a = {n:1}
let b = a
a.x = a = {n:2}
alert(a.x)
alert(b.x)
請(qǐng)問(wèn)alert(a.x)是多少, alert(b.x)是多少?
答: a.x是undefined, b.x是[object Object]
解析
let a = {n:1}
let b = a
前兩行很好理解, 就是把對(duì)象的地址賦值給b, 重點(diǎn)是后面一句
a.x = a = {n:2}
這里有一個(gè)小陷阱, 對(duì)于對(duì)象的連續(xù)=運(yùn)算,js會(huì)先固定對(duì)象的地址, 當(dāng)整個(gè)運(yùn)算完成后, 對(duì)象地址才會(huì)改變
什么意思呢, 我們把上面代碼變形下
1.我們把原來(lái)地址的a叫做a1, 賦值{n:2}后的叫a2, 在沒(méi)開始計(jì)算前, js是這樣解析的
a1.x = a1 = {n:2}
2.先做a1= {n:2}運(yùn)算, 這個(gè)運(yùn)算相當(dāng)于指向一個(gè)新對(duì)象, 我們?yōu)榱藚^(qū)分, 所以叫a2, a2指向{n:2}
3.那么經(jīng)過(guò)這一步運(yùn)算代碼等價(jià)于
a1.x = a2
4.所以結(jié)果是a1.x指向{n: 2}, a2.x并沒(méi)有指向任何一個(gè)對(duì)象
5.當(dāng)賦值語(yǔ)句執(zhí)行完后, 此時(shí)的a才會(huì)變?yōu)?code>a2
6.所以alert(a.x)其實(shí)等價(jià)于alert(a2.x), alert(b.x)等價(jià)于alert(a1.x)
還是來(lái)個(gè)內(nèi)存圖
GC垃圾回收
如果一個(gè)對(duì)象沒(méi)有被引用, 它就是垃圾, 將被回收
看下面的代碼
let a = {name: 'a'}
let b = {name: 'b'}
a = b
上內(nèi)存圖
剛開始的時(shí)候a和b各指向一個(gè)對(duì)象
后來(lái),我們改變了a的值, a指向了b指向的對(duì)象, 所以之前a指向的那個(gè)對(duì)象, 就變成了垃圾
這個(gè)垃圾在瀏覽器覺(jué)得沒(méi)有用的時(shí)候, 就會(huì)被回收
再來(lái)個(gè)例子
let fn = function() {}
document.body.onclick = fn
fn = null
請(qǐng)問(wèn)fn是不是垃圾
答: 不是
來(lái)再上內(nèi)存圖
剛開始的時(shí)候
賦值后
內(nèi)存泄露
這個(gè)代碼按理說(shuō)到這就解析完了, 但是在IE里有個(gè)bug
還是剛才那個(gè)代碼
let fn = function() {}
document.body.onclick = fn
fn = null
我們剛才分析過(guò)了, fn不是垃圾,雖然不是垃圾, 但是如果我們把當(dāng)前網(wǎng)頁(yè)關(guān)了, 那fn按理說(shuō)應(yīng)該是被銷毀的, 但是在IE里薄啥，如果你僅僅是關(guān)閉頁(yè)面, 是不會(huì)被銷毀的, 只有關(guān)整個(gè)瀏覽器才會(huì)銷毀
深拷貝與淺拷貝
淺拷貝
let a = {name: 'a'}
let b = a
b.name = 'b'
a.name //b
我們將a的值傳給b, 但是我們改變b指向的對(duì)象的值會(huì)引起a的屬性值的改變, 這種拷貝我們就叫做淺拷貝
淺拷貝內(nèi)存圖
深拷貝
所有基本類型的復(fù)制都是深拷貝, 所以我們不討論基本類型的深拷貝
深拷貝內(nèi)存圖
深拷貝就到下回更新.....
