Как клонировать экземпляр класса JavaScript 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. .

Мне нравятся почти все ответы. У меня была эта проблема, и чтобы решить ее, я бы сделал это вручную, определив метод 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);
    }
}

Мне нравится это решение, потому что оно выглядит более «объектно-ориентированным».

TLDR;

// Use this approach
//Method 1 - clone will inherit the prototype methods of the original.
    let cloneWithPrototype = Object.assign(Object.create(Object.getPrototypeOf(original)), original); 

В Javascript не рекомендуется делать расширения прототипа, это приведет к проблемам, когда вы будете тестировать свой код/компоненты. Фреймворки модульного тестирования не будут автоматически принимать расширения вашего прототипа. Так что это не очень хорошая практика. Здесь есть больше объяснений расширений прототипа ?

Для клонирования объектов в 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');

//Method 1 - clone will inherit the prototype methods of the original.
let cloneWithPrototype = Object.assign(Object.create(Object.getPrototypeOf(original)), original); 

//Method 2 - object.assing() will not clone the Prototype.
let cloneWithoutPrototype =  Object.assign({},original); 

//Method 3 - the same of object assign but shorter syntax using "spread operator"
let clone3 = { ...original }; 

//tests
cloneWithoutPrototype.firstName = 'John';
cloneWithoutPrototype.address.street = 'Street B, 99'; //will not be cloned

Результаты:

оригинал.logFullName();

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

cloneWithPrototype.logFullName();

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

исходный.адрес.улица;

результат: 'Улица B, 99' // обратите внимание, что исходный подобъект был изменен

Примечание. Если у экземпляра есть замыкания как собственные свойства, этот метод не будет его обертывать. (узнайте больше о замыканиях). Кроме того, адрес подобъекта будет не получить клон.

cloneWithoutPrototype.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. Они создают новый объект и копируют каждое значение из оригинала в новый объект, сохраняя его ссылки в памяти.

Подчеркивание: пусть cloneUnderscore = _(original).clone();

Клон Loadash: var cloneLodash = _.cloneDeep(original);

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

Еще один вкладыш:

Большую часть времени... (работает для даты, регулярного выражения, карты, строки, числа, массива), кстати, клонирование строки, число немного забавно.

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

Создайте копию объекта, используя тот же прототип и те же свойства, что и исходный объект.

function clone(obj) {
  return Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj))
}

Работает с неперечислимыми свойствами, геттерами, сеттерами и т. д. Невозможно клонировать внутренние слоты, которые есть во многих встроенных типах javascript (например, массив, карта, прокси).

Попробуй это:

function copy(obj) {
   //Edge case
   if(obj == null || typeof obj !== "object") { return obj; }
   var result = {};
   var keys_ = Object.getOwnPropertyNames(obj);
   for(var i = 0; i < keys_.length; i++) {
       var key = keys_[i], value = obj[key];
       result[key] = value;
   }

   Object.setPrototypeOf(result, obj.__proto__);
   return result;
}

//test
function Point(x,y) { 
    this.x = x;
    this.y = y;
}

var myPoint = new Point(0,1);
var copiedPoint = copy(myPoint);
console.log(
   copiedPoint,
   copiedPoint instanceof Point,
   copiedPoint === myPoint
);

Вы можете использовать оператор распространения, например, если хотите клонировать объект с именем Obj:

let clone = { ...obj};

И если вы хотите что-то изменить или добавить к клонированному объекту:

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