前言
jQuery 中的 $.extend() 是經常使用到工具函數，多用于合并參數（對象），具體用法在這里不過多贅述，可通過傳參控制合并過程中是否使用深度拷貝；而ES2015中新增的 Object.assign()方法，也可以實現對象的合并，不過合并過程中使用的是淺拷貝；本文參考了jQuery的extend方法的源碼，將自己實現對象合并，即將多個對象的屬性復制到目標對象上，若有相同的屬性，后面的對象覆蓋前面的。
淺拷貝的方式實現對象合并
之前的一篇博文 有專門介紹對象和數組的深淺拷貝，不了解的童鞋請移步。先看實現再解釋
function extend() { //extend 淺拷貝實現 var name,options,copy, length = arguments.length, i = 1, target = arguments[0] || {}; //取目標對象 if(['object','function'].indexOf(typeof target) < 0){ target = {}; } for(;i<length;i++){ options = arguments[i] if(options != null){ //排除空參數的情況 extend({},,) for(name in options){ //遍歷對象 賦值 copy = options[name]; if (copy !== undefined) { target[name] = copy; } } } } return target } //測試數據 var test1 = { a : 1, b : { c : 2, d : 3 }, e : [1,'a'] }, test2 = { b : { c : 4, d : 5, f : 6 }, e : [1,'a'], g : 7 } var test = extend({},test1,test2); console.log(test.b.d); //5 test2.b.d = 'x'; //修改test2 console.log(test.b.d); // 'x' test隨之修改思路如下：
1、默認取第一個參數為目標對象，若第一個參數非對象數據類型，則賦值為空對象
2、遍歷剩下的參數（源對象），將源對象的屬性復制到目標對象上 。
3、返回目標對象為合并的結果
在第二步中沒有對源對象的屬性值進行判斷，所有的全部使用 ‘=' 賦值，所以當源對象的屬性值為對象屬性時，復制的只是引用值，即為淺拷貝的方式，在測試結果中可以看出 test 和 test2 的 b 屬性的屬性值，使用的是同一個對象，會互相影響。知道了這些之后，如何實現合并時的深拷貝也應該有思路了。
深度拷貝的方式實現對象合并
需要在復制源對象屬性值時，判斷值的類型，如果是對象數據類型，則遞歸調用extend函數。則可以實習深拷貝方式的對象合并，實現如下：
function extend() { //extend 深拷貝實現 var name,options,src,copy, deep = false, //是否深拷貝 默認為false length = arguments.length, i = 1, target = arguments[0] || {}; //如果第一個參數為boolean類型,賦值給deep if(typeof target == 'boolean'){ deep = arguments[0]; target = arguments[i] || {}; //目標對象順延 i++; } //如果target不是對象數據類型的話 target賦值為 {} if(['object','function'].indexOf(typeof target) < 0){ target = {}; } for(;i<length;i++){ options = arguments[i]; if(options != null){ for(name in options){ copy = options[name]; src = target[name]; if(target === copy){ //避免重復循環 continue; } if(deep && copy && (typeof copy == 'object')){ // 類型判斷 src = Object.prototype.toString.call(copy) == '[object Array]' ? [] : {}; //區分數組和‘對象' target[name] = extend(deep,src,copy); }else { if (copy !== undefined) { target[name] = copy; } } } } } return target }1、參數判斷，若第一個參數為布爾類型，則取為控制是否深度拷貝的參數deep , deep 默認為false；同時 目標元素會是第二個參數
2、復制屬性值時，要判斷deep參數和 屬性值的類型 ； 若 deep為true 且 屬性值為對象類型 則遞歸調用 extend函數 ， 否則直接賦值
3、需要區分 數組 和 ‘對象' ，來給 目標對象的屬性賦值不同的初始值。如果都是 {} 的話，數組類型的屬性值復制到目標元素上會變為 {'0':xx , '1' : xx ...}
結語
一直都是在直接使用 $.extend()，好用但是不是很清楚其中的實現，自己擼一擼，也許實現上還有不嚴謹的地方，但是覺得收獲還是不錯的。
以上這篇基于對象合并功能的實現示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
