js实现深度克隆

最新推荐文章于 2025-04-11 00:03:45 发布

借我一秋风

最新推荐文章于 2025-04-11 00:03:45 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_53489791/article/details/120804531

本文介绍了JavaScript中浅度克隆和深度克隆的概念，重点解析了如何通过代码实现深度克隆。深度克隆确保了克隆后的对象与原对象完全独立，即使修改克隆对象的属性也不会影响原对象。文章提供了基于原型的深度克隆实现方式，包括对数组和对象的处理，确保了所有元素和属性都被完全复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

深度克隆

克隆或者拷贝分为2种：浅度克隆、深度克隆。

浅度克隆：基本类型为值传递，对象仍为引用传递。
深度克隆：所有元素或属性均完全克隆，并于原引用类型完全独立，即，在后面修改对象的属性的时候，原对象不会被修改。

实现深度克隆：

代码及注释：

// 参数deep: true  表示深度克隆 否则 浅克隆
        Object.prototype.clone = function(deep){
            // 获取到调用函数的对象
            // this -> obj 
            // obj、array、function 基本数据类型

            // 0 根据deep判断是否进行深克隆
           
            // 1. 判断是否是数组
            if(Array.isArray(this)){
                // var arr = [];
                // Array.prototype.slice(this);
                if(deep){
                    // 深克隆  ？？
                    var arr = [];
                    for(var i = 0;i<this.length;i++){
                        arr.push(this[i].clone(true));
                    }
                    return arr;
                }else{
                    // 浅克隆
                    return this.slice();
                }
            // 2. 判断是否是对象
            }else if(Object.prototype.toString.call(this)  === '[object Object]'){
                // 2.1 创建新对象  将克隆的对象进行遍历赋值
                var obj = {};
                for(var i in this){
                    // 判断obj中的属性是不是自身的
                    if(this.hasOwnProperty(i)){
                        if(deep){
                            // 深克隆 ？？  this[i] 再一次数据类型判断 数组  对象 
                            // this[i] ->  z:[true,'1',10]
                            // 用当前需要克隆的数据 调用clone 判断当前数据的类型 
                            obj[i] = this[i].clone(true);
                        }else{
                            // 浅克隆  
                            obj[i] = this[i];
                        }
                    }
                }
                return obj;
            }else {
                // 基本数据类型 、函数
                return this;
            }

        }