कैसे एक जावास्क्रिप्ट ES6 वर्ग उदाहरण क्लोन करने के लिए

Question 1

मैं ईएस 6 का उपयोग करके एक जावास्क्रिप्ट क्लास उदाहरण कैसे क्लोन कर सकता हूं।

मैं jquery या $ विस्तार पर आधारित समाधानों में दिलचस्पी नहीं रखता।

मैंने ऑब्जेक्ट क्लोनिंग की काफी पुरानी चर्चाएँ देखी हैं, जो बताती हैं कि समस्या काफी जटिल है, लेकिन ES6 के साथ एक बहुत ही सरल समाधान स्वयं प्रस्तुत करता है - मैं इसे नीचे रखूंगा और देखूंगा कि लोग इसे संतोषजनक मानते हैं या नहीं।

संपादित करें: यह सुझाव दिया जा रहा है कि मेरा प्रश्न डुप्लिकेट है; मैंने उस उत्तर को देखा, लेकिन यह 7 साल पुराना है और इसमें पूर्व-ईएस 6 जेएस का उपयोग करके बहुत ही जटिल उत्तर शामिल हैं। मैं सुझाव दे रहा हूं कि मेरा प्रश्न, जो ईएस 6 के लिए अनुमति देता है, में नाटकीय रूप से सरल समाधान है।

Question 2

यह जटिल है; मैंने बहुत कोशिश की! अंत में, इस एक-लाइनर ने मेरे कस्टम ES6 वर्ग उदाहरणों के लिए काम किया:

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

यह प्रोटोटाइप स्थापित करने से बचता है क्योंकि वे कहते हैं कि यह कोड को बहुत धीमा कर देता है।

यह प्रतीकों का समर्थन करता है, लेकिन गेटर्स / सेटर के लिए बिल्कुल सही नहीं है और गैर- एन्यूमरेबल गुणों ( ऑब्जेक्ट देखें ।) (डॉक्स ) के साथ काम नहीं कर रहा है । इसके अलावा, बुनियादी आंतरिक कक्षाओं (जैसे कि एरे, डेट, रेगएक्सपी, मैप, आदि) का क्लोन करना दुख की बात है कि कुछ व्यक्तिगत हैंडलिंग की आवश्यकता होती है।

निष्कर्ष: यह एक गड़बड़ है। चलो आशा करते हैं कि एक दिन एक देशी और स्वच्छ क्लोन कार्यक्षमता होगी।

Question 3

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

Object.assign की विशेषताओं पर ध्यान दें : यह एक उथले कॉपी करता है और क्लास के तरीकों की नकल नहीं करता है।

यदि आप प्रतिलिपि पर एक गहरी प्रतिलिपि या अधिक नियंत्रण चाहते हैं तो लॉश क्लोन कार्य हैं ।

Question 4

यह प्रोटोटाइप के एक्सटेंशन बनाने के लिए अनुशंसित नहीं है, यह उन मुद्दों के परिणामस्वरूप होगा जब आप अपने कोड / घटकों पर परीक्षण करेंगे। इकाई परीक्षण चौखटे स्वचालित रूप से आपके प्रोटोटाइप एक्सटेंशन को नहीं मानेंगे। तो यह एक अच्छा अभ्यास नहीं है। यहां प्रोटोटाइप एक्सटेंशन के अधिक स्पष्टीकरण हैं क्यों देशी वस्तुओं को एक बुरी प्रथा का विस्तार किया जा रहा है?

जावास्क्रिप्ट में वस्तुओं को क्लोन करने के लिए एक सरल या सीधा तरीका नहीं है। यहां "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 ():

परिणाम: कैसियो सेफिन

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));

गहरे क्लोन के साथ संबोधन के संदर्भ रखे जाएंगे। हालांकि डीपक्लोन प्रोटोटाइप को बंद कर दिया जाएगा, इसलिए डीपक्लोन.लॉगफुलनाम () काम नहीं करेगा।

3 -> 3 पार्टी पुस्तकालय:

एक अन्य विकल्प लोडशेड या अंडरस्कोर जैसी 3 पार्टी पार्टी लाइब्रेरी का उपयोग करेगा। वे एक नई वस्तु का निर्माण करेंगे और प्रत्येक मूल्य को मूल से नई वस्तु में कॉपी करते हैं, जो कि उनके संदर्भों को स्मृति में रखते हैं।

अंडरस्कोर: चलो क्लोनडॉर्स्कोर = _ (मूल) .clone ();

लोडश क्लोन: var cloneLodash = _.cloneDeep (मूल);

लॉश या अंडरस्कोर के नकारात्मक पहलू को आपकी परियोजना में कुछ अतिरिक्त पुस्तकालयों को शामिल करने की आवश्यकता थी। हालांकि वे अच्छे विकल्प हैं और उच्च प्रदर्शन परिणाम भी देते हैं।

Question 5

एक और एक लाइनर:

अधिकांश समय ... (दिनांक, RegExp, मैप, स्ट्रिंग, संख्या, सरणी के लिए काम करता है), btw, स्ट्रिंग स्ट्रिंग, संख्या थोड़ी अजीब है।

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

कॉपी कंस्ट्रक्टर के बिना उन वर्ग के लिए:

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

Question 6

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

Question 7

उदाहरण के लिए, यदि आप ओब्ज नामक एक वस्तु का क्लोन बनाना चाहते हैं, तो आप प्रसार ऑपरेटर का उपयोग कर सकते हैं:

let clone = { ...obj};

और यदि आप क्लोन किए गए ऑब्जेक्ट में कुछ भी बदलना या जोड़ना चाहते हैं:

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