js詳解實現(xiàn)數(shù)據(jù)的深拷貝(內(nèi)含數(shù)據(jù)類型判斷)

首先,要想實現(xiàn)數(shù)據(jù)的深拷貝就要明白什么是深拷貝。

????????深拷貝是指源對象與拷貝對象互相獨(dú)立,其中任何一個對象的改動都不會對另外一個對象造成影響。


其次,實現(xiàn)深拷貝就要區(qū)分?jǐn)?shù)據(jù)類型,因為對于對象來說,只是簡單的賦值,共用的還是同一塊內(nèi)存,改變?nèi)魏我粋€變量都會影響公用內(nèi)存中的數(shù)據(jù)。

圖1

1.所以就要判斷數(shù)據(jù)的類型,數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型:

基本類型:String、Number、Boolean、Null、Undefined

引用類型:Object、Array、Date、Function、Error、RegExp、Math、Number、String、Boolean、Globle。

2.js有幾種判斷數(shù)據(jù)類型的方法,分別有type of,instanceof,constructor,Object.prototype.toString();

具體使用方法如下:

一、typeof,typeof有兩種判斷的方法 typeof A,typeof(A);

typeof 返回一個表示數(shù)據(jù)類型的字符串,返回結(jié)果包括:number、boolean、string、undefined、function、object等6種數(shù)據(jù)類型。

typeof 可以對JS基本數(shù)據(jù)類型做出準(zhǔn)確的判斷(除了null,typeof? null會返回object,因為特殊值null被認(rèn)為是一個空的對象引用),而對于引用類型返回的基本上都是object, 當(dāng)我們需要知道某個對象的具體類型時,typeof 就不能準(zhǔn)確判斷了。

圖2

二、instanceof

判斷對象和構(gòu)造函數(shù)在原型鏈上是否有關(guān)系,如果有關(guān)系,返回真,否則返回假

圖3

基本數(shù)據(jù)類型沒有檢測出他們的類型,但是我們使用下面的方式創(chuàng)建num、str、boolean,是可以檢測出類型的:

圖4

三、constructor:查看對象對應(yīng)的構(gòu)造函數(shù)

constructor 在其對應(yīng)對象的原型下面,是自動生成的。當(dāng)我們寫一個構(gòu)造函數(shù)的時候,程序會自動添加:構(gòu)造函數(shù)名.prototype.constructor = 構(gòu)造函數(shù)名


圖5

從上面可以看到,undefined和null是不能夠判斷出類型的,并且會報錯。因為null和undefined是無效的對象,因此是不會有constructor存在的

同時我們也需要注意到的是:使用constructor是不保險的,因為constructor屬性是可以被修改的,會導(dǎo)致檢測出的結(jié)果不正確。

四、Object.prototype.toString:不管是什么類型,可以立即判斷出

toString是Object原型對象上的一個方法,該方法默認(rèn)返回其調(diào)用者的具體類型,更嚴(yán)格的講,是 toString運(yùn)行時this指向的對象類型, 返回的類型

格式為[object xxx],xxx是具體的數(shù)據(jù)類型,其中包括:

String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument,... 基本上所有對象的類型都可以通過這個方法獲取到。

圖6

從這個結(jié)果也可以看出,不管是什么類型的,Object.prototype.toString.call();都可以判斷出其具體的類型。

下面是對toString的封裝:

圖7

五、綜上,四種方法的優(yōu)缺點如下

圖8

從上表中我們看到了,instanceof和constructor不能跨iframe,上面沒有細(xì)說,所以下面我們直接上例子嘍

例:跨頁面判斷是否是數(shù)組

圖9

從結(jié)果中可以看出,constructor和instanceof都沒有正確的判斷出類型,只有object.prototype.toString.call();正確判斷出了

其實面試官也經(jīng)常喜歡讓說一種最簡單的判斷是數(shù)組的方法,記住嘍是object.prototype.toString.call()哦!


最后,做了這么多的鋪墊,該進(jìn)入我們深拷貝的實現(xiàn)了

圖10

此處對function進(jìn)行的簡單的賦值。


參考文章鏈接:https://blog.csdn.net/lhjuejiang/article/details/79623973

https://www.jb51.net/article/91105.htm

https://www.jb51.net/article/118551.htm

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容