在JavaScript這門語言中，數(shù)據(jù)類型分為兩大類：基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型。基本數(shù)據(jù)類型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），而復(fù)雜數(shù)據(jù)類型包括Object，而所有其他引用類型（Array、Date、RegExp、Function、基本包裝類型（Boolean、String、Number）、Math等）都是Object類型的實(shí)例對象，因此都可以繼承Object原型對象的一些屬性和方法。
而對于基本數(shù)據(jù)類型來說，復(fù)制一個(gè)變量值，本質(zhì)上就是copy了這個(gè)變量。一個(gè)變量值的修改，不會影響到另外一個(gè)變量。看一個(gè)簡單的例子。
let val = 123;let copy = val;console.log(copy); //123val = 456; //修改val的值對copy的值不產(chǎn)生影響console.log(copy); //123
而對于復(fù)雜數(shù)據(jù)類型來說，同基本數(shù)據(jù)類型實(shí)現(xiàn)的不太相同。對于復(fù)雜數(shù)據(jù)類型的復(fù)制，要注意的是，變量名只是指向這個(gè)對象的指針。當(dāng)我們將保存對象的一個(gè)變量賦值給另一個(gè)變量時(shí)，實(shí)際上復(fù)制的是這個(gè)指針，而兩個(gè)變量都指向都一個(gè)對象。因此，一個(gè)對象的修改，會影響到另外一個(gè)對象。
// obj只是指向?qū)ο蟮闹羔榣et obj = { character: 'peaceful'};//copy變量復(fù)制了這個(gè)指針，指向同一個(gè)對象let copy = obj;console.log(copy); //{character: 'peaceful'}obj.character = 'lovely';console.log(copy); //{character: 'lovely'} 有一副很形象的圖描述了復(fù)雜數(shù)據(jù)類型復(fù)制的原理
同理，在復(fù)制一個(gè)數(shù)組時(shí)，變量名只是指向這個(gè)數(shù)組對象的指針；在復(fù)制一個(gè)函數(shù)時(shí)，函數(shù)名只是指向這個(gè)函數(shù)對象的指針
let arr = [1, 2, 3];let copy = arr;console.log(copy); // [1, 2, 3]arr[0] = 'keith';console.log(copy); // 數(shù)組對象被改變： ['keith', 2, 3]arr = null;console.log(copy); // ['keith', 2, 3] 即使arr=null，也不會影響copy。因此此時(shí)的arr變量只是一個(gè)指向數(shù)組對象的指針function foo () { return 'hello world';};let bar = foo;console.log(foo());foo = null; //foo只是指向函數(shù)對象的指針console.log(bar());因此，我們應(yīng)該如何實(shí)現(xiàn)對象的深淺復(fù)制?
復(fù)制對象
在JavaScript中，復(fù)制對象分為兩種方式，淺復(fù)制和深復(fù)制。
淺復(fù)制沒有辦法去真正的去復(fù)制一個(gè)對象，而只是保存了對該對象的引用；而深復(fù)制可以實(shí)現(xiàn)真正的復(fù)制一個(gè)對象。
淺復(fù)制
在ES6中，Object對象新增了一個(gè)assign方法，可以實(shí)現(xiàn)對象的淺復(fù)制。這里談?wù)凮bject.assign方法的具體用法，因?yàn)樯院髸治鰆Query的extend方法，實(shí)現(xiàn)的原理同Object.assign方法差不多
Object.assign的第一個(gè)參數(shù)是目標(biāo)對象，可以跟一或多個(gè)源對象作為參數(shù)，將源對象的所有可枚舉（[[emuerable]] === true）復(fù)制到目標(biāo)對象。這種復(fù)制屬于淺復(fù)制，復(fù)制對象時(shí)只是包含對該對象的引用。Object.assign(target, [source1, source2, ...])
要實(shí)現(xiàn)對象的淺復(fù)制，可以使用Object.assign方法
let target = {a: 123};let source1 = {b: 456};let source2 = {c: 789};let obj = Object.assign(target, source1, source2);console.log(obj);不過對于深復(fù)制來說，Object.assign方法無法實(shí)現(xiàn)
let target = {a: 123};let source1 = {b: 456};let source2 = {c: 789, d: {e: 'lovely'}};let obj = Object.assign(target, source1, source2);source2.d.e = 'peaceful';console.log(obj); // {a: 123, b: 456, c: 789, d: {e: 'peaceful'}}從上面代碼中可以看出，source2對象中e屬性的改變，仍然會影響到obj對象
深復(fù)制
在實(shí)際的開發(fā)項(xiàng)目中，前后端進(jìn)行數(shù)據(jù)傳輸，主要是通過JSON實(shí)現(xiàn)的。JSON全稱：JavaScript Object Notation，JavaScript對象表示法。
JSON對象下有兩個(gè)方法，一是將JS對象轉(zhuǎn)換成字符串對象的JSON.stringify方法；一個(gè)是將字符串對象轉(zhuǎn)換成JS對象的JSON.parse方法。
這兩個(gè)方法結(jié)合使用可以實(shí)現(xiàn)對象的深復(fù)制。也就是說，當(dāng)我們需要復(fù)制一個(gè)obj對象時(shí)，可以先調(diào)用JSON.stringify(obj)，將其轉(zhuǎn)換為字符串對象，然后再調(diào)用JSON.parse方法，將其轉(zhuǎn)換為JS對象。就可以輕松的實(shí)現(xiàn)對象的深復(fù)制
let obj = { a: 123, b: { c: 456, d: { e: 789 } }};let copy = JSON.parse(JSON.stringify(obj));// 對obj對象無論怎么修改，都不會影響到copy對象obj.b.c = 'hello';obj.b.d.e = 'world';console.log(copy); // {a: 123, b: {c: 456, d: {e: 789}}}當(dāng)然，使用這種方式實(shí)現(xiàn)深復(fù)制有一個(gè)缺點(diǎn)就是必須給JSON.parse方法傳入的字符串必須是合法的JSON，否則會拋出錯(cuò)誤
jQuery.extend || jQuery.fn.extend
jQuery.extend對象，對使用jQuery超過一定時(shí)間的朋友來說并不默認(rèn)。這個(gè)$.extend方法可以用來擴(kuò)展jQuery的全局對象，而$.fn.extend方法可以用來擴(kuò)展實(shí)例對象。fn實(shí)際上是prototype對象的別名，所以，擴(kuò)展實(shí)例對象的方法實(shí)際上就是在jQuery原型對象上添加一些方法。
$.extend方法不僅可以用來寫jQuery插件，同樣的，它可以用來實(shí)現(xiàn)對象的深淺復(fù)制。（使用$.extend與$.fn.extend實(shí)現(xiàn)深淺復(fù)制都可以，唯一的差別就是this的指向性不同）
在具體分析源代碼之前，我在源碼中看到的$.extend方法的一些特點(diǎn)
下面貼出jQuery-2.1.4中jQuery.extend實(shí)現(xiàn)方式的源代碼
jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, // 使用||運(yùn)算符，排除隱式強(qiáng)制類型轉(zhuǎn)換為false的數(shù)據(jù)類型 // 如'', 0, undefined, null, false等 // 如果target為以上的值，則設(shè)置target = {} i = 1, length = arguments.length, deep = false; // 當(dāng)typeof target === 'boolean'時(shí) // 則將deep設(shè)置為target的值 // 然后將target移動到第二個(gè)參數(shù)， if (typeof target === "boolean") { deep = target; // 使用||運(yùn)算符，排除隱式強(qiáng)制類型轉(zhuǎn)換為false的數(shù)據(jù)類型 // 如'', 0, undefined, null, false等 // 如果target為以上的值，則設(shè)置target = {} target = arguments[i] || {}; i++; } // 如果target不是一個(gè)對象或數(shù)組或函數(shù)， // 則設(shè)置target = {} // 這里與Object.assign的處理方法不同， // assign方法會將Boolean、String、Number方法轉(zhuǎn)換為對應(yīng)的基本包裝類型 // 然后再返回， // 而extend方法直接將typeof不為object或function的數(shù)據(jù)類型 // 全部轉(zhuǎn)換為一個(gè)空對象 if (typeof target !== "object" && !jQuery.isFunction(target)) { target = {}; } // 如果arguments.length === 1 或 // typeof arguments[0] === 'boolean', 且存在arguments[1]， // 這時(shí)候目標(biāo)對象會指向this // this的指向哪個(gè)對象需要看是使用$.fn.extend還是$.extend if (i === length) { target = this; // i-- 表示不進(jìn)入for循環(huán) i--; } // 循環(huán)arguments類數(shù)組對象，從源對象開始 for (; i < length; i++) { // 針對下面if判斷 // 有一點(diǎn)需要注意的是 // 這里有一個(gè)隱式強(qiáng)制類型轉(zhuǎn)換 undefined == null 為 true // 而undefined === null 為 false // 所以如果源對象中數(shù)據(jù)類型為Undefined或Null // 那么就會跳過本次循環(huán)，接著循環(huán)下一個(gè)源對象 if ((options = arguments[i]) != null) { // 遍歷所有[[emuerable]] === true的源對象 // 包括Object, Array, String // 如果遇到源對象的數(shù)據(jù)類型為Boolean, Number // for in循環(huán)會被跳過，不執(zhí)行for in循環(huán) for (name in options) { // src用于判斷target對象是否存在name屬性 src = target[name]; // 需要復(fù)制的屬性 // 當(dāng)前源對象的name屬性 copy = options[name]; // 這種情況暫時(shí)未遇到.. // 按照我的理解， // 即使copy是同target是一樣的對象 // 兩個(gè)對象也不可能相等的.. if (target === copy) { continue; } // if判斷主要用途： // 如果是深復(fù)制且copy是一個(gè)對象或數(shù)組 // 則需要遞歸jQuery.extend(), // 直到copy成為一個(gè)基本數(shù)據(jù)類型為止 if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) { // 深復(fù)制 if (copyIsArray) { // 如果是copy是一個(gè)數(shù)組 // 將copyIsArray重置為默認(rèn)值 copyIsArray = false; // 如果目標(biāo)對象存在name屬性且是一個(gè)數(shù)組 // 則使用目標(biāo)對象的name屬性，否則重新創(chuàng)建一個(gè)數(shù)組，用于復(fù)制 clone = src && jQuery.isArray(src) ? src : []; } else { // 如果目標(biāo)對象存在name屬性且是一個(gè)對象 // 則使用目標(biāo)對象的name屬性，否則重新創(chuàng)建一個(gè)對象，用于復(fù)制 clone = src && jQuery.isPlainObject(src) ? src : {}; } // 因?yàn)樯顝?fù)制，所以遞歸調(diào)用jQuery.extend方法 // 返回值為target對象，即clone對象 // copy是一個(gè)源對象 target[name] = jQuery.extend(deep, clone, copy); } else if (copy !== undefined) { // 淺復(fù)制 // 如果copy不是一個(gè)對象或數(shù)組 // 那么執(zhí)行elseif分支 // 在elseif判斷中如果copy是一個(gè)對象或數(shù)組， // 但是都為空的話，排除這種情況 // 因?yàn)楂@取空對象的屬性會返回undefined target[name] = copy; } } } } // 當(dāng)源對象全部循環(huán)完畢之后，返回目標(biāo)對象 return target;}; 因此，可以針對分析過后的源碼，給出一些例子
let obj1 = $.extend();console.log(obj1); // 返回一個(gè)空對象 {}let obj2 = $.extend(undefined);console.log(obj2); //返回jQuery對象，Object.assign傳入undefined會報(bào)錯(cuò)let obj3 = $.extend('123');console.log(obj3); // 返回jQuery對象，Object.assign傳入'123'會返回字符串的String對象let target = { a: 123, b: 234};let source1 = { b: 456, d: ['keith', 'peaceful', 'lovely']};let source2 = {c: 789};let source3 = {};let obj4 = $.extend(target, source1, source2);// let obj4 = $.extend(false, target, source1, source2);console.log(obj4); // {a: 123, b: 456, d: Array(3), c: 789}// 默認(rèn)情況下，復(fù)制方式都是淺復(fù)制// 如果只需要淺復(fù)制，不傳入deep參數(shù)也可以// 淺復(fù)制時(shí)，obj4對象中的d屬性只是指向數(shù)組對象的指針let obj5 = $.extend(target, undefined, source2);let obj6 = $.extend(target, source3, source2);console.log(obj5, obj6);// {a: 123, b: 234, c: 789}, {a: 123, b: 234, c: 789}// 會略過空對象或Undefined、Null值let obj7 = $.extend(true, target, source1, source2);console.log(obj7); // {a: 123, b: 456, d: Array(3), c: 789}// 這里target對象有b屬性，源對象source1也有b屬性// 此時(shí)源對象的b屬性會覆蓋目標(biāo)對象的b屬性// 這里deep=true，屬于深復(fù)制// 當(dāng)name=d時(shí)，會遞歸調(diào)用$.extend, 直到它的屬性對應(yīng)的屬性值全部為基本數(shù)據(jù)類型// 源對象的改變不會影響到obj7對象JavaScript 復(fù)制對象
因此，可以根據(jù)$.extend方法，寫出一個(gè)通用的實(shí)現(xiàn)對象深淺復(fù)制的函數(shù)，copyObject函數(shù)唯一的不同就是當(dāng)i === arguments.length屬性時(shí)，copyObject函數(shù)直接返回了target對象
function copyObject () { let i = 1, target = arguments[0] || {}, deep = false, length = arguments.length, name, options, src, copy, copyIsArray, clone; // 如果第一個(gè)參數(shù)的數(shù)據(jù)類型是Boolean類型 // target往后取第二個(gè)參數(shù) if (typeof target === 'boolean') { deep = target; // 使用||運(yùn)算符，排除隱式強(qiáng)制類型轉(zhuǎn)換為false的數(shù)據(jù)類型 // 如'', 0, undefined, null, false等 // 如果target為以上的值，則設(shè)置target = {} target = arguments[1] || {}; i++; } // 如果target不是一個(gè)對象或數(shù)組或函數(shù) if (typeof target !== 'object' && !(typeof target === 'function')) { target = {}; } // 如果arguments.length === 1 或 // typeof arguments[0] === 'boolean', // 且存在arguments[1]，則直接返回target對象 if (i === length) { return target; } // 循環(huán)每個(gè)源對象 for (; i < length; i++) { // 如果傳入的源對象是null或undefined // 則循環(huán)下一個(gè)源對象 if (typeof (options = arguments[i]) != null) { // 遍歷所有[[emuerable]] === true的源對象 // 包括Object, Array, String // 如果遇到源對象的數(shù)據(jù)類型為Boolean, Number // for in循環(huán)會被跳過，不執(zhí)行for in循環(huán) for (name in options) { // src用于判斷target對象是否存在name屬性 src = target[name]; // copy用于復(fù)制 copy = options[name]; // 判斷copy是否是數(shù)組 copyIsArray = Array.isArray(copy); if (deep && copy && (typeof copy === 'object' || copyIsArray)) { if (copyIsArray) { copyIsArray = false; // 如果目標(biāo)對象存在name屬性且是一個(gè)數(shù)組 // 則使用目標(biāo)對象的name屬性，否則重新創(chuàng)建一個(gè)數(shù)組，用于復(fù)制 clone = src && Array.isArray(src) ? src : []; } else { // 如果目標(biāo)對象存在name屬性且是一個(gè)對象 // 則使用目標(biāo)對象的name屬性，否則重新創(chuàng)建一個(gè)對象，用于復(fù)制 clone = src && typeof src === 'object' ? src : {}; } // 深復(fù)制，所以遞歸調(diào)用copyObject函數(shù) // 返回值為target對象，即clone對象 // copy是一個(gè)源對象 target[name] = copyObject(deep, clone, copy); } else if (copy !== undefined){ // 淺復(fù)制，直接復(fù)制到target對象上 target[name] = copy; } } } } // 返回目標(biāo)對象 return target; }以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
