前端(1)js对象克隆

灰太狼 2022-01-30 12:23 219阅读 0赞

大家都知道，js的对象是引用类型,如果直接var obj2 = obj，obj2和obj是共享同一个对象实体的，这往往不是我们想要的结果。

官方并没有给出通用的对象克隆方法：

我们给出以下几种写法：

1.通用对象克隆：

function clone(obj){
        let temp = null;
        if(obj instanceof Array){
            temp = obj.concat();
        }else if(obj instanceof Function){
            //函数是共享的是无所谓的，js也没有什么办法可以在定义后再修改函数内容
            temp = obj;
        }else{
            temp = new Object();
            for(let item in obj){
                let val = obj[item];
                temp[item] = typeof val == 'object'?clone(val):val; //这里也没有判断是否为函数，因为对于函数，我们将它和一般值一样处理
            }
        }
        return temp;
    }

整个clone函数的思路可能有点乱，但是可以这样理顺：

**把obj的value当做只有普通值、数组和函数，先按部就班地处理，然后再考虑之前的“普通值”有可能是object，所以这里做个判断，在递归一下clone函数就可以了**

ps:值得注意的是，官方有一种方法可以生成新的函数实例，就是bind()

function aaa(){
        console.log(this);
    };
    
    var c = aaa;
    var d = aaa.bind(); //bind如果不传东西，默认是window对象
    
    c === aaa; //true
    d === aaa; //false

2.JSON对象序列化方法

这个方法明显是简单得多，但是有个弊端，就是不能复制函数

var obj = {a:1,b:2}  
    var newObj = JSON.parse(JSON.stringify(obj));

3.dom元素的复制——cloneNode

let div = document.getElementById('box');
    let box2 = div.cloneNode(true);

4.es6新方法——Object.assign

var obj = {a:1,b:2}  
    var newObj = Object.assign({}, obj);

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS克隆对象

var clone = function (obj) { if(obj == undefined || obj == null || obj == ''

素颜马尾好姑娘i/ 2023年10月18日 19:05/ 0 赞/ 54 阅读

相关【第32题】JAVA高级技术-对象克隆1（假克隆）

回城传送–》[《JAVA筑基100例》][JAVA_100] 文章目录零、前言一、题目描述二、解题思路-假克隆三、代码详解

末蓝、/ 2023年10月07日 18:42/ 0 赞/ 22 阅读

相关 JS_js深克隆

function deepClone(obj){ //判断是否是简单数据类型 if(typeof obj === 'object'){

拼搏现实的明天。/ 2022年10月31日 12:12/ 0 赞/ 145 阅读

相关 java对象克隆

1、java克隆分为浅克隆(ShallowClone)和深克隆(DeepClone) 浅克隆和深克隆的主要区别在于是否支持引用类型的成员变量的复制一般步骤是（浅克隆）：

一时失言乱红尘/ 2022年06月08日 23:24/ 0 赞/ 217 阅读

相关 JS对象深度克隆/复制

实现思路对象类型存储的是对象的引用地址，而把对象的实际内容单独存放，因为对象类型通常比较庞大，这是数据开销和内存开销优化的手段。因此我们不能像原始数据类型一样简单的赋值

ゝ一世哀愁。/ 2022年05月24日 13:26/ 0 赞/ 225 阅读

相关 JS对象深度克隆的实现

JavaScript中的数据类型分为两大类：原始类型和对象类型。（1）原始类型包括：Number、String、Boolean、null、undefined（我们需要克隆

约定不等于承诺〃/ 2022年05月16日 13:53/ 0 赞/ 224 阅读

相关 JS对象克隆

JS引用类型不能直接赋值，需要克隆后再赋值，不然其中一个改变时两个都会改变 function clone(obj) { // Handle the 3 s

布满荆棘的人生/ 2022年05月14日 08:49/ 0 赞/ 199 阅读

相关 Js中克隆对象，Js中Sleep休眠

//克隆一 function cloneObj(obj) { var str, newobj = obj.constructor === Arr

迷南。/ 2022年04月15日 06:10/ 0 赞/ 212 阅读

相关 js深度克隆对象

js深度克隆对象用js实现对象克隆最关键的两点就是：var objClone = new this.constructor();和objClone\[key\] = t

短命女/ 2022年04月15日 02:22/ 0 赞/ 216 阅读

相关前端(1)js对象克隆

大家都知道，js的对象是引用类型,如果直接var obj2 = obj，obj2和obj是共享同一个对象实体的，这往往不是我们想要的结果。官方并没有给出通用的对象克隆方法：

灰太狼/ 2022年01月30日 12:23/ 0 赞/ 220 阅读