淺復(fù)制和深復(fù)制及$.extend()

對于字符串類型，淺復(fù)制是對值的復(fù)制，對于對象來說，淺復(fù)制是對對象地址的復(fù)制，并沒 有開辟新的棧，也就是復(fù)制的結(jié)果是兩個(gè)對象指向同一個(gè)地址，修改其中一個(gè)對象的屬性，則另一個(gè)對象的屬性也會(huì)改變，而深復(fù)制則是開辟新的棧，兩個(gè)對象對應(yīng)兩個(gè)不同的地址，修改一個(gè)對象的屬性，不會(huì)改變另一個(gè)對象的屬性。

淺復(fù)制

var Chinese = {
　　nation:'中國'
}

　
function extendCopy(p) {
　　　　var c = {};
　　　　for (var i in p) { 
　　　　　　c[i] = p[i];
　　　　}
　　　　c.uber = p;
　　　　return c;
　}

使用的時(shí)候，這樣寫：

var City = extendCopy(Chinese);
City.location = '河南';
console.log(City.nation); // 中國

但是，這樣的拷貝有一個(gè)問題。那就是，如果父對象的屬性等于數(shù)組或另一個(gè)對象，那么實(shí)際上，子對象獲得的只是一個(gè)內(nèi)存地址，而不是真正拷貝，因此存在父對象被篡改的可能。

請看，現(xiàn)在給Chinese添加一個(gè)”出生地”屬性，它的值是一個(gè)數(shù)組。
Chinese.birthPlaces = ['北京','上海','香港'];
通過extendCopy()函數(shù)，City繼承了Chinese。

var City = extendCopy(Chinese);

然后，我們?yōu)镃ity的”出生地”添加一個(gè)城市：

City.birthPlaces.push('廈門');

看一下輸入結(jié)果

console.log(City.birthPlaces); //北京, 上海, 香港, 廈門
console.log(Chinese.birthPlaces); //北京, 上海, 香港, 廈門

結(jié)果是兩個(gè)的出生地都被改了。
所以，extendCopy() 只是拷貝了基本類型的數(shù)據(jù)，我們把這種拷貝叫做“淺拷貝”。

深拷貝

因?yàn)闇\深拷有如此弊端所以我們接下來看一下深拷貝,所謂”深拷貝”，就是能夠?qū)崿F(xiàn)真正意義上的數(shù)組和對象的拷貝。它的實(shí)現(xiàn)并不難，只要遞歸調(diào)用”淺拷貝”就行了

function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}

看一下使用方法：

var City = deepCopy(Chinese);

現(xiàn)在，給父對象加一個(gè)屬性，值為數(shù)組。然后，在子對象上修改這個(gè)屬性：

Chinese.birthPlaces = ['北京','上海','香港'];
City.birthPlaces.push('廈門');

console.log(City.birthPlaces); //北京, 上海, 香港, 廈門
console.log(Chinese.birthPlaces); //北京, 上海, 香港

$.extend()

jquery 中$.extend()如同。

$.extend( [deep ], target, object1 [, objectN ] )

deep

類型: Boolean
如果是true，合并成為遞歸（又叫做深拷貝）。

target

類型: Object
對象擴(kuò)展。這將接收新的屬性。

object1

類型: Object
一個(gè)對象，它包含額外的屬性合并到第一個(gè)參數(shù).

objectN

類型: Object
包含額外的屬性合并到第一個(gè)參數(shù)

當(dāng)我們提供兩個(gè)或多個(gè)對象給$.extend()，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）。
如果只有一個(gè)參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略。在這種情況下，jQuery對象本身被默認(rèn)為目標(biāo)對象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的。
請記住，目標(biāo)對象（第一個(gè)參數(shù)）將被修改，并且將通過$.extend()返回。然而，如果我們想保留原對象，我們可以通過傳遞一個(gè)空對象作為目標(biāo)對象：

var object = $.extend({}, object1, object2);

在默認(rèn)情況下，通過$.extend()合并操作不是遞歸的;如果第一個(gè)對象的屬性本身是一個(gè)對象或數(shù)組，那么它將完全用第二個(gè)對象相同的key重寫一個(gè)屬性。這些值不會(huì)被合并。可以通過檢查下面例子中 banana 的值，就可以了解這一點(diǎn)。然而，如果將 true 作為該函數(shù)的第一個(gè)參數(shù)，那么會(huì)在對象上進(jìn)行遞歸的合并。

