跟我學(xué)習(xí)javascript的基本類(lèi)型和引用類(lèi)型
一、基本類(lèi)型和引用類(lèi)型
基本的數(shù)據(jù)類(lèi)型有5個(gè):undefined,boolean,number,string,null
typeof null; //"object" typeof undefined; //"undefined" typeof 1; //"number" typeof false //"boolean" typeof "1" //"string"
(令人困惑的是,對(duì)null類(lèi)型進(jìn)行typeof操作得到的結(jié)果為“object”,然而,ECMAScript標(biāo)準(zhǔn)描述其為一個(gè)獨(dú)特的類(lèi)型。)
為了便于操作基本類(lèi)型值,ECMAScript還提供了三個(gè)特殊的引用類(lèi)型:Boolean、Number和String,標(biāo)準(zhǔn)庫(kù)提供了構(gòu)造函數(shù)來(lái)封裝布爾值、數(shù)字和字符串作為對(duì)象。這些類(lèi)型與其他引用類(lèi)型相似,同時(shí)也具有與各自的基本包裝類(lèi)型相應(yīng)的特殊行為。實(shí)際上,每當(dāng)讀取一個(gè)基本類(lèi)型值時(shí),后臺(tái)就會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的基本包裝類(lèi)型的對(duì)象,從而讓我們能夠調(diào)用一些方法來(lái)操作這些數(shù)據(jù)。
var s1 = "some text"; var s2 = s1.substring(2); var s3 = new String("some text");
但是不同于原始的字符串,String對(duì)象是一個(gè)真正的對(duì)象。
typeof s1; //"string" typeof s3; //"object"
這個(gè)例子中的變量s1包含一個(gè)字符串,字符串當(dāng)然是基本類(lèi)型值。而下一行調(diào)用了s1的substring()方法,并將返回的結(jié)果保存在s2中。我們知道,基本類(lèi)型值不是對(duì)象,因此從邏輯上講,它們不應(yīng)該有方法(但是它們確實(shí)有方法)。其實(shí),為了讓我們實(shí)現(xiàn)這種直觀的操作,后臺(tái)已經(jīng)自動(dòng)完成了一系列的處理。當(dāng)?shù)诙写a訪(fǎng)問(wèn)s1時(shí),訪(fǎng)問(wèn)過(guò)程處于一種讀取模式,也就是從內(nèi)存中讀取這個(gè)字符串的值。而在讀取模式中訪(fǎng)問(wèn)字符串時(shí),后臺(tái)都會(huì)自動(dòng)完成下列處理:
(1)創(chuàng)建String類(lèi)型的一個(gè)實(shí)例。
(2)在實(shí)例上調(diào)用指定方法。
(3)銷(xiāo)毀這個(gè)實(shí)例。
可以使用以下代碼表示:
var s1 = new String("some text"); var s2 = s1.substring(2); s1 = null;
經(jīng)過(guò)此番處理,基本的字符串值就變得跟對(duì)象一樣了。而且,上面三個(gè)步驟也適用于Boolean和Number類(lèi)型對(duì)應(yīng)的布爾值和數(shù)字值。
二、生命周期
引用類(lèi)型與基本包裝類(lèi)型的主要區(qū)別就是對(duì)象的生命周期。使用new操作符創(chuàng)建的引用類(lèi)型的實(shí)例,在執(zhí)行流離開(kāi)當(dāng)前作用域之前都一直保存在內(nèi)存中。而自動(dòng)創(chuàng)建的基本包裝類(lèi)型的對(duì)象,只存在于這一行代碼的執(zhí)行期(瞬間),然后立即銷(xiāo)毀。這就意味著我們不能在運(yùn)行時(shí)為屬性添加屬性和方法。
var s1 = "some text"; s1.color = "red"; alert(s1.color); //undefined
當(dāng)然,可以顯示調(diào)用Boolean、Number和String來(lái)創(chuàng)建基本包裝類(lèi)型的對(duì)象,不過(guò),不幫不建議這么做。對(duì)基本包裝類(lèi)型的實(shí)例調(diào)用typeof會(huì)返回”object”,而且所有基本包裝類(lèi)型的對(duì)象都會(huì)被轉(zhuǎn)化為布爾值true。。
var obj = new Object("some text"); alert(obj instanceof String) //true
值得注意的是,使用new調(diào)用基本包裝類(lèi)型的構(gòu)造函數(shù),與直接調(diào)用同名的轉(zhuǎn)型函數(shù)是不一樣的。
var value = "25"; var number = Number(value);//轉(zhuǎn)型函數(shù) alert(typeof number) //number var obj = new Number(var); //構(gòu)造函數(shù) alert(typeof obj) //object
三、基本類(lèi)型特點(diǎn)
1.基本類(lèi)型的值是不可變得:
任何方法都無(wú)法改變一個(gè)基本類(lèi)型的值,比如一個(gè)字符串:
var name = 'jozo'; name.toUpperCase(); // 輸出 'JOZO' console.log(name); // 輸出 'jozo'
會(huì)發(fā)現(xiàn)原始的name并未發(fā)生改變,而是調(diào)用了toUpperCase()方法后返回的是一個(gè)新的字符串。
再來(lái)看個(gè):
var person = 'jozo'; person.age = 22; person.method = function(){//...}; console.log(person.age); // undefined console.log(person.method); // undefined
通過(guò)上面代碼可知,我們不能給基本類(lèi)型添加屬性和方法,再次說(shuō)明基本類(lèi)型時(shí)不可變得;
2.基本類(lèi)型的比較是值的比較:
只有在它們的值相等的時(shí)候它們才相等。
但你可能會(huì)這樣:
var a = 1; var b = true; console.log(a == b);//true
它們不是相等嗎?其實(shí)這是類(lèi)型轉(zhuǎn)換和 == 運(yùn)算符的知識(shí)了,也就是說(shuō)在用==比較兩個(gè)不同類(lèi)型的變量時(shí)會(huì)進(jìn)行一些類(lèi)型轉(zhuǎn)換。像上面的比較先會(huì)把true轉(zhuǎn)換為數(shù)字1再和數(shù)字1進(jìn)行比較,結(jié)果就是true了。 這是當(dāng)比較的兩個(gè)值的類(lèi)型不同的時(shí)候==運(yùn)算符會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換,但是當(dāng)兩個(gè)值的類(lèi)型相同的時(shí)候,即使是==也相當(dāng)于是===。
var a = 'jozo'; var b = 'jozo'; console.log(a === b);//true
3.基本類(lèi)型的變量是存放在棧區(qū)的(棧區(qū)指內(nèi)存里的棧內(nèi)存)
假如有以下幾個(gè)基本類(lèi)型的變量:
var name = 'jozo'; var city = 'guangzhou'; var age = 22;
那么它的存儲(chǔ)結(jié)構(gòu)如下圖:
棧區(qū)包括了變量的標(biāo)識(shí)符和變量的值。
四、引用類(lèi)型特點(diǎn)
引用類(lèi)型會(huì)比較好玩有趣一些。
javascript中除了上面的基本類(lèi)型(number,string,boolean,null,undefined)之外就是引用類(lèi)型了,也可以說(shuō)是就是對(duì)象了。對(duì)象是屬性和方法的集合。也就是說(shuō)引用類(lèi)型可以擁有屬性和方法,屬性又可以包含基本類(lèi)型和引用類(lèi)型。來(lái)看看引用類(lèi)型的一些特性:
1).引用類(lèi)型的值是可變的
我們可為為引用類(lèi)型添加屬性和方法,也可以刪除其屬性和方法,如:
var person = {};//創(chuàng)建個(gè)控對(duì)象 --引用類(lèi)型 person.name = 'jozo'; person.age = 22; person.sayName = function(){console.log(person.name);} person.sayName();// 'jozo' delete person.name; //刪除person對(duì)象的name屬性 person.sayName(); // undefined
上面代碼說(shuō)明引用類(lèi)型可以擁有屬性和方法,并且是可以動(dòng)態(tài)改變的。
2).引用類(lèi)型的值是同時(shí)保存在棧內(nèi)存和堆內(nèi)存中的對(duì)象
javascript和其他語(yǔ)言不同,其不允許直接訪(fǎng)問(wèn)內(nèi)存中的位置,也就是說(shuō)不能直接操作對(duì)象的內(nèi)存空間,那我們操作啥呢? 實(shí)際上,是操作對(duì)象的引用,所以引用類(lèi)型的值是按引用訪(fǎng)問(wèn)的。
準(zhǔn)確地說(shuō),引用類(lèi)型的存儲(chǔ)需要內(nèi)存的棧區(qū)和堆區(qū)(堆區(qū)是指內(nèi)存里的堆內(nèi)存)共同完成,棧區(qū)內(nèi)存保存變量標(biāo)識(shí)符和指向堆內(nèi)存中該對(duì)象的指針,也可以說(shuō)是該對(duì)象在堆內(nèi)存的地址。
假如有以下幾個(gè)對(duì)象:
var person1 = {name:'jozo'}; var person2 = {name:'xiaom'}; var person3 = {name:'xiaoq'};
則這三個(gè)對(duì)象的在內(nèi)存中保存的情況如下圖:
3).引用類(lèi)型的比較是引用的比較
var person1 = '{}'; var person2 = '{}'; console.log(person1 == person2); // true
上面講基本類(lèi)型的比較的時(shí)候提到了當(dāng)兩個(gè)比較值的類(lèi)型相同的時(shí)候,相當(dāng)于是用 === ,所以輸出是true了。再看看:
var person1 = {}; var person2 = {}; console.log(person1 == person2); // false
可能你已經(jīng)看出破綻了,上面比較的是兩個(gè)字符串,而下面比較的是兩個(gè)對(duì)象,為什么長(zhǎng)的一模一樣的對(duì)象就不相等了呢?
別忘了,引用類(lèi)型時(shí)按引用訪(fǎng)問(wèn)的,換句話(huà)說(shuō)就是比較兩個(gè)對(duì)象的堆內(nèi)存中的地址是否相同,那很明顯,person1和person2在堆內(nèi)存中地址是不同的:
所以這兩個(gè)是完全不同的對(duì)象,所以返回false;
五、簡(jiǎn)單賦值
在從一個(gè)變量向另一個(gè)變量賦值基本類(lèi)型時(shí),會(huì)在該變量上創(chuàng)建一個(gè)新值,然后再把該值復(fù)制到為新變量分配的位置上:
var a = 10; var b = a; a ++ ; console.log(a); // 11 console.log(b); // 10
此時(shí),a中保存的值為 10 ,當(dāng)使用 a 來(lái)初始化 b 時(shí),b 中保存的值也為10,但b中的10與a中的是完全獨(dú)立的,該值只是a中的值的一個(gè)副本,此后,這兩個(gè)變量可以參加任何操作而相互不受影響。
也就是說(shuō)基本類(lèi)型在賦值操作后,兩個(gè)變量是相互不受影響的。
六、對(duì)象引用
當(dāng)從一個(gè)變量向另一個(gè)變量賦值引用類(lèi)型的值時(shí),同樣也會(huì)將存儲(chǔ)在變量中的對(duì)象的值復(fù)制一份放到為新變量分配的空間中。前面講引用類(lèi)型的時(shí)候提到,保存在變量中的是對(duì)象在堆內(nèi)存中的地址,所以,與簡(jiǎn)單賦值不同,這個(gè)值的副本實(shí)際上是一個(gè)指針,而這個(gè)指針指向存儲(chǔ)在堆內(nèi)存的一個(gè)對(duì)象。那么賦值操作后,兩個(gè)變量都保存了同一個(gè)對(duì)象地址,則這兩個(gè)變量指向了同一個(gè)對(duì)象。因此,改變其中任何一個(gè)變量,都會(huì)相互影響:
var a = {}; // a保存了一個(gè)空對(duì)象的實(shí)例 var b = a; // a和b都指向了這個(gè)空對(duì)象 a.name = 'jozo'; console.log(a.name); // 'jozo' console.log(b.name); // 'jozo' b.age = 22; console.log(b.age);// 22 console.log(a.age);// 22 console.log(a == b);// true
它們的關(guān)系如下圖:
因此,引用類(lèi)型的賦值其實(shí)是對(duì)象保存在棧區(qū)地址指針的賦值,因此兩個(gè)變量指向同一個(gè)對(duì)象,任何的操作都會(huì)相互影響。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- Javascript 關(guān)于基本類(lèi)型和引用類(lèi)型的個(gè)人理解
- 再談Javascript中的基本類(lèi)型和引用類(lèi)型(推薦)
- JavaScript引用類(lèi)型和基本類(lèi)型詳解
- 詳解JavaScript基本類(lèi)型和引用類(lèi)型
- JavaScript給input的value賦值引發(fā)的關(guān)于基本類(lèi)型值和引用類(lèi)型值問(wèn)題
- javascript中基本類(lèi)型和引用類(lèi)型的區(qū)別分析
- JavaScript數(shù)據(jù)類(lèi)型之基本類(lèi)型和引用類(lèi)型的值
- 淺析JavaScript基本類(lèi)型與引用類(lèi)型
- Javascript中的基本類(lèi)型和引用類(lèi)型概述說(shuō)明
相關(guān)文章
js倒計(jì)時(shí)小實(shí)例(多次定時(shí))
這篇文章主要介紹了js實(shí)現(xiàn)可多次定時(shí)的倒計(jì)時(shí)小實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript實(shí)現(xiàn)樹(shù)的遍歷算法示例【廣度優(yōu)先與深度優(yōu)先】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)樹(shù)的遍歷算法,結(jié)合實(shí)例形式分析了javascript針對(duì)樹(shù)結(jié)構(gòu)的廣度優(yōu)先遍歷與深度優(yōu)先遍歷實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案
這篇文章主要介紹了JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案,需要的朋友可以參考下2017-06-06Javascript中引用類(lèi)型傳遞的知識(shí)點(diǎn)小結(jié)
這篇文章主要給大家介紹了關(guān)于Javascript中引用類(lèi)型傳遞的知識(shí)點(diǎn),文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-03-03window.ActiveXObject使用說(shuō)明
判斷瀏覽器是否支持ActiveX控件,如果瀏覽器支持ActiveX控件可以利用2010-11-11javascript的函數(shù)、創(chuàng)建對(duì)象、封裝、屬性和方法、繼承
從一開(kāi)始接觸到j(luò)s就感覺(jué)好靈活,每個(gè)人的寫(xiě)法都不一樣,比如一個(gè)function就有N種寫(xiě)法2011-03-03