jQuery中jQuery.extend() 和 jQuery.fn.extend()的功能和区别

    昨天下午和今天上午断断续续的一直在看jQuery中jQuery.extend() 和 jQuery.fn.extend()两个函数的功能及区别，现在自认为是掌握的差不多了。好记性不如烂笔头，这里一方面记录下来以供自己以后回头再看，再者同大家共享，如有不妥，还望多多指教。好了，废话说完了，来看看这两个方法吧。

1、jQuery.extend()

 

    先说jQuery.extend()函数。CodePlayer中解释该函数为：jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象。该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。该函数属于全局jQuery对象。jQuery.extend()使用方法为jQuery.extend([deep], target, object1, [objectN])，其中：

    deep ：布尔类型，默认值为false。若该值明确设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象到目标对象上。另，该参数只能明确设置为true，不能明确设置为false。

    target ：目标对象，其他附加对象需要复制到该对象上，以增加其新属性。

    object1 ： 待合并到目标对象的第1个对象。

    objectN ： 待合并到目标对象的第N个对象。

 

    当deep明确设置为true时，jQuery.extend()源码分析如下：

jQuery.extend = jQuery.fn.extend = function() { // 这里的jQuery.extend即给jQuery的原型prototype添加对象
    var options, name, src, copy, copyIsArray, clone, // var语句只能出现在函数体的顶部，并要求将函数内所有的变量声明写在一条单独的var语句中，作为函数体的第一条语句
        target = arguments[0] || {}, // 目标对象
        i = 1, // 设置默认扩展对象，默认扩展对象从给定参数的第二个参数算起(默认是假设deep没有赋值)
        length = arguments.length, // 实际传入参数的个数
        deep = false;

    // Handle a deep copy situation 如果第一个参数为布尔类型的话，则是设置了[deep]参数为true，需要重新赋值deep为true
    // 并将参数列表的第二个参数赋给target
    if ( typeof target === "boolean" ) {
        deep = target;

        // Skip the boolean and the target 若明确设置了deep参数为true，则目标对象为第二个，扩展对象从第三个参数算起
        target = arguments[ i ] || {};
        i++;
    }

    // Handle case when target is a string or something (possible in deep copy)
    // 当目标对象不为对象或不为函数，如为字符串或数字等，则将目标对象重新设置为空对象
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // Extend jQuery itself if only one argument is passed
    // 如果参数长度为1的话，则说明没有指定目标对象,只是指定了扩展对象，这种情况是给jQuery命名空间本身进行扩展
    
    /*
           当只传入一个对象
     extend(src);
          将target设为jQuery对象或者jQuery.prototype，来扩展jQuery静态属性方法或是实例属性方法
     $.extend(src);   //扩展jQuery对象
     $.fn.extend(src) //扩展jQuery.prototype
    */
    if ( i === length ) {
        target = this;
        i--;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values 只处理 非空/非ubdefined 项
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) { //遍历扩展对象中的属性
                src = target[ name ]; // src为目标对象中对应name属性的值
                copy = options[ name ]; // copy为扩展中对应name属性的值
 
                // Prevent never-ending loop
                //若target本身就是和copy相等的普通数组或对象的话，则跳过options的该属性值。将一个和目标对象一模一样的属性扩展到该target对象中，并不会有实际的扩展，所以如果一样的话就直接过掉
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays 递归地合并普通对象或数组 isPlainObject判断对象是否为纯粹的对象
                /*
                 * deep 判断是否要深拷贝
                 * copy 保证copy的存在
                 * isPlainObject 判断是copy否为纯粹的对象 isPlainObject，即通过{} 或 new Object 创建的对象
                 * isArray 判断copy是否为数组
                 */
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) { // 如果copy为数组的话
                        copyIsArray = false; // 一直将copyIsArray设置为false
                        clone = src && jQuery.isArray(src) ? src : []; // src存在，但是src不是数组的话，选择新生成一个数组，并将之赋值给clone。设置clone为数组

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {}; // 设置clone为对象
                    }

                    // Never move original objects, clone them 若copy是数组或对象的话，递归调用以进行深度拷贝
                    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;
};

 

    正常jQuery.extend()使用方法，示例如下：

    例1 ：