警告:不支持第一個(gè)參數(shù)傳遞 false 。

1. 合并兩個(gè)對象，并修改第一個(gè)對象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

// Assuming JSON.stringify - not available in IE<8
console.log( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

2. 采用遞歸方式合并兩個(gè)對象，并修改第一個(gè)對象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1, recursively
$.extend( true, object1, object2 );

// Assuming JSON.stringify - not available in IE<8
console.log( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

3. 合并 defaults 和 options 對象，并且不修改 defaults 對象。這是常用的插件開發(fā)模式。

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );


console.log(JSON.stringify( defaults ));
console.log(JSON.stringify( options  ));
console.log(JSON.stringify( settings  ));
//defaults -- {"validate":false,"limit":5,"name":"foo"}
//options -- {"validate":true,"name":"bar"}
//settings -- {"validate":true,"limit":5,"name":"bar"}

Javascript 判斷對象是否相等

在Javascript中相等運(yùn)算包括”==”,”===”全等，兩者不同之處，不必多數(shù)，本篇文章我們將來講述如何判斷兩個(gè)對象是否相等？ 你可能會(huì)認(rèn)為，如果兩個(gè)對象有相同的屬性，以及它們的屬性有相同的值，那么這兩個(gè)對象就相等。那么下面我們通過一個(gè)實(shí)例來論證下：

var obj1 = {
    name: "Benjamin",
    sex : "male"
}

var obj2 = {
    name: "Benjamin",
    sex : "male"
}

//Outputs: false
console.log(obj1 == obj2);

//Outputs: false
console.log(obj1 === obj2);

通過上面的例子可以看到，無論使用”==”還是”===”，都返回false。主要原因是基本類型string,number通過值來比較，而對象（Date,Array）及普通對象通過指針指向的內(nèi)存中的地址來做比較?？聪旅嬉粋€(gè)例子：

var obj1 = {
    name: "Benjamin",
    sex : "male"
};

var obj2 = {
    name: "Benjamin",
    sex : "male"
};

var obj3 = obj1;

//Outputs: true
console.log(obj1 == obj3);

//Outputs: true
console.log(obj1 === obj3);

//Outputs: false
console.log(obj2 == obj3);

//Outputs: false
console.log(obj2 === obj3);

上例返回true，是因?yàn)閛bj1和ob3的指針指向了內(nèi)存中的同一個(gè)地址。和面向?qū)ο蟮恼Z言（Java/C++）中值傳遞和引用傳遞的概念相似。 因?yàn)?，如果你想判斷兩個(gè)對象是否相等，你必須清晰，你是想判斷兩個(gè)對象的屬性是否相同，還是屬性對應(yīng)的值是否相同，還是怎樣？

function person(name) {  
    this.name=name;  
}  

var p1 = new person("p1");  
var p2 = new person("p2");  

console.log(p1 == p2); //false  

person.prototype.sayHi = function() {  
    // do sayHi here  
}  

console.log(p1.sayHi() == p2.sayHi()); //true  
console.log(p1.sayHi() === p2.sayHi()); //true
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)（Q/GDW）- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿：20170802 前言： 排版 ...
    庭說閱讀 12,513評論 6贊 13
  • 三，字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn)，只要將碼點(diǎn)放入大括號，就能正確解讀該字符。有了這...
    eastbaby閱讀 1,672評論 0贊 8
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序：基本語法，類相關(guān)的語法，內(nèi)部類的語法，繼承相關(guān)的語法，異常的語法，線程的語...
    子非魚_t_閱讀 34,824評論 18贊 399
  • 1.屬性的簡潔表示法 允許直接寫入變量和函數(shù) 上面代碼表明，ES6 允許在對象之中，直接寫變量。這時(shí)，屬性名為變量...
    雨飛飛雨閱讀 1,283評論 0贊 3
  • 人都說女人是男人的學(xué)校，這同時(shí)好男人也是女人的學(xué)校。 每個(gè)女人都會(huì)依賴能給自己安全感的男人，他的特征...
    金媚兒閱讀 1,589評論 0贊 1

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