简单实现浅拷贝和深拷贝(只适用[],{})

1.原型链
JavaScript 只有一种结构:对象。每个实例对象( object )都有一个私有属性(称之为 proto )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( proto ) ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。

函数(function)是允许拥有属性的。所有的函数会有一个特别的属性 —— prototype 。

var o = {a: 1};
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// a ---> Array.prototype ---> Object.prototype ---> null

2.浅拷贝
用 for...in 实现浅拷贝

function shallowCopy(source){
    if (!source || typeof source !== 'object') {
        throw new Error('error arguments');
    }
    let target = source.constructor === Array ? [] : {};       
    var key;
    for(key in source){
        if(source.hasOwnProperty(key)){       //意思是判断key这一项是否是其source的自有属性
            target[key] = source[key];
        }
    }
    return target;
}

var first = [1,2,3,4]
var second = shallowCopy(first);
console.log(first===second);   //false
second[0]=99
console.log(first);    // 1 2 3 4
console.log(second);   // 99 2 3 4 

3.深拷贝

function deepCopy(source) {
    let target = Array.isArray( source ) ? [] : {}
    for ( let key in source ) {
        if ( typeof source[ key ] === 'object' ) {
            target[ key ] = deepCopy( source[ key ] )
        } else {
           if(source.hasOwnProperty(key)){    //意思是判断key这一项是否是其source的自有属性
                target[ key ] = source[ key ]
            }
        }
    }
    return target
}

var first = {a:1, b:{d:1}, c:[0, 1, 2]}
var second = deepCopy(first);
console.log(first===second);   //false
second.a = 99
second.b.d  = 99;
second.c[0]  = 99;
console.log(first);    // a:1  b:{d:1}  c:[0, 1, 2]
console.log(second);   // a:99 b:{d:99}  c:[99, 1, 2]

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
https://baijiahao.baidu.com/s?id=1604426873229560999&wfr=spider&for=pc
https://segmentfault.com/a/1190000012828382

你可能感兴趣的:(简单实现浅拷贝和深拷贝(只适用[],{}))