jQuery中extend()和fn.extend()方法详解

2020-05-22 17:07:11易采站长站整理

      var obj2={name:’Jack’,height:180};
      console.log($.extend(obj1,obj2));   //Object {name: “Jack”, age: 22, height: 180}
      console.log(obj1);                  //Object {name: “Jack”, age: 22, height: 180}

默认情况下,待合并对象跟返回结果一样是被修改了的,如果仅仅想得到一个合并后的对象又不想破坏任何一个原来的对象可以使用此方法


  var obj1={name:’Tom’,age:22};
  var obj2={name:’Jack’,height:180};
  var empty={};
  console.log($.extend(empty,obj1,obj2));   //Object {name: “Jack”, age: 22, height: 180}
  console.log(obj1);                  //Object {name: “Tom”, age: 22}

使用则递归合并或者叫深度拷贝


 var obj1={name:’Tom’,love:{drink:’milk’,eat:’bread’}};
 var obj2={name:’Jack’,love:{drink:’water’,sport:’football’}};
 console.log(($.extend(false,obj1,obj2)).love);   //Object {drink: “water”, sport: “football”}
 console.log(($.extend(true,obj1,obj2)).love);    //Object {drink: “water”, eat: “bread”, sport: “football”}

详细的使用方法可以看参考手册http://www.w3cschool.cc/manual/jquery/

下面来分析下1.7.1源码中是怎么实现的:


jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;
       …
}

 首先是定义了一组变量,因为参数个数不确定所以就直接调用arguments对象访问传递的参数

  变量 options:指向某个源对象。
‰ ‰ 变量 name:表示某个源对象的某个属性名。
‰ ‰ 变量 src:表示目标对象的某个属性的原始值。
‰ ‰ 变量 copy:表示某个源对象的某个属性的值。
‰ ‰ 变量 copyIsArray:指示变量 copy 是否是数组。
‰ ‰ 变量 clone:表示深度复制时原始值的修正值。
‰ ‰ 变量 target:指向目标对象。
‰ ‰ 变量 i:表示源对象的起始下标。
‰ ‰ 变量 length:表示参数的个数,用于修正变量 target。