extend是jQuery中一個比較核心的程式碼，如果有檢視jQuery的原始碼的話，就會發現jQuery在多處呼叫了extend方法。

作用

1. 對任意物件進行擴充套件
2. 擴充套件某個例項物件
3. 對jquery本身的例項方法進行擴充套件

實現

基礎版本， 對簡單物件進行擴充套件

   jQuery.prototype.extend = jQuery.extend = function(){
     var target = arguments[0] || {}; //獲取第一個引數作為目標結果
     var i = 1; //設定開始擴充套件的下標，擴充套件時第一個引數不會進行改變，不需要遍歷
     var length = arguments.length;
     var option;
     if(typeof target !== 'object') {
       target = {};
     }
     
     for(; i< length; i++){
       option = arguments[i]
       for(var name in option){
         target[name] = option[name]
       }
     }
     return target
   }
   
   //呼叫
   var i = {a: 0};
   var b = {c: 9};
   console.log($().extend(i,b)) // {a:0, c:9}
 

升級版本1.0， 對複雜物件進行擴充套件。

在上面，我們已經寫出的extend的基礎版本，但是如果我們簡單測試一下，就會發現仍是有問題存在的。
我們可以使用上面的方法，對下面的物件進行擴充套件

      var n = {
        al: 90,
        m: {
          d: 23,
        }
      }
      var b = {m:{
        c: 98
      }};
      console.log($().extend(n,b)) // {al: 90, m: { c: 98 }}

簡單的從結果來看，返回的結果並不符合我們的預期，基礎版本的方法似乎只是簡單的值替換而已。那麼來簡單升級一下程式碼吧。
在升級程式碼之前，需要了解一下關於淺拷貝和深拷貝的相關。

關於淺拷貝和深拷貝的那些事

淺拷貝

對於淺拷貝，我的簡單理解就是： 淺拷貝就是對最表面的層級進行拷貝，如果某一被拷貝物件的值發生了改變，最終的拷貝結果也會隨之發生改變。

      var i = {a: 0};
      var b = {c: 9};
      console.log($().extend(i,b)) // {a: 90, c:9}
      i.a = 90

深拷貝

深拷貝主要的是面對複雜物件，如果淺拷貝是對最表面的一層進行拷貝，那麼深拷貝就是，對拷貝物件的每一個層級都進行拷貝，某種層面來說，勉強算得上是遞迴的淺拷貝吧，但是比較不同的是，深拷貝中，如果某一個被拷貝物件的值發生了改變，拷貝結果是不會隨之發生變化的，是一個獨立的儲存空間。

   var n = {
     al: 90,
     m: {
       d: 23,
     }
   }
   var b = {m:{
     c: 98
   }};
   console.log($().extend(true,{},n,b))
   console.log(n)
   n.al = "cs"

結果：

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

深拷貝extend程式碼擴充套件

jQuery.extend是提供深拷貝的，需要將第一引數傳為true。
基本思路:首先先對第一個傳入引數進行判斷，判斷是否是boolean型別,來決定是否需要進行深拷貝;

   var deep = false;
   if (typeof target === 'boolean') {
     deep = target;
     target = arguments[1];
     i = 2;  //因為第一引數為boolean,所以拷貝物件從argument[1]開始，但通常第一個拷貝物件是不需要比遍歷的，所以遍歷下標從2開始。
   }

對需要遍歷的物件進行判斷，判斷是否是複雜型別。使用extend對jquery進行擴充套件。

   if (length === i) { //此時extend引數只有一個，但是目標應該是this,所以獲取到this;
     target = this;  //但同時 i = 1;無法進行遍歷，所以將遍歷下標後退一位
     i--;
   }
   
   jQuery.extend({
     isArray: function(obj) {
       return toString.call(obj) === '[object Array]';
     },
     isPainObj: function(obj) {
       return toString.call(obj) === '[object Object]';
     }
   })

extend方法改造。

   jQuery.prototype.extend = jQuery.extend = function(){
     var target = arguments[0] || {};
     var i = 1;
     var length = arguments.length;
     var option, copy, src, copyisArray, clone;
     for(; i< length; i++){
       if((option = arguments[i]) != null ){
         for(name in option) {
           src = target[name];
           copy = option[name];
           if(jQuery.isPainObj(copy) || (copyisArray = jQuery.isArray(copy))) {
             if(copyisArray) {
               copyisArray = false;
               clone = src && jQuery.isArray(src) ? src : [];
             } else {
               clone = src && jQuery.isPainObj(src) ? src : {};
             }
             target[name] = jQuery.extend(clone,copy)
           } else if(copy !== undefined) {
             target[name] = copy
           }
         }
       }
     }
     return target
   }

行了，到這裡為止，我們就已經完成了簡單的extend函數了，其實比較重要的是深拷貝和淺拷貝，關於這一點，下次再記錄吧。