迹忆客 专注技术分享

在实现某些服务时，克隆对象是一件很常见的事情。克隆是指创建现有对象的副本，包括其字段。

可能会使用对象克隆的一些用例是在函数中返回对象的副本。

在更改某些属性后更改其某些属性或在 React 的情况下使用 setState。本文演示了 TypeScript 中不同类型的克隆机制以及如何实现它们。

大致有两种克隆机制——浅拷贝和深拷贝。顾名思义，浅拷贝复制对象内的属性和引用嵌套属性。

同时，在深拷贝的情况下，它的所有属性都被复制，复制或克隆对象的任何变化都不会影响原始对象。下面的代码段将讨论浅拷贝和深拷贝是如何工作的。

let a : number = 5;
let b = a;
b = 6;
//does not hold reference to previous original variable and thus is deep copied
console.log(b);
console.log(a);

type Person = {
    name : string;
    age : number;
}
var person : Person = {
    name : 'Geralt',
    age : 95
}
// shallow copy
var personCopy : Person = person;
personCopy.age = 90;
console.log(personCopy.age)
console.log(person.age)

输出结果：

6
5
90
90

因此，隐式只为对象分配浅表副本，因为复制对象中的任何更改都会影响从中复制它的原始对象。

spread 运算符是 JavaScript ES6 版本中可用功能的新增功能，可以有效地复制对象。考虑前面代码段中的示例。

type Person = {
    name : string;
    age : number;
}
var person : Person = {
    name : 'Geralt',
    age : 95
}
var personCopy : Person = { ...person};
personCopy.age = 90;
console.log(personCopy.age)
console.log(person.age)

输出结果：

90
95

因此，spread 运算符可以制作对象的深层副本。但是，在嵌套对象的情况下它会失败。

Object.assign() 的工作方式与扩展运算符的情况类似，可用于克隆简单对象，但在嵌套对象的情况下会失败。

var personCopy : Person = Object.assign({}, person);

必须递归复制每个元素以复制嵌套对象。对于数组，扩展运算符适用于原始数据类型。

但是，必须为对象数组单独复制每个元素。我们可以设计一个函数来实现这一点；

function deepCopy<T>(instance : T) : T {
    if ( instance == null){
        return instance;
    }

    // handle Dates
    if (instance instanceof Date) {
        return new Date(instance.getTime()) as any;
    }

    // handle Array types
    if (instance instanceof Array){
        var cloneArr = [] as any[];
        (instance as any[]).forEach((value)  => {cloneArr.push(value)});
        // for nested objects
        return cloneArr.map((value: any) => deepCopy<any>(value)) as any;
    }
    // handle objects
    if (instance instanceof Object) {
        var copyInstance = { ...(instance as { [key: string]: any }
        ) } as { [key: string]: any };
        for (var attr in instance) {
            if ( (instance as Object).hasOwnProperty(attr)) 
                copyInstance[attr] = deepCopy<any>(instance[attr]);
        }
        return copyInstance as T;
    }
    // handling primitive data types
    return instance;
}
type info = {
    gender : 'male' | 'female';
}

type Person = {
    name : string;
    age : number;
    info : info;
}
var person : Person = {
    name : 'Geralt',
    age : 95,
    info : {
        gender : "male"
    }
}

var personCopy : Person = deepCopy<Person>(person);
console.log(personCopy);

personCopy.info.gender = "female";
console.log(person.info.gender);
console.log(personCopy,info.gender);

输出结果：

male
female

因此，成功的深层复制是为嵌套对象完成的。

可以使用自定义函数复制类，并在该函数中创建一个新实例。这使作者可以完全控制复制功能。

class Witcher{
    name : string;
    age : number;
    constructor() {
        this.name = "Geralt"
        this.age  = 43;
    }
    greet(){
        return "Hi I am witcher known as " + this.name
    }

    copy(){
        var witcherIns = new Witcher();
        witcherIns.name = this.name;
        witcherIns.age = this.age;
        return witcherIns;
    }
}

var witcherObj = new Witcher();
var witcherObjCopy = witcherObj.copy();
console.log(witcherObjCopy);
console.log(witcherObjCopy.greet());

输出结果：

Witcher: {
  "name": "Geralt",
  "age": 43
} 
"Hi I am witcher known as Geralt"