也说Javascript对象拷贝及疑问

也说Javascript对象拷贝及疑问

1、浅拷贝                                                                                                                           

当咱们须要将一个对象拷贝至另外一个对象时，咱们通常会这么实现

function shadowCopy(source,target){  var target=target||{};  for(var i in source)  {   target[i]=source[i];  }  return target; } var a={name:'Lily',age:19}; var b=shadowCopy(a);//b={name:'Lily',age:19} 

浅拷贝的问题是，若是父对象的属性等于数组或另外一个对象，实际上子对象得到的只是一个内存地址，而不是真正拷贝，父对象的数组或对象属性发生变化时，子对象对应属性也发生变化

function shadowCopy(source,target){  var target=target||{};  for(var i in source)  {   target[i]=source[i];  }  return target; } var a={name:'Lily',Hobbies:['Music','Sport']}; var b=shadowCopy(a);//b={name:'Lily',Hobbies:['Music','Sport']} a.Hobbies.push('Read');//b={name:'Lily',Hobbies:['Music','Sport','Read']} 

2、深拷贝                                                                                                                           

为了解决上述问题，须要对对象的数组和对象属性进行深拷贝。它的实现并不难，只要递归调用"浅拷贝"就好了

function deepCopy(source,target){  var target=target||{};  for(var i in source)  {   if(typeof source[i] === 'object'){    target[i] = (source[i].constructor === Array ) ? [] : {} ;    deepCopy(source[i],target[i]);   }else{    target[i]=source[i];   }  }  return target; } var a={name:'Lily',Hobbies:['Music','Sport']}; var b=deepCopy(a);//b={name:'Lily',Hobbies:['Music','Sport']} a.Hobbies.push('Read');//b={name:'Lily',Hobbies:['Music','Sport','Read']},b={name:'Lily',Hobbies:['Music','Sport']} 

上述代码中有一个问题，当待拷贝对象中存在自引用时，程序会陷入无限循环

var a={name:'lily'};
a.obj=a;
deepCopy(a);
在Chome Console运行时，以下提示
RangeError: Maximum call stack size exceeded

为了解决自引用问题，拷贝时加入判断逻辑

function deepCopy(source,target){  var target=target||{};  for(var i in source)  {     //防止自引用   if(source[i] === source )    continue;   if(typeof source[i] === 'object'){    target[i] = (source[i].constructor === Array ) ? [] : {} ;    deepCopy(source[i],target[i]);   }else{    target[i]=source[i];   }  }  return target; } var a={name:'lily'}; a.obj=a; var b=deepCopy(a);//b={name:'lily'} 

3、JQuery拷贝实现                                                                                                                              

网上有不少对JQuery extend方法的分析，有不了解的能够去搜索阅读 

贴一处被分析的源码

jQuery.extend = jQuery.fn.extend = function() {
 var src, copyIsArray, copy, name, options, clone,   target = arguments[0] || {},   i = 1,   length = arguments.length,   deep = false;  // Handle a deep copy situation  if ( typeof target === "boolean" ) {   deep = target;   target = arguments[1] || {};   // skip the boolean and the target   i = 2;  }  // 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  if ( length === i ) {   target = this;   --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     if ( target === copy ) {      continue;     }     // Recurse if we're merging plain objects or arrays     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; }; 

4、JQuery实现疑问                                                                                                                              

在阅读上述JQuery代码时，有个地方有疑问，疑问代码以下

// Prevent never-ending loop if ( target === copy ) { continue; }

注意到，在extend方法中，为了防止无限循环，这里有一个逻辑，在target对象等于copy对象时，调过此次复制操做。其中，copy对象为options对象的属性对象。

问题是，这里为何要拿target对象与copy对象比较呢？难道不该该是比较copy对象和options对象吗？

带着这个疑问，在一个已经引入了JQuery库的页面Console中执行下

var a={name:'lily'}; a.obj=a; var b={}; $.extend(true,b,a); RangeError: Maximum call stack size exceeded

能够看到，当a对象中存在自引用属性时，extend方法并不能防止无限循环的发生

那么判断target === copy能起到什么做用呢？

var a={name:'lily'}; var b={age:19}; a.obj=b; $.extend(true,b,a); //此时b={age: 19, name: "lily"}

去掉判断target === copy会陷入无限循环吗？其实是不会的

var a={name:'lili'}; var b={age:19}; a.obj=b; deepCopy(true,b,a); //b=Object {age: 19, name: "lili", obj: Object} //其中Object为b

这里的deepCopy是我将JQuery的extend方法，去掉上述判断逻辑，本身实现了一份

function deepCopy() {  var src, copyIsArray, copy, name, options, clone,   target = arguments[0] || {},   i = 1,   length = arguments.length,   deep = false;  // Handle a deep copy situation  if ( typeof target === "boolean" ) {   deep = target;   target = arguments[1] || {};   // skip the boolean and the target   i = 2;  }  // 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  if ( length === i ) {   target = this;   --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     if ( options === copy ) {      continue;     }     */     // Recurse if we're merging plain objects or arrays     if ( deep && copy && ( isPlainObject(copy) || (copyIsArray =isArray(copy)) ) ) {      if ( copyIsArray ) {       copyIsArray = false;       clone = src && isArray(src) ? src : [];      } else {       clone = src && isPlainObject(src) ? src : {};      }      // Never move original objects, clone them      target[ name ] =deepCopy( deep, clone, copy );     // Don't bring in undefined values     } else if ( copy !== undefined ) {      target[ name ] = copy;     }    }   }  }  // Return the modified object  return target; }; var isString=function(obj){  return Object.prototype.toString.call(obj) === '[object String]'; }; var isArray=function(obj){  return Object.prototype.toString.call(obj) === '[object Array]'; }; var isPlainObject=function(obj){  return Object.prototype.toString.call(obj) === '[object Object]'; } var a={name:'lili'}; var b={age:19}; a.obj=b; deepCopy(true,b,a); 

View Code

因此这里， 是JQuery extend方法的实现bug，仍是个人理解有误呢？

搜到的一些对JQuery extend方法的源码分析，并无看到这个疑问，也挺奇怪的。