js 基础加固之拷贝

js 深拷贝方法

/**
 * js 深拷贝方法
 * @param target 目标对象
 * @param source 源对象
 */
function deepCopy(target, source) {
    // 通过遍历拿到source中多有的属性
    for (let key in source){
        // 2. 去除当前遍历到的属性对应的取值
        let sourceValue = source[key]

        // 3. 判断西啊是否是基础数据类型
        if (sourceValue instanceof Object) {
            console.log(sourceValue)
            // 新建一个需要进一步深拷贝的构造函数（一开思考没有加这个）
            let subTarget = new sourceValue.constructor;
            target[key] = subTarget
            deepCopy(subTarget, sourceValue)
        } else {
            target[key] = sourceValue
        }

    }
}

// 利用 MessageChannel

function deepCopy(obj) {

    return new Promise((resolve) => {

        const { port1, port2 } = new MessageChannel();

        port2.onmessage = ev => resolve(ev.data);

        port1.postMessage(obj);

    });

}

deepCopy(obj).then((copy) => {           // 请记住`MessageChannel`是异步的这个前提！

    let copyObj = copy;

    console.log(copyObj, obj)

    console.log(copyObj == obj)

});

// json
const obj = {name: 'llx123'}
const obj2 = { ...obj }
const obj3 = JSON.parse(JSON.stringify(obj))

// array

const arr= [{name: 'llx123'}]
const [ ...arr2 ] = arr
const arr3 = []
arr3.concat(arr)

浅拷贝

1. Object.create() 方法
   作者：liwuwuzhi
   链接：www.jianshu.com/p/28d85bebe599
   来源：简书
   著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

//ColoredTriangle.prototype = triangle;  //ColoredTriangle.prototype.constructor === ColoredTriangle// false
Object.assign(ColoredTriangle.prototype, triangle) //ColoredTriangle.prototype.constructor === ColoredTriangle// true

var c = new ColoredTriangle();

此时的c，如下图：

// 此处重点理解 Object.create() 的含义，是将 原型指向自己
var originProto = Object.getPrototypeOf(c); // 获取到的是 c的 __proto__
var originProto2 = Object.create(originProto);

// 拷贝操作,因为 assign 方法不会拷贝 c 的 原型对象
 var deepC = Object.assign(originProto2, c)

// 第二种方法（推荐）
// Object.getPrototypeOf() 得到的是 c 对象的原型，然后作为第一个参数，所以会在新对象c2 的原型上。
// Object.getOwnPropertyDescriptors() 得到是 c 对象自身的可枚举属性，作为第二个参数，放在 c2 的实例上。
//  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors#%E6%B5%85%E6%8B%B7%E8%B4%9D%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1
var c2 = Object.create(Object.getPrototypeOf(c), Object.getOwnPropertyDescriptors(c));

本作品采用《CC 协议》，转载必须注明作者和本文链接