JQuery_2.1.0_日记 4.29 $.extend

     因为在JQuery一切皆JQuery,所以JQuery没有EXT那么恐怖的继承体系,比起EXT的Ext.extends(),$.extend()函数还是很好理解的,只是把一个对象的属性和方法添加到目标对象上.刚出生的JQuery是很弱小的,JQuery源码后面和我们自己扩展都是通过$.extend()函数.

     

     Test_Html

      < body >

     < div   id =   "div1" > div1 </ div   >< div   id =   "div2" > div2 </ div   >

     < span   id =   "span1" > span1 </ span   >< span   id =   "span2" > span2 </ span   >< span   id = "span3"   > span3   </ span >

   </ body >

   Test_Script

    $.extend(target, src);

   target.show(); //function[native object]说明this是javascript内建对象构造函数

   $.extend(src);

   $.show(); //function[native object]说明this是javascript内建对象构造函数,JQuery = function(){};

   $.fn.extend(src);

   $( 'div' ).show();   //function(selector, context)

   可以看到想扩展JQuery的静态方法和属性就$.extend,想扩展JQuery对象就用$.fn.extend,当然也可以扩展自己的简单js对象.

   再看$.extend()源码之前，先看一个深克隆和浅克隆的例子.

     

   浅克隆

    var  target = {};

    var  src = {copy:{name: '原始数据'   }};

              

              

   $.extend(target, src);

   target.copy.name =  '覆盖数据'  ;

   alert(src.copy.name);   //覆盖数 据

   深克隆

    var  target = {};

    var  src = {copy:{name: '原始数据'  }};

              

              

   $.extend(true, target, src);

   target.copy.name =  '覆盖数据'  ;

   alert(src.copy.name);  //原始数据

    $.extend源码

   

jQuery.extend = jQuery.fn.extend =  function () {

          var  options, name, src, copy, copyIsArray, clone,

              target = arguments[0] || {},

              i = 1,

              length = arguments.length,

              deep =  false  ;

          // Handle a deep copy situation

          //如果第一个参数是boolean类型

          //修正参数,将第二个参数作为target

          if  (  typeof   target ===  "boolean"  ) {

              deep = target;

                 // skip the boolean and the target

              target = arguments[ i ] || {};

                 //i++是为了后续 i === length的判断

              i++;

       }

          // Handle case when target is a string or something (possible in deep copy)

          //如果目标既不是对象也不是方法(例如给基本类型扩展属性方法和属性不会报错但是是无用的)，修正target为 js对象

          if  (  typeof   target !==  "object"  && !jQuery.isFunction(target) ) {

              target = {};

       }

          // extend jQuery itself if only one argument is passed

          //如果只有一个参数，修正对象为JQuery函数或JQuery对象

          if  ( i === length ) {

              target =  this  ;

                 //修正target所在位置,后面的都是要添加给target的对象

              i--;

       }

          for  ( ; i < length; i++ ) {

                 // Only deal with non-null/undefined values

                 if  ( (options = arguments[ i ]) !=  null  ) {

                        // Extend the base object

                        for  ( name  in   options ) {

                           src = target[ name ];

                           copy = options[ name ];

                              // Prevent never-ending loop

                              //如果target和copy是同一个对象，略过，防止自己的属性引用了本身对象导致的循环引用,以致GC无法回收

                              if  ( target === copy ) {

                                     continue  ;

                           }

                              // Recurse if we're merging plain objects or arrays

                              //如果是deep为true，并且要添加给target的copy为对象获数组

                              if  ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                                     if  ( copyIsArray ) {

                                         copyIsArray =  false  ;

                                         clone = src && jQuery.isArray(src) ? src : [];

                                  }  else  {

                                         clone = src && jQuery.isPlainObject(src) ? src : {};

                                  }

                     

                                     // Never move original objects, clone them

                                     //很巧妙 ,用一个递归,实现引用对象的深克隆,递归的返回条件是属性石基本类型,基本类型都是深克隆

                                  target[ name ] = jQuery.extend( deep, clone, copy );

                              // Don't bring in undefined values

                           }  else   if   ( copy !==  undefined  ) {

                                     //浅克隆

                                  target[ name ] = copy;

                           }

                     }

              }

       }

          // Return the modified object

          return  target;

};