溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在JavaScript這門語言中，數據類型分為兩大類：基本數據類型和復雜數據類型。基本數據類型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），而復雜數據類型包括Object，而所有其他引用類型（Array、Date、RegExp、Function、基本包裝類型（Boolean、String、Number）、Math等）都是Object類型的實例對象，因此都可以繼承Object原型對象的一些屬性和方法。
而對于基本數據類型來說，復制一個變量值，本質上就是copy了這個變量。一個變量值的修改，不會影響到另外一個變量。看一個簡單的例子。
let val = 123; let copy = val; console.log(copy); //123 val = 456; //修改val的值對copy的值不產生影響 console.log(copy); //123
而對于復雜數據類型來說，同基本數據類型實現的不太相同。對于復雜數據類型的復制，要注意的是，變量名只是指向這個對象的指針。當我們將保存對象的一個變量賦值給另一個變量時，實際上復制的是這個指針，而兩個變量都指向都一個對象。因此，一個對象的修改，會影響到另外一個對象。
// obj只是指向對象的指針
let obj = {
character: 'peaceful'
};
//copy變量復制了這個指針，指向同一個對象
let copy = obj;
console.log(copy); //{character: 'peaceful'}
obj.character = 'lovely';
console.log(copy); //{character: 'lovely'}
有一副很形象的圖描述了復雜數據類型復制的原理
同理，在復制一個數組時，變量名只是指向這個數組對象的指針；在復制一個函數時，函數名只是指向這個函數對象的指針
let arr = [1, 2, 3];
let copy = arr;
console.log(copy); // [1, 2, 3]
arr[0] = 'keith';
console.log(copy); // 數組對象被改變： ['keith', 2, 3]
arr = null;
console.log(copy); // ['keith', 2, 3] 即使arr=null，也不會影響copy。因此此時的arr變量只是一個指向數組對象的指針
function foo () {
return 'hello world';
};
let bar = foo;
console.log(foo());
foo = null; //foo只是指向函數對象的指針
console.log(bar());
因此，我們應該如何實現對象的深淺復制?
復制對象
在JavaScript中，復制對象分為兩種方式，淺復制和深復制。
淺復制沒有辦法去真正的去復制一個對象，而只是保存了對該對象的引用；而深復制可以實現真正的復制一個對象。
淺復制
在ES6中，Object對象新增了一個assign方法，可以實現對象的淺復制。這里談談Object.assign方法的具體用法，因為稍后會分析jQuery的extend方法，實現的原理同Object.assign方法差不多
Object.assign的第一個參數是目標對象，可以跟一或多個源對象作為參數，將源對象的所有可枚舉（[[emuerable]] === true）復制到目標對象。這種復制屬于淺復制，復制對象時只是包含對該對象的引用。Object.assign(target, [source1, source2, ...])
要實現對象的淺復制，可以使用Object.assign方法
let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789};
let obj = Object.assign(target, source1, source2);
console.log(obj);
不過對于深復制來說，Object.assign方法無法實現
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對象
深復制
在實際的開發項目中，前后端進行數據傳輸，主要是通過JSON實現的。JSON全稱：JavaScript Object Notation，JavaScript對象表示法。
JSON對象下有兩個方法，一是將JS對象轉換成字符串對象的JSON.stringify方法；一個是將字符串對象轉換成JS對象的JSON.parse方法。
這兩個方法結合使用可以實現對象的深復制。也就是說，當我們需要復制一個obj對象時，可以先調用JSON.stringify(obj)，將其轉換為字符串對象，然后再調用JSON.parse方法，將其轉換為JS對象。就可以輕松的實現對象的深復制
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}}}
當然，使用這種方式實現深復制有一個缺點就是必須給JSON.parse方法傳入的字符串必須是合法的JSON，否則會拋出錯誤
jQuery.extend || jQuery.fn.extend
jQuery.extend對象，對使用jQuery超過一定時間的朋友來說并不默認。這個$.extend方法可以用來擴展jQuery的全局對象，而$.fn.extend方法可以用來擴展實例對象。fn實際上是prototype對象的別名，所以，擴展實例對象的方法實際上就是在jQuery原型對象上添加一些方法。
$.extend方法不僅可以用來寫jQuery插件，同樣的，它可以用來實現對象的深淺復制。（使用$.extend與$.fn.extend實現深淺復制都可以，唯一的差別就是this的指向性不同）
在具體分析源代碼之前，我在源碼中看到的$.extend方法的一些特點
下面貼出jQuery-2.1.4中jQuery.extend實現方式的源代碼
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
// 使用||運算符，排除隱式強制類型轉換為false的數據類型
// 如'', 0, undefined, null, false等
// 如果target為以上的值，則設置target = {}
i = 1,
length = arguments.length,
deep = false;
// 當typeof target === 'boolean'時
// 則將deep設置為target的值
// 然后將target移動到第二個參數，
if (typeof target === "boolean") {
deep = target;
// 使用||運算符，排除隱式強制類型轉換為false的數據類型
// 如'', 0, undefined, null, false等
// 如果target為以上的值，則設置target = {}
target = arguments[i] || {};
i++;
}
// 如果target不是一個對象或數組或函數，
// 則設置target = {}
// 這里與Object.assign的處理方法不同，
// assign方法會將Boolean、String、Number方法轉換為對應的基本包裝類型
// 然后再返回，
// 而extend方法直接將typeof不為object或function的數據類型
// 全部轉換為一個空對象
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}
// 如果arguments.length === 1 或
// typeof arguments[0] === 'boolean', 且存在arguments[1]，
// 這時候目標對象會指向this
// this的指向哪個對象需要看是使用$.fn.extend還是$.extend
if (i === length) {
target = this;
// i-- 表示不進入for循環
i--;
}
// 循環arguments類數組對象，從源對象開始
for (; i < length; i++) {
// 針對下面if判斷
// 有一點需要注意的是
// 這里有一個隱式強制類型轉換 undefined == null 為 true
// 而undefined === null 為 false
// 所以如果源對象中數據類型為Undefined或Null
// 那么就會跳過本次循環，接著循環下一個源對象
if ((options = arguments[i]) != null) {
// 遍歷所有[[emuerable]] === true的源對象
// 包括Object, Array, String
// 如果遇到源對象的數據類型為Boolean, Number
// for in循環會被跳過，不執行for in循環
for (name in options) {
// src用于判斷target對象是否存在name屬性
src = target[name];
// 需要復制的屬性
// 當前源對象的name屬性
copy = options[name];
// 這種情況暫時未遇到..
// 按照我的理解，
// 即使copy是同target是一樣的對象
// 兩個對象也不可能相等的..
if (target === copy) {
continue;
}
// if判斷主要用途：
// 如果是深復制且copy是一個對象或數組
// 則需要遞歸jQuery.extend(),
// 直到copy成為一個基本數據類型為止
if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
// 深復制
if (copyIsArray) {
// 如果是copy是一個數組
// 將copyIsArray重置為默認值
copyIsArray = false;
// 如果目標對象存在name屬性且是一個數組
// 則使用目標對象的name屬性，否則重新創建一個數組，用于復制
clone = src && jQuery.isArray(src) ? src : [];
} else {
// 如果目標對象存在name屬性且是一個對象
// 則使用目標對象的name屬性，否則重新創建一個對象，用于復制
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// 因為深復制，所以遞歸調用jQuery.extend方法
// 返回值為target對象，即clone對象
// copy是一個源對象
target[name] = jQuery.extend(deep, clone, copy);
} else if (copy !== undefined) {
// 淺復制
// 如果copy不是一個對象或數組
// 那么執行elseif分支
// 在elseif判斷中如果copy是一個對象或數組，
// 但是都為空的話，排除這種情況
// 因為獲取空對象的屬性會返回undefined
target[name] = copy;
}
}
}
}
// 當源對象全部循環完畢之后，返回目標對象
return target;
};
因此，可以針對分析過后的源碼，給出一些例子
let obj1 = $.extend();
console.log(obj1); // 返回一個空對象 {}
let obj2 = $.extend(undefined);
console.log(obj2); //返回jQuery對象，Object.assign傳入undefined會報錯
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}
// 默認情況下，復制方式都是淺復制
// 如果只需要淺復制，不傳入deep參數也可以
// 淺復制時，obj4對象中的d屬性只是指向數組對象的指針
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屬性
// 此時源對象的b屬性會覆蓋目標對象的b屬性
// 這里deep=true，屬于深復制
// 當name=d時，會遞歸調用$.extend, 直到它的屬性對應的屬性值全部為基本數據類型
// 源對象的改變不會影響到obj7對象
JavaScript 復制對象
因此，可以根據$.extend方法，寫出一個通用的實現對象深淺復制的函數，copyObject函數唯一的不同就是當i === arguments.length屬性時，copyObject函數直接返回了target對象
function copyObject () {
let i = 1,
target = arguments[0] || {},
deep = false,
length = arguments.length,
name, options, src, copy,
copyIsArray, clone;
// 如果第一個參數的數據類型是Boolean類型
// target往后取第二個參數
if (typeof target === 'boolean') {
deep = target;
// 使用||運算符，排除隱式強制類型轉換為false的數據類型
// 如'', 0, undefined, null, false等
// 如果target為以上的值，則設置target = {}
target = arguments[1] || {};
i++;
}
// 如果target不是一個對象或數組或函數
if (typeof target !== 'object' && !(typeof target === 'function')) {
target = {};
}
// 如果arguments.length === 1 或
// typeof arguments[0] === 'boolean',
// 且存在arguments[1]，則直接返回target對象
if (i === length) {
return target;
}
// 循環每個源對象
for (; i < length; i++) {
// 如果傳入的源對象是null或undefined
// 則循環下一個源對象
if (typeof (options = arguments[i]) != null) {
// 遍歷所有[[emuerable]] === true的源對象
// 包括Object, Array, String
// 如果遇到源對象的數據類型為Boolean, Number
// for in循環會被跳過，不執行for in循環
for (name in options) {
// src用于判斷target對象是否存在name屬性
src = target[name];
// copy用于復制
copy = options[name];
// 判斷copy是否是數組
copyIsArray = Array.isArray(copy);
if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
if (copyIsArray) {
copyIsArray = false;
// 如果目標對象存在name屬性且是一個數組
// 則使用目標對象的name屬性，否則重新創建一個數組，用于復制
clone = src && Array.isArray(src) ? src : [];
} else {
// 如果目標對象存在name屬性且是一個對象
// 則使用目標對象的name屬性，否則重新創建一個對象，用于復制
clone = src && typeof src === 'object' ? src : {};
}
// 深復制，所以遞歸調用copyObject函數
// 返回值為target對象，即clone對象
// copy是一個源對象
target[name] = copyObject(deep, clone, copy);
} else if (copy !== undefined){
// 淺復制，直接復制到target對象上
target[name] = copy;
}
}
}
}
// 返回目標對象
return target;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