<script>
  var settings = { validate: false, limit: 5, name: "foo" };
  var options = { validate: true, name: "bar" };
  jQuery.extend(settings, options);
</script>

 

 结果：

settings == { validate: true, limit: 5, name: "bar" }

    例1给出了合并 settings 和 options，修改并返回 settings情况。

 

    如果参数中只给出了一个参数，则该参数为object对象，target对象没有给出，extend默认操作为向jQuery对象本身添加新属性，即target参数默认为jQuery对象本身。示例如下：

    例2：

<script>
  var x = { 
      sayHi: function(){
         alert("这是新增的测试方法");
      }
  };

  // 只有一个参数，则表示省略target参数，target参数默认为jQuery对象本身
  var obj = $.extend( x );
  w( obj === $ ); // true
  obj.sayHi(); // 这是新增的测试方法
</script>

 

    这说明sayHi()变成了jQuery这个类本身的方法，就像$.ajax()，$.trim()一样可以由 $. 直接调用。

 

2、jQuery.fn.extend()

 

    jQuery 源码中的 jQuery.fn 是这样定义的：

jQuery.fn = jQuery.prototype = {
    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,
        ...

 

    第一行 jQuery.fn = jQuery.prototype 说明 jQuery.fn 即代表 jQuery 的原型对象，而本人理解jQuery.fn就是jQuery.prototype的一个别称，调用 jQuery.fn.extend() 就是给 jQuery 原型对象 prototype 添加新属性和方法，是在为 jQuery 扩展一个或多个实例属性和方法(主要用于扩展方法)，如此只要是jQuery的实例对象都可以调用该扩展方法。示例如下：

    例3：

<script>
  // 将对象的方法扩展到jQuery的原型对象上，以便于jQuery实例对象调用。
  jQuery.fn.extend({
    check: function() {
      return this.each(function() { this.checked = true; });
    },
    uncheck: function() {
      return this.each(function() { this.checked = false; });
    }
  });
  
  $("input[type=checkbox]").check();
  $("input[type=radio]").uncheck();
</script>

    例4：

<script>
  // 将对象的方法扩展到jQuery的原型对象上，以便于jQuery实例对象调用。
  jQuery.fn.check =  function() {
      // 扩展到jQuery原型上后，这里的this表示当前调用check方法的jQuery对象
      return this.each(function() { this.checked = true; });
  },
  
  jQuery.fn.uncheck = function() {
      return this.each(function() { this.checked = false; });
  }
  
  $("input[type=checkbox]").check();
  $("input[type=radio]").uncheck();
</script>

 

    例3和例4最后的实现效果相同，这表明 jQuery.fn.extend() 方法和在jQuery的原型对象上自行添加新的属性或方法的方式相同，同为扩展jQuery的原型对象。

 

3、jQuery.extend()和jQuery.fn.extend()的区别

   

    看到这里这两个函数作用和区别基本上就可以理解个八九不离十了，下面再总结一下吧：

    jQuery.extend()函数中如果没有给定target参数的话，则是在为jQuery本身添加全局属性和方法，就如我们常调用的$.ajax()、$.trim()等这些方法就是这样加进去的，不需由任何jQuery对象调用，直接拿来就可以用。

    jQuery.fn.extend()函数则是为jQuery原型对象 (jQuery.prototype) 添加可供jQuery实例对象调用的属性和方法，可由任意集成jQuery原型对象的对象实例调用，如例3中的 $("input[type=checkbox]").check();。

 

---

 

    小可不才，斗胆写下了这篇博文。深知没有什么太多的技术含量，但这也是我自己的技术积累，积少成多嘛。如有高手看到，说的不清楚或不对的地方欢迎拍砖指正，如同行有什么不明白的，也可提出问题，共同切磋，谢谢！

    参考：

                1. jQuery.extend()函数详解

                2. 解析jQuery中extend方法--源码解析以及递归的过程《二》 

                2. jQuery.fn.extend()函数详解

                3. jQuery.extend和jQuery.fn.extend的区别

                4. jQuery_API