자바 스크립트 ES6 클래스 인스턴스를 복제하는 방법

ES6를 사용하여 Javascript 클래스 인스턴스를 복제하는 방법은 무엇입니까?

jquery 또는 $ extend 기반 솔루션에 관심이 없습니다.

나는 문제가 매우 복잡하다는 것을 암시하는 객체 복제에 대한 아주 오래된 논의를 보았지만 ES6에서는 매우 간단한 해결책이 제시됩니다.

편집 : 내 질문이 중복 된 것으로 제안되고 있습니다. 나는 그 대답을 보았지만 7 살이고 pre-ES6 js를 사용하는 매우 복잡한 대답을 포함합니다. ES6를 허용하는 내 질문에 훨씬 더 간단한 솔루션이 있다고 제안합니다.

복잡하다; 나는 많이 시도했다! 결국이 한 줄짜리 줄은 내 사용자 지정 ES6 클래스 인스턴스에서 작동했습니다.

let clone = Object.assign(Object.create(Object.getPrototypeOf(orig)), orig)

프로토 타입 설정을 피하는 이유 는 코드를 많이 느리게 만든다고 하기 때문 입니다.

기호를 지원하지만 getter / setter에 적합하지 않으며 열거 할 수없는 속성으로 작동하지 않습니다 ( Object.assign () 문서 참조 ). 또한 기본 내부 클래스 (예 : Array, Date, RegExp, Map 등)를 복제하는 것은 슬프게도 개별 처리가 필요한 것처럼 보입니다.

결론 : 엉망입니다. 언젠가는 기본적이고 깨끗한 복제 기능이 있기를 바랍니다.

const clone = Object.assign( {}, instanceOfBlah );
Object.setPrototypeOf( clone, Blah.prototype );

Object.assign 의 특성에 유의하십시오. 단순 복사를 수행하고 클래스 메소드를 복사하지 않습니다.

전체 복사 또는 복사에 대한 더 많은 제어를 원하면 lodash 복제 기능이 있습니다.

프로토 타입을 확장하는 것은 권장하지 않습니다. 코드 / 구성 요소를 테스트 할 때 문제가 발생합니다. 단위 테스트 프레임 워크는 자동으로 프로토 타입 확장을 가정하지 않습니다. 따라서 좋은 습관이 아닙니다. 여기에 프로토 타입 확장에 대한 더 많은 설명이 있습니다. 왜 네이티브 객체를 확장하는 것이 나쁜 습관입니까?

JavaScript에서 개체를 복제하는 방법은 간단하거나 간단하지 않습니다. 다음은 "Shallow Copy"를 사용하는 첫 번째 인스턴스입니다.

1-> 얕은 클론 :

class Employee {
    constructor(first, last, street) {
        this.firstName = first;
        this.lastName = last;
        this.address = { street: street };
    }

    logFullName() {
        console.log(this.firstName + ' ' + this.lastName);
    }
}

let original = new Employee('Cassio', 'Seffrin', 'Street A, 23');
let clone =  Object.assign({},original); //object.assing() method
let cloneWithPrototype Object.create(Object.getPrototypeOf(original)), original) //  the clone will inherit the prototype methods of the original.
let clone2 = { ...original }; // the same of object assign but shorter sintax using "spread operator"
clone.firstName = 'John';
clone.address.street = 'Street B, 99'; //will not be cloned

결과 :

original.logFullName () :

결과 : Cassio Seffrin

clone.logFullName () :

결과 : John Seffrin

original.address.street;

결과 : 'Street B, 99'// 원래 하위 개체가 변경되었음을 알 수 있습니다.

참고 : 인스턴스에 클로저가 자체 속성으로있는 경우이 메서드는 래핑하지 않습니다. ( 클로저에 대해 자세히 읽어보십시오. ) 또한 하위 개체 "address"는 복제되지 않습니다.

clone.logFullName ()

작동하지 않을 것이다.

cloneWithPrototype.logFullName ()

복제가 프로토 타입도 복사하기 때문에 작동합니다.

Object.assign을 사용하여 어레이를 복제하려면 :

let cloneArr = array.map((a) => Object.assign({}, a));

ECMAScript 스프레드 신택스를 사용하여 어레이 복제 :

let cloneArrSpread = array.map((a) => ({ ...a }));

2-> 딥 클론 :

완전히 새로운 객체 참조를 보관하기 위해 JSON.stringify ()를 사용하여 원래 객체를 문자열로 구문 분석 한 후 다시 JSON.parse ()로 구문 분석 할 수 있습니다.

let deepClone = JSON.parse(JSON.stringify(original));

딥 클론을 사용하면 주소에 대한 참조가 유지됩니다. 그러나 deepClone 프로토 타입이 손실되므로 deepClone.logFullName ()이 작동하지 않습니다.

3-> 타사 라이브러리 :

또 다른 옵션은 loadash 또는 underscore와 같은 타사 라이브러리를 사용하는 것입니다. 새 개체를 만들고 각 값을 원본에서 새 개체로 복사하여 참조를 메모리에 유지합니다.

밑줄 : let cloneUnderscore = _ (original) .clone ();

Loadash 복제 : var cloneLodash = _.cloneDeep (original);

lodash 또는 밑줄의 단점은 프로젝트에 추가 라이브러리를 포함해야한다는 것입니다. 그러나 그들은 좋은 옵션이며 또한 고성능 결과를 생성합니다.

또 하나의 라이너 :

대부분의 경우 ... (Date, RegExp, Map, String, Number, Array에서 작동), btw, 복제 문자열, 숫자는 약간 재미 있습니다.

let clone = new obj.constructor(...[obj].flat())

복사 생성자가없는 클래스의 경우 :

let clone = Object.assign(new obj.constructor(...[obj].flat()), obj)

class A {
  constructor() {
    this.x = 1;
  }

  y() {
    return 1;
  }
}

const a = new A();

const output = Object.getOwnPropertyNames(Object.getPrototypeOf(a)).concat(Object.getOwnPropertyNames(a)).reduce((accumulator, currentValue, currentIndex, array) => {
  accumulator[currentValue] = a[currentValue];
  return accumulator;
}, {});

나는 거의 모든 대답을 좋아합니다. 이 문제를 해결하기 위해 clone()메서드 를 정의하여 수동으로 수행 하고 그 안에 전체 개체를 처음부터 빌드했습니다. 나에게 이것은 결과 객체가 복제 된 객체와 자연적으로 동일한 유형이기 때문에 의미가 있습니다.

타이프 스크립트를 사용한 예 :

export default class ClassName {
    private name: string;
    private anotherVariable: string;
   
    constructor(name: string, anotherVariable: string) {
        this.name = name;
        this.anotherVariable = anotherVariable;
    }

    public clone(): ClassName {
        return new ClassName(this.name, this.anotherVariable);
    }
}

나는이 솔루션이 더 '객체 지향적'으로 보이기 때문에 좋아합니다.

예를 들어 Obj라는 객체를 복제하려는 경우 스프레드 연산자를 사용할 수 있습니다.

let clone = { ...obj};

복제 된 오브젝트를 변경하거나 추가하려면 다음을 수행하십시오.

let clone = { ...obj, change: "something" };