js深复制和浅复制的理解

js中的深复制和浅复制也被叫作深拷贝和浅拷贝,它们的功能都是像一个对象复制成另一个新对象。
下来我们用代码解释一下深复制和浅复制的实现和差异:

基础对象:

var obj = {
  name: 'yuuk',
  age: '23',
  favorite: ['basketball', 'swimming', { a: 1, b: 2 }, null],
  skill: function() {
    console.log(this.name);
  },
};

浅复制:

var shallowCopy = function(src) {
    var result = {};
    for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
            result[prop] = src[prop];
        }
    }
    return result;
};

var newObj = deepCopy(obj);
newObj.favorite[0] = 'football';
console.log(newObj.favorite[0]);  // football
console.log(obj.favorite[0]);  // football

打印数据发现,修改了newObj的value也会改变obj的value

深复制:

var deepCopy = function(src) {
    var result, prop;
    if (src instanceof Array ) {
        result = [];
    } else {
        result = {};
    }
    for (prop in src) {
        if (typeof src[prop] === 'object' && src[prop] !== null) {
            result[prop] = arguments.callee(src[prop]); // 降低耦合
        } else {
            if (src.hasOwnProperty(prop)) {
                result[prop] = src[prop];
            }
        }
    }
    return result;
};

var newObj = deepCopy(obj);
newObj.favorite[0] = 'football';
console.log(newObj.favorite[0]); // football
console.log(obj.favorite[0]); // basketball 区别就在这里

打印数据发现,修改了newObj的value不会改变obj的value

由此发现它们的区别在于浅复制仅仅复制第一层对象,而深复制就利用递归循环的方式复制了所有层级。

打赏支持

如果文章对你有帮助就打个赏吧~

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

评论

还没有任何评论,你来说两句吧

发表评论

Powered By Yuuk