jQuery.extend()的实现方式详解及实例

复制代码 代码如下:


<script type="text/javascript" src="https://www.jb51.net/jquery-1.5.2.js"></script>
<script>
obj1 = { a : 'a', b : 'b' };
obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' };

$.extend(true, obj1, obj2);

alert(obj1.x.xxx);  // 得到"xxx"

obj2.x.xxx = 'zzz';
alert(obj2.x.xxx);  // 得到"zzz"
alert(obj1.x.xxx);  // 得带"xxx"
</script>


$.extend(true, obj1, obj2)表示以obj2中的属性扩展对象obj1,第一个参数设为true表示深复制。
虽然obj1中原来没有"x"属性,但经过扩展后,obj1不但具有了"x"属性,而且对obj2中的"x"属性的修改也不会影响到obj1中"x"属性的值,这就是所谓的“深复制”了。

浅复制的实现

如果仅仅需要实现浅复制,可以采用类似下面的写法:

复制代码 代码如下:


$ = {
     extend : function(target, options) {
        for (name in options) {
            target[name] = options[name];
        }
        return target;
    }
};


也就是简单地将options中的属性复制到target中。我们仍然可以用类似的代码进行测试,但得到的结果有所不同(假设我们的js命名为“jquery-extend.js”):

复制代码 代码如下:


<script type="text/javascript" src="https://www.jb51.net/jquery-extend.js"></script>
<script>
obj1 = { a : 'a', b : 'b' };
obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' };
$.extend(obj1, obj2);
alert(obj1.x.xxx);  // 得到"xxx"
obj2.x.xxx = 'zzz';
alert(obj2.x.xxx);  // 得到"zzz"
alert(obj1.x.xxx);  // 得带"zzz"
</script>


obj1中具有了"x"属性,但这个属性是一个对象,对obj2中的"x"的修改也会影响到obj1,这可能会带来难以发现的错误。

深复制的实现

如果我们希望实现“深复制”,当所复制的对象是数组或者对象时,就应该递归调用extend。如下代码是“深复制”的简单实现:

复制代码 代码如下:


$ = {
 extend : function(deep, target, options) {
  for (name in options) {
   copy = options[name];
   if (deep && copy instanceof Array) {
                target[name] = $.extend(deep, [], copy);
            } else if (deep && copy instanceof Object) {
                target[name] = $.extend(deep, {}, copy);
   } else {
    target[name] = options[name];
   }
  }
  return target;
 }
};


具体分为三种情况:
1. 属性是数组时,则将target[name]初始化为空数组,然后递归调用extend;
2. 属性是对象时,则将target[name]初始化为空对象,然后递归调用extend;
3. 否则,直接复制属性。

测试代码如下:

复制代码 代码如下:


<script type="text/javascript" src="https://www.jb51.net/jquery-extend.js"></script>
<script>
obj1 = { a : 'a', b : 'b' };
obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' };
$.extend(true, obj1, obj2);
alert(obj1.x.xxx);  // 得到"xxx"
obj2.x.xxx = 'zzz';
alert(obj2.x.xxx); // 得到"zzz"
alert(obj1.x.xxx); // 得到"xxx"
</script>


现在如果指定为深复制的话,对obj2的修改将不会对obj1产生影响了;不过这个代码还存在一些问题,比如“instanceof Array”在IE5中可能存在不兼容的情况。jQuery中的实现实际上会更复杂一些。

更完整的实现

下面的实现与jQuery中的extend()会更接近一些:

复制代码 代码如下:


$ = function() {
    var copyIsArray,
        toString = Object.prototype.toString,
        hasOwn = Object.prototype.hasOwnProperty;

class2type = {
        '[object Boolean]' : 'boolean',
        '[object Number]' : 'number',
        '[object String]' : 'string',
        '[object Function]' : 'function',
        '[object Array]' : 'array',
        '[object Date]' : 'date',
        '[object RegExp]' : 'regExp',
        '[object Object]' : 'object'
    },

type = function(obj) {
        return obj == null ? String(obj) : class2type[toString.call(obj)] || "object";
    },

isWindow = function(obj) {
        return obj && typeof obj === "object" && "setInterval" in obj;
    },

isArray = Array.isArray || function(obj) {
        return type(obj) === "array";
    },

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgzxg.html