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

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

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