Як клонувати екземпляр класу javascript ES6

Як клонувати екземпляр класу Javascript за допомогою ES6.

Мене не цікавлять рішення на основі jquery або $ extension.

Я бачив досить давні обговорення клонування об'єктів, які свідчать про те, що проблема досить складна, але з ES6 представляється дуже просте рішення - я поміщу його нижче і подивлюся, чи вважають люди задовільним.

редагувати: пропонується, щоб моє запитання було дублікатом; Я бачив цю відповідь, але їй 7 років і вона включає дуже складні відповіді з використанням pre-ES6 js. Я припускаю, що моє питання, яке дозволяє ES6, має значно простіше рішення.

Це складно; Я багато пробував! Врешті-решт, цей одношаровий вкладиш працював для моїх власних екземплярів класу ES6:

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

Це дозволяє уникнути встановлення прототипу, оскільки вони кажуть це сильно уповільнює код.

Він підтримує символи, але не ідеально підходить для геттерів / сеттерів і не працює з незліченними властивостями (див. Object.assign () ). Крім того, клонування основних внутрішніх класів (таких як Array, Date, RegExp, Map тощо), на жаль, часто, здається, потребує індивідуальної обробки.

Висновок: це безлад. Будемо сподіватися, що колись з’явиться рідна та чиста функція клонування.

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

Зверніть увагу на характеристики Object.assign : він робить неглибоку копію та не копіює методи класу.

Якщо ви хочете глибоку копію або більше контролю над копією, тоді є функції клонування lodash .

Не рекомендується робити розширення прототипу, це призведе до проблем, коли ви будете проводити тести свого коду / компонентів. Фреймворки модульного тесту не приймають автоматично ваші розширення прототипу. Тож це не є доброю практикою. Тут є більше пояснень розширень прототипів. Чому розширення власних об’єктів є поганою практикою?

Клонувати об'єкти в JavaScript існує не простий і нехитрий спосіб. Ось перший екземпляр із використанням "Дрібної копії":

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 ():

результат: Кассіо Сеффрін

clone.logFullName ():

результат: Джон Сеффрін

original.address.street;

результат: 'Вулиця Б, 99' // зауважте, що початковий під об'єкт змінено

Зверніть увагу: Якщо екземпляр має закриття як власні властивості, цей метод не оберне його. ( читайте більше про закриття ). Крім того, додатковий об’єкт "адреса" не буде клонованим.

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 -> 3-ті партійні бібліотеки:

Іншими варіантами буде використання сторонніх бібліотек, таких як loadash або підкреслення. Вони створюють новий об'єкт і копіюють кожне значення з оригіналу на новий об'єкт, зберігаючи його посилання в пам'яті.

Підкреслення: нехай cloneUnderscore = _ (оригінал) .clone ();

Клон завантаження: var cloneLodash = _.cloneDeep (оригінал);

Недоліком лодаша або підкреслення була необхідність включити додаткові бібліотеки у свій проект. Однак вони є хорошими варіантами, а також дають високі результати.

Ще один лайнер:

Найчастіше ... (працює з датою, RegExp, Map, String, Number, Array), до речі, рядок клонування, число трохи забавне.

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;
}, {});

Ви можете використовувати оператор поширення, наприклад, якщо ви хочете клонувати об'єкт з ім'ям Obj:

let clone = { ...obj};

І якщо ви хочете щось змінити або додати до клонованого об’єкта:

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