Extended is a relatively core code in jQuery. If you look at the source code of jQuery, you will find that jQuery calls the extension method in many places.

Effect

1. Extension of arbitrary objects
2. Extending an instance object
3. Extending the instance method of jquery itself

Realization

Basic version to extend simple objects

   jQuery.prototype.extend = jQuery.extend = function(){
     var target = arguments[0] || {}; //Get the first parameter as the target result
     var i = 1; //Set the subscript to start the extension, the first parameter will not be changed during the extension, and there is no need to traverse.
     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
   }
   
   //call
   var i = {a: 0};
   var b = {c: 9};
   console.log($().extend(i,b)) // {a:0, c:9}

Upgrade version 1.0 to extend complex objects.

In the above, we have written the basic version of extension, but if we test it briefly, we will find that there are still problems.
We can use the above method to extend the following objects

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

Simply from the results, the results returned do not meet our expectations, the basic version of the method seems to be just a simple value replacement. So let's just upgrade the code.
Before upgrading the code, you need to know something about shallow and deep copies.

Things about shallow and deep copies

1. Shallow copy,
   For shallow copies, my simple understanding is that shallow copies are copies of the most superficial level. If the value of a copy object changes, the final copy result will change.

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

1. Deep copy, deep copy is mainly facing complex objects. If shallow copy copies the most superficial layer, then deep copy is to copy every level of the object. In some ways, it is a recursive shallow copy, but the difference is that in deep copy, if a certain level, it is a recursive shallow copy. The value of a copied object has changed, and the result of the copy will not change with it. It is a separate storage space.

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

Result:

Deep Copy Extension Code Extension

jQuery.extend provides a deep copy and needs to pass the first parameter to true.
Basic ideas:

1. Firstly, the first input parameter is judged to determine whether it is boolean type to decide whether deep copy is needed.

   var deep = false;
   if (typeof target === 'boolean') {
     deep = target;
     target = arguments[1];
     i = 2;  //Because the first parameter is boolean, the copy object starts with argument[1], but usually the first copy object does not need to be traversed, so traversing subscripts starts with 2.
   }

1. Judge the objects that need to be traversed to determine whether they are complex types. extend jquery.
   

   if (length === i) { //At this point, there is only one extension parameter, but the target should be this, so get this;
     target = this;  //But at the same time i = 1; cannot traverse, so the traversal subscript is backed one bit.
     i--;
   }
   
   jQuery.extend({
     isArray: function(obj) {
       return toString.call(obj) === '[object Array]';
     },
     isPainObj: function(obj) {
       return toString.call(obj) === '[object Object]';
     }
   })

1. Extended method transformation.

   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
   }

Okay, so far, we've finished the simple extension function. In fact, the more important thing is the deep copy and the shallow copy. On this point, let's record it next time.