小tips：JS之浅拷贝与深拷贝

Soarkey 发布于2019-08-21 17:37 / 712人阅读

摘要：浅拷贝深拷贝浅拷贝的问题如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

浅拷贝：

function extendCopy(p) {
　var c = {};
　for (var i in p) {
　　　c[i] = p[i];
　}
　return c;
}

深拷贝：

function deepCopy(p, c) {
　　var c = c || {};
　　for (var i in p) {
　　　　if (typeof p[i] === "object") {
　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　deepCopy(p[i], c[i]);
　　　　} else {　　
            c[i] = p[i];
　　　　}
　　}

　　return c;
}

浅拷贝的问题：如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

下面来个实例：

var obj1 = {
    name:"helloJack",
    inner:{
        sum:5
    }
};

var obj2 = extendCopy(obj1,{});

obj2.name ="sss";
obj2.inner.sum = 7;
console.log(obj1.name); //helloJack
console.log(obj1.inner.sum); //5

存在的问题，如果经常改写这个函数的方法extendCopy，内部再调用这个方法名就会出错，还得修改一下这个方法名，那么下面这样解决：

var extendCopy = (function f(p,c){
    var c = c || {};
    for (var i in p) {
        if(typeof p[i] === "object"){
            c[i] = (p[i] instanceof Array) ? [] : {};
            f(p[i],c[i]);
        }else{
            　c[i] = p[i];
        }　
    }
    return c;
});

可参考地址：
小tips：JS严格模式（use strict）下不能使用arguments.callee的替代方案
Javascript 面向对象编程（一）：封装
Javascript面向对象编程（二）：构造函数的继承
Javascript面向对象编程（三）：非构造函数的继承

云服务器 GPU云服务器小tips层 js js拷贝内存数据库后拷贝预拷贝深拷贝和浅拷贝

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

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

Js之浅拷贝深拷贝与对象数组的遍历

摘要：判断是深拷贝对象还是数组如果要拷贝的对象的属性依然是个复合类型，递归运用递归，当要拷贝的对象或者数组的属性依然是个对象或者数组时，递归调用。遍历对象聊完了深拷贝和浅拷贝，接下来说一下遍历。在js这门语言中，数据存放在堆中，而数据的引用的存放在栈中。浅拷贝我们说的浅拷贝，指的是，引用地址的拷贝，栈中两块不同的引用地址都指向了堆中同样一块区域。所以，我们通过一个地址修改了堆中的数据，...

liangzai_cool 2019-08-22 14:59 评论0 收藏0
浅拷贝与深拷贝的区别

摘要：浅拷贝与深拷贝一数据类型数据分为基本数据类型，和对象数据类型。浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。对于字符串数字及布尔值来说不是或者对象，会拷贝这些值到新的数组里。浅拷贝与深拷贝一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类...

jsyzchen 2019-08-02 16:13 评论0 收藏0
浅拷贝与深拷贝

摘要：二浅拷贝与深拷贝深拷贝和浅拷贝是只针对和这样的引用数据类型的。浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。对于字符串数字及布尔值来说不是或者对象，会拷贝这些值到新的数组里。一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类型的特点：直...

hzc 2019-08-02 13:56 评论0 收藏0
浅拷贝与深拷贝

摘要：二浅拷贝与深拷贝深拷贝和浅拷贝是只针对和这样的引用数据类型的。浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。对于字符串数字及布尔值来说不是或者对象，会拷贝这些值到新的数组里。一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类型的特点：直...

史占广 2019-08-23 14:15 评论0 收藏0
Javascript系列之浅复制与深复制

摘要：定义浅复制如果复制引用，复制后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响。浅复制数组浅复制利用数组方法和返回新数组特性，进行复制。深复制对象深复制利用对象的和方法。定义浅复制如果复制引用，复制后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响。深复制深复制不是简单的复制引用，而是在堆中重新分配内存，并且把源对象实例的所有属性都进行新建复制，以保证深复制的...

MonoLog 2019-08-21 17:17 评论0 收藏0