浅谈JavaScript中对象的复制和疑问 - 文章教程

浅谈JavaScript中对象的复制和疑问

发布于 2019-04-22 字数 8061 浏览 1222 评论 0

有时候我们可能需要复制JavaScript中的对象,而复制对象这个操作并不难,但是其中却有很多却别,了解 C 语言的指针的朋友应该明白,一个对象可以有其它引用,而内存地址只有一个。

浅谈JavaScript中对象的复制和疑问

浅拷贝

当我们需要将一个对象拷贝至另一个对象时,我们一般会这么实现

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']}

深拷贝

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

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'}

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;
};

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 = 0; 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);

所以这里是 jQuery extend 方法的实现 bug,还是我的理解有误呢?

搜到的一些对 jQuery extend 方法的源码分析,并没有看到这个疑问,也挺奇怪的。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0