關於物件合併功能的實現詳解

本文主要為大家帶來一篇基於物件合併功能的實作範例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

前言

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) <p>想法如下：</p><p>1、預設取第一個參數為目標對象，若第一個參數非物件資料類型，則賦值為空物件</p><p>2、遍歷剩下的參數（來源物件），將來源物件的屬性複製到目標物件上。 </p><p>3、返回目標物件為合併的結果</p><p>在第二步驟中沒有對來源物件的屬性值進行判斷，所有的全部使用'=' 賦值，所以當來源物件的屬性值為物件屬性時，複製的只是引用值，也就是為淺拷貝的方式，在測試結果中可以看出test 和test2 的b 屬性的屬性值，使用的是同一個對象，會互相影響。知道了這些之後，如何實現合併時的深拷貝也應該有想法了。 </p><p>深度拷貝的方式實作物件合併</p><p>需要在複製來源物件屬性值時，判斷值的類型，如果是物件資料類型，則遞迴呼叫extend函數。則可以實習深拷貝方式的物件合併，實現如下：</p><pre class="brush:php;toolbar:false">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) <p>1、參數判斷，若第一個參數為布林類型，則取為控制是否深度拷貝的參數deep , deep 預設為false；同時目標元素會是第二個參數 </p><p>2、複製屬性值時，要判斷deep參數和屬性值的類型； 若deep為true 且屬性值為物件類型則遞歸呼叫extend函數， 否則直接賦值</p><p>3、需要區分數組和'物件' ，來給目標物件的屬性賦值不同的初始值。如果都是{} 的話，陣列型別的屬性值複製到目標元素上會變成{'0':xx , '1' : xx ...}</p><p>結語</p><p>一直都是在直接使用$.extend()，好用但是不是很清楚其中的實現，自己*，也許實現上還有不嚴謹的地方，但是覺得收穫還是不錯的。 </p><p>相關推薦：<br></p><p><a href="http://www.php.cn/js-tutorial-380068.html" target="_self">實作物件合併功能的方法</a></p>#

以上是關於物件合併功能的實現詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！