วิธีการโคลนอินสแตนซ์คลาสจาวาสคริปต์ ES6

ฉันจะโคลนอินสแตนซ์คลาส Javascript โดยใช้ ES6 ได้อย่างไร

ฉันไม่สนใจโซลูชันที่ใช้ jquery หรือ $ expand

ฉันเคยเห็นการอภิปรายเกี่ยวกับการโคลนวัตถุที่ค่อนข้างเก่าซึ่งชี้ให้เห็นว่าปัญหาค่อนข้างซับซ้อน แต่ด้วย ES6 วิธีแก้ปัญหาที่ง่ายมากจะนำเสนอเอง - ฉันจะวางไว้ด้านล่างและดูว่าผู้คนคิดว่าน่าพอใจหรือไม่

แก้ไข: มีการแนะนำว่าคำถามของฉันซ้ำกัน ฉันเห็นคำตอบนั้น แต่มันมีอายุ 7 ปีและเกี่ยวข้องกับคำตอบที่ซับซ้อนมากโดยใช้ pre-ES6 js ฉันขอแนะนำว่าคำถามของฉันซึ่งช่วยให้ ES6 มีวิธีแก้ปัญหาที่ง่ายกว่ามาก

มันซับซ้อน; ฉันพยายามมาก! ในท้ายที่สุดซับเดียวนี้ใช้ได้กับอินสแตนซ์คลาส ES6 ที่กำหนดเองของฉัน:

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

หลีกเลี่ยงการตั้งค่าต้นแบบเพราะพวกเขาบอกว่ามันทำให้โค้ดช้าลงมาก

สนับสนุนสัญลักษณ์ แต่ไม่เหมาะสำหรับ getters / setters และไม่ทำงานกับคุณสมบัติที่ไม่สามารถนับได้ (ดูเอกสาร Object.assign () ) นอกจากนี้การโคลนคลาสภายในพื้นฐาน (เช่น Array, Date, RegExp, Map และอื่น ๆ ) ดูเหมือนว่าจะต้องมีการจัดการแบบแยกส่วน

สรุป: มันเป็นระเบียบ หวังว่าสักวันจะมีฟังก์ชั่นการโคลนแบบเนทีฟและสะอาด

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

สังเกตลักษณะของObject.assign : ทำสำเนาตื้นและไม่คัดลอกเมธอดคลาส

หากคุณต้องการสำเนาลึกหรือการควบคุมที่มากกว่าการคัดลอกแล้วมีฟังก์ชั่น lodash โคลน

ไม่แนะนำให้สร้างส่วนขยายของ Prototype ซึ่งจะทำให้เกิดปัญหาเมื่อคุณทำการทดสอบโค้ด / ส่วนประกอบของคุณ กรอบการทดสอบหน่วยจะไม่ถือว่าส่วนขยายต้นแบบของคุณโดยอัตโนมัติ ดังนั้นจึงไม่ใช่แนวทางปฏิบัติที่ดี มีคำอธิบายเพิ่มเติมเกี่ยวกับส่วนขยายต้นแบบที่นี่เหตุใดการขยายวัตถุดั้งเดิมจึงเป็นการปฏิบัติที่ไม่ดี

ในการโคลนวัตถุใน 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' // สังเกตว่าวัตถุย่อยดั้งเดิมมีการเปลี่ยนแปลง

หมายเหตุ: หากอินสแตนซ์มีการปิดเป็นคุณสมบัติของตัวเองวิธีนี้จะไม่รวมเข้าด้วยกัน ( อ่านเพิ่มเติมเกี่ยวกับการปิด ) และนอกจากนี้วัตถุย่อย "ที่อยู่" จะไม่ถูกโคลน

clone.logFullName ()

จะไม่ทำงาน.

cloneWithPrototype.logFullName ()

จะใช้งานได้เพราะโคลนจะคัดลอก Prototypes ไปด้วย

ในการโคลนอาร์เรย์ด้วย Object.assign:

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

โคลนอาร์เรย์โดยใช้ ECMAScript spread sintax:

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

2 -> โคลนลึก:

ในการเก็บการอ้างอิงอ็อบเจ็กต์ใหม่ทั้งหมดเราสามารถใช้ JSON.stringify () เพื่อแยกวิเคราะห์ออบเจ็กต์ดั้งเดิมเป็นสตริงและหลังจากแยกวิเคราะห์กลับเป็น JSON.parse ()

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

ด้วยการโคลนลึกการอ้างอิงไปยังที่อยู่จะถูกเก็บไว้ อย่างไรก็ตาม deepClone Prototypes จะหายไปดังนั้น deepClone.logFullName () จะไม่ทำงาน

3 -> ห้องสมุดบุคคลที่ 3:

อีกทางเลือกหนึ่งคือใช้ไลบรารีของบุคคลที่ 3 เช่น loadash หรือขีดล่าง พวกเขาจะสร้างวัตถุใหม่และคัดลอกแต่ละค่าจากต้นฉบับไปยังวัตถุใหม่โดยเก็บข้อมูลอ้างอิงไว้ในหน่วยความจำ

ขีดล่าง: ให้ cloneUnderscore = _ (ต้นฉบับ) .clone ();

Loadash clone: ​​var cloneLodash = _.cloneDeep (ต้นฉบับ);

ข้อเสียของ lodash หรือขีดล่างคือจำเป็นต้องรวมไลบรารีเพิ่มเติมไว้ในโครงการของคุณ อย่างไรก็ตามเป็นตัวเลือกที่ดีและยังให้ผลลัพธ์ที่มีประสิทธิภาพสูงอีกด้วย

อีกหนึ่งซับ:

เวลาส่วนใหญ่ ... (ใช้ได้กับ Date, RegExp, Map, String, Number, Array), btw, cloning string, number เป็นเรื่องตลกเล็กน้อย

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" };