在js中的深复制实现方法

Alliot 发布于2019-08-19 14:44 / 3237人阅读

摘要：针对本话题，我在年月发布了新的文章深入剖析的深复制要实现深复制有很多办法，比如最简单的办法有上面这种方法好处是非常简单易用，但是坏处也显而易见，这会抛弃对象的，也就是深复制之后，无论这个对象原本的构造函数是什么，在深复制之后都会变成。

针对本话题，我在2015年5月发布了新的文章：深入剖析 JavaScript 的深复制

要实现深复制有很多办法，比如最简单的办法有：

var cloneObj = JSON.parse(JSON.stringify(obj));

上面这种方法好处是非常简单易用，但是坏处也显而易见，这会抛弃对象的constructor，也就是深复制之后，无论这个对象原本的构造函数是什么，在深复制之后都会变成Object。另外诸如RegExp对象是无法通过这种方式深复制的。

所以这里我将介绍一种，我自认为很优美的深复制方法，当然可能也存在问题。如果你发现了我的实现方法有什么问题，请及时让我知道~

先决条件：
1. 对于任何对象，它可能的类型有Boolean, Number, Date, String, RegExp, Array 以及 Object（所有自定义的对象全都继承于Object）
2. 我们必须保留对象的构造函数信息（从而使新对象可以使用定义在prototype上的函数）

最重要的一个函数：

Object.prototype.clone = function () {
    var Constructor = this.constructor;
    var obj = new Constructor();

    for (var attr in this) {
        if (this.hasOwnProperty(attr)) {
            if (typeof(this[attr]) !== "function") {
                if (this[attr] === null) {
                    obj[attr] = null;
                }
                else {
                    obj[attr] = this[attr].clone();
                }
            }
        }
    }
    return obj;
};

定义在Object.prototype上的clone()函数是整个方法的核心，对于任意一个非js预定义的对象，都会调用这个函数。而对于所有js预定义的对象，如Number,Array等，我们就要实现一个辅助clone()函数来实现完整的克隆过程：

/* Method of Array*/
Array.prototype.clone = function () {
    var thisArr = this.valueOf();
    var newArr = [];
    for (var i=0; i

可能直接定义在预定义对象的方法上，让人感觉会有些问题。但在我看来这是一种优美的实现方式。

同时我也在开发一个插件，主要的思想也就是扩展预定义对象的方法。

这个插件叫JustJS（Github项目地址）

有以下一些特性：

1. 同时支持Web前端和node.js使用。

2. 直接对预定义对象的方法进行扩展

3. 使用 J(function(){...}) 语句块，决不污染全局命名空间。

目前只写了一小部分，同时也写了些简单的文档，有兴趣的同学可以看一下，也可以加入我，Fork我的项目，喜欢的同学还可以给Star！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78083.html

JS 中的深拷贝与浅拷贝

摘要：什么是深拷贝浅拷贝见名知义，无论是深拷贝还是浅拷贝，都是的问题。使用如下以上就是关于中的深拷贝与浅拷贝的知识和如何进行深拷贝的知识了，如果有错或者有其他方式的话，欢迎在下面留言评论啦前言最近在写项目的时候涉及到一些父子组件传递个对象或者数组通信啥的，或者是直接复制添加对象啥的，直接使用赋值的时候总会出错。一查原来是浅拷贝的问题，就从网上找了点资料，汇总到这里来了。 1 什么是深拷贝...

ztyzz 2019-08-23 13:41 评论0 收藏0
深入剖析 JavaScript 的深复制

摘要：的不能算作深复制，但它至少比直接赋值来得深一些，它创建了一个新的对象。它们的主要用途是对存在环的对象进行深复制。比如源对象中的子对象在深复制以后，对应于。希望这篇文章对你们有帮助深复制方法所谓拥抱未来的深复制实现参考资料本文最初发布于我的个人博客：咀嚼之味一年前我曾写过一篇 Javascript 中的一种深复制实现，当时写这篇文章的时候还比较稚嫩，有很多地方没有考虑仔细。...

gclove 2019-08-22 11:51 评论0 收藏0
js深浅复制

摘要：总结综上所述，数组的深拷贝比较简单，方法没有什么争议，对象的深拷贝，比较好的方法是用的方法实现，或者递归实现，比较简单的深复制可以使用实现参考资料知乎中的深拷贝和浅拷贝深入剖析的深复制深浅复制对比因为JavaScript存储对象都是存地址的，所以浅复制会导致 obj 和obj1 指向同一块内存地址。我的理解是，这有点类似数据双向绑定，改变了其中一方的内容，都是在原来的内存基础上做...

Apollo 2019-08-19 18:44 评论0 收藏0
JS中的深拷贝与浅拷贝

摘要：深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被...

wuyumin 2019-08-22 16:11 评论0 收藏0
JS中的深拷贝与浅拷贝

摘要：中的深拷贝与浅拷贝说到深浅拷贝的时候就不得不说一下中的变量类型了基本类型按值存放在栈内存中的简单数据段可以直接访问引用类型存放在堆内存中的对象变量保存的是一个指向存放数据位置的指针访问引用类型的值时首先从栈中获取到存放该数据位置的指针然后再 JS中的深拷贝与浅拷贝说到深浅拷贝的时候就不得不说一下JS中的变量类型了: 基本类型: undefined、null、boolean、numb...

ARGUS 2019-08-26 12:13 评论0 收藏0