जावास्क्रिप्ट में विरासत में मिली कक्षाओं को शुरू करने का एक अप्रत्याशित क्रम

आज मेरे पास जेएस कोड को फिर से लाने का एक छोटा सा काम था, और मुझे भाषा की एक अप्रत्याशित विशेषता सामने आई, जिसके बारे में मेरे प्रोग्रामिंग अनुभव के 7 साल से अधिक बहुतों से घृणा की भाषा ने सोचा नहीं था और नहीं आया था।

इसके अलावा, मुझे रूसी या अंग्रेजी इंटरनेट पर कुछ भी नहीं मिला, और इसलिए इसे प्रकाशित करने का फैसला किया कि यह बहुत दिलचस्प नहीं है, लेकिन उपयोगी नोट नहीं है।

पारंपरिक और अर्थहीन foo/bar स्थिरांक का उपयोग नहीं करने के लिए, मैं सीधे उस उदाहरण पर दिखाऊंगा जो हमारे पास परियोजना में था, लेकिन फिर भी आंतरिक तर्क का एक गुच्छा और नकली मूल्यों के बिना। याद रखें कि सभी समान हैं, उदाहरण काफी सिंथेटिक थे।

हम एक रेक पर कदम रखते हैं

तो हमारे पास एक वर्ग है:

 class BaseTooltip { template = 'baseTemplate' constructor(content) { this.render(content) } render(content) { console.log('render:', content, this.template) } } const tooltip = new BaseTooltip('content') // render: content baseTemplate 

सब कुछ तार्किक है

और फिर हमें एक और प्रकार का टूलटिप बनाने की आवश्यकता थी जिसमें template फ़ील्ड बदलता है

 class SpecialTooltip extends BaseTooltip { template = 'otherTemplate' } 

और यहां एक आश्चर्य ने मुझे इंतजार किया, क्योंकि जब एक नए प्रकार की वस्तु बनाते हैं, तो निम्न होता है

 const specialTooltip = new SpecialTooltip('otherContent') // render: otherContent baseTemplate // ^  

रेंडर मेथड को BaseTooltip.prototype.template साथ BaseTooltip.prototype.template गया था, न कि SpecialTooltip.prototype.template , जैसा कि मुझे उम्मीद थी।

हम सावधानी से रेक पर कदम रखते हैं, शूटिंग वीडियो

चूंकि क्रोम DevTools नहीं जानते कि क्लास फ़ील्ड कैसे असाइन करें, तो आपको यह समझने के लिए ट्रिक्स का सहारा लेना होगा कि क्या हो रहा है। एक छोटे सहायक का उपयोग करते हुए, हम एक चर के लिए असाइनमेंट के क्षण को लॉग करते हैं

 function logAndReturn(value) { console.log(`set property=${value}`) return value } class BaseTooltip { template = logAndReturn('baseTemplate') constructor(content) { console.log(`call constructor with property=${this.template}`) this.render(content) } render(content) { console.log(content, this.template) } } const tooltip = new BaseTooltip('content') // set property=baseTemplate // called constructor BaseTooltip with property=baseTemplate // render: content baseTemplate 

और जब हम विरासत के वर्ग के लिए इस दृष्टिकोण को लागू करते हैं, तो हमें निम्नलिखित अजीब मिलते हैं:

 class SpecialTooltip extends BaseTooltip { template = logAndReturn('otherTemplate') } const tooltip = new SpecialTooltip('content') // set property=baseTemplate // called constructor SpecialTooltip with property=baseTemplate // render: content baseTemplate // set property=otherTemplate 

मुझे यकीन था कि ऑब्जेक्ट के फ़ील्ड्स को पहले इनिशियलाइज़ किया जाता है, और फिर बाकी कंस्ट्रक्टर को बुलाया जाता है। यह पता चला है कि सब कुछ पेचीदा है।

हम रेक पर कदम रखते हैं, डंठल को चित्रित करते हैं

हम कंस्ट्रक्टर में एक और पैरामीटर जोड़कर स्थिति को जटिल करते हैं, जिसे हम अपनी वस्तु पर असाइन करते हैं

 class BaseTooltip { template = logAndReturn('baseTemplate') constructor(content, options) { this.options = logAndReturn(options) // <---   console.log(`called constructor ${this.constructor.name} with property=${this.template}`) this.render(content) } render(content) { console.log(content, this.template, this.options) // <---   } } class SpecialTooltip extends BaseTooltip { template = logAndReturn('otherTemplate') } const tooltip = new SpecialTooltip('content', 'someOptions') //    : // set property=baseTemplate // set property=someOptions // called constructor SpecialTooltip with property=baseTemplate // render: content baseTemplate someOptions // set property=otherTemplate 

और केवल डिबग का यह तरीका (ठीक है, अलर्ट नहीं) थोड़ा स्पष्ट किया

 const BaseTooltip = Marionette.Object.extend({ template: 'baseTemplate', initialize(content) { this.render(content) }, render(content) { console.log(content, this.template) }, }) const SpecialTooltip = BaseTooltip.extend({ template: 'otherTemplate' }) 

धक्कों की गिनती करो

परिणाम:

विरासत में मिली कक्षा का एक ऑब्जेक्ट बनाते समय, जो कुछ भी हो रहा है उसका क्रम निम्नानुसार है:

• विरासत में मिली कक्षा की घोषणा से ऑब्जेक्ट फ़ील्ड को आरम्भ करना
• विरासत में मिली श्रेणी के निर्माणकर्ता का निष्पादन (निर्माणकर्ता के अंदर खेतों का आरंभ सहित)
• इसके बाद ही वर्तमान वर्ग से वस्तु के क्षेत्रों का प्रारंभ
• वर्तमान वर्ग के निर्माता को निष्पादित करना

हम रेक को खलिहान में लौटाते हैं

विशेष रूप से, मेरी स्थिति में, समस्या को या तो मिश्रण के माध्यम से हल किया जा सकता है या टेम्पलेट को निर्माणकर्ता को पास किया जा सकता है , लेकिन जब एप्लिकेशन लॉजिक को बड़ी संख्या में फ़ील्ड्स को ओवरराइड करने की आवश्यकता होती है, तो यह एक गंदा तरीका बन जाता है।

समस्या को हल करने के तरीके के बारे में अपने सुझावों को पढ़ना अच्छा रहेगा।