"यह" क्या है और यह क्या खाता है

सेबेस्टियन हेरमैन द्वारा फोटो।

शुभ दिन, दोस्तों!

मैं आपको डैनियल जेम्स के लेख "यह 'क्या है" का अनुवाद प्रस्तुत करता हूं । वह क्यों है? ” ।

"यह" क्या है और यह क्या खाता है

जब मैंने जावास्क्रिप्ट सीखना शुरू किया, तो यह अवधारणा मुझे बेहद भ्रामक लग रही थी।

परिचय

जेएस की लोकप्रियता में तेजी से वृद्धि को आंशिक रूप से कम प्रविष्टि सीमा से समझाया जा सकता है। फ़ंक्शंस जैसे फीचर्स और यह आमतौर पर उम्मीद के मुताबिक काम करते हैं। जेएस में एक पेशेवर बनने के लिए, आपको बहुत सारे छोटे विवरणों और विवरणों को जानने की आवश्यकता नहीं है (मैं इस बारे में बहस करूंगा - लगभग। प्रति।)। लेकिन एक बार, प्रत्येक डेवलपर इस के मूल्य के कारण एक त्रुटि का सामना करता है।

उसके बाद, आपको यह समझने की इच्छा है कि जेएस में यह कैसे काम करता है। क्या यह ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (OOP) की अवधारणा है? क्या JS एक ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग लैंग्वेज (OOJP) है? यदि आप इसे "Google" करते हैं, तो आपको कुछ प्रोटोटाइप के उल्लेख के जवाब में प्राप्त होगा। किस तरह के प्रोटोटाइप? जेएस में दिखाई देने से पहले "नया" कीवर्ड क्या इस्तेमाल किया गया था?

ये सभी बातें बारीकी से जुड़ी हैं। लेकिन यह समझाने से पहले कि यह कैसे काम करता है, मैं खुद को एक छोटे से विषयांतर की अनुमति दूंगा। मैं थोड़ा इस बारे में बात करना चाहता हूं कि जेएस ऐसा क्यों है।

जेएस में ओओपी

जेएस में प्रोटोटाइप प्रोग्रामिंग (इनहेरिटेंस) प्रतिमान OOP की पहचान में से एक है। जेएस वर्गों के आगमन से पहले भी, OOJP था। JS एक सरल भाषा है जो OOP की कुछ ही चीजों का उपयोग करती है। इनमें से सबसे महत्वपूर्ण हैं फ़ंक्शंस, क्लोज़र, यह, प्रोटोटाइप, ऑब्जेक्ट शाब्दिक और नया कीवर्ड।

क्लोजर के साथ एनकैप्सुलेशन और पुन: प्रयोज्यता

काउंटर क्लास बनाते हैं। इस वर्ग में काउंटर को रीसेट करने और बढ़ाने के लिए विधियाँ होनी चाहिए। हम कुछ इस तरह लिख सकते हैं:

function Counter(initialValue = 0){ let _count = initialValue return { reset: function(){ _count = 0 }, next: function(){ return ++_count } } } const myCounter = Counter() console.log(myCounter.next()) // 1 

इस मामले में, हमने इस या नए के बिना फ़ंक्शन और ऑब्जेक्ट शाब्दिक का उपयोग करने के लिए खुद को सीमित कर दिया। हां, हमें पहले ही OOP से कुछ मिला है। हमारे पास काउंटर के नए उदाहरण बनाने का अवसर है। काउंटर के प्रत्येक उदाहरण की अपनी आंतरिक चर गणना होती है। हमने इनकैप्सुलेशन और पुन: उपयोग को शुद्ध रूप से कार्यात्मक तरीके से लागू किया।

प्रदर्शन का मुद्दा

मान लीजिए हम एक प्रोग्राम लिख रहे हैं जिसमें बड़ी संख्या में काउंटरों का उपयोग किया गया है। प्रत्येक काउंटर के अपने तरीके रीसेट होंगे और अगला (काउंटर) (रीसेट)! = काउंटर () रीसेट करें)। प्रत्येक उदाहरण के प्रत्येक विधि के लिए इस तरह के क्लोजर बनाने से स्मृति की जबरदस्त मात्रा की आवश्यकता होगी! इस तरह की वास्तुकला "निरंतर" है। इसलिए, हमें काउंटर के प्रत्येक उदाहरण में स्टोर करने का एक तरीका खोजने की जरूरत है, केवल उन तरीकों का संदर्भ देता है जो वास्तव में उपयोग करता है (वास्तव में, यह सभी OOJPs, जैसे कि जावा) करते हैं।

हम इस समस्या को निम्नानुसार हल कर सकते हैं (अतिरिक्त भाषा सुविधाओं को शामिल किए बिना):

 let Counter = { reset: function(counter){ counter._count = 0 }, next: function(counter){ return ++counter._count }, new: function(initialValue = 0){ return { _count: initialValue } } } const myCounter = Counter.new() console.log(Counter.next(myCounter)) // 1 

यह दृष्टिकोण प्रदर्शन की समस्या को हल करता है, लेकिन हमें एक गंभीर समझौता करना था, जिसमें प्रोग्राम के निष्पादन में उच्च कोटि के प्रोग्रामर की भागीदारी की आवश्यकता होती है (यह सुनिश्चित करना कि कोड काम करता है)। अतिरिक्त उपकरणों के बिना, हमें इस दृष्टिकोण से संतुष्ट रहना होगा।

इससे बचाव में बाधा आती है

हम इसका उपयोग करके अपने उदाहरण को फिर से लिखते हैं:

 let Counter = { reset: function(){ this._count = 0 }, next: function(){ return ++this._count }, new: function(initialValue = 0){ return { _count: initialValue, //          reset: Counter.reset, next: Counter.next } } } const myCounter = Counter.new() myCounter.next() // ,  reset     myCounter (Counter.new()).reset() console.log(myCounter.next()) // 2 

ध्यान दें कि हम अभी भी सरल फ़ंक्शंस रीसेट कर रहे हैं और अगला (Counter.new ()। रीसेट == Counter.new ()। Reset)। पिछले उदाहरण में, कार्यक्रम को काम करने के लिए, हमें संयुक्त रूप से कार्यान्वित तरीकों के लिए एक उदाहरण विवरणक प्रदान करने के लिए मजबूर किया गया था। अब हम सिर्फ myCounter.next () को कॉल करते हैं और इसका उपयोग करने वाले इंस्टेंस को देखें। लेकिन यह कैसे काम करता है? काउंटर ऑब्जेक्ट में रीसेट और अगला घोषित किया जाता है। जेएस को कैसे पता है कि किसी फ़ंक्शन को कॉल करते समय इसका क्या अर्थ है?

जेएस में फंक्शन कॉलिंग

आप यह अच्छी तरह से जानते हैं कि JS में फ़ंक्शन एक कॉल विधि है (एक लागू पद्धति भी है; इन विधियों के बीच का अंतर महत्वपूर्ण नहीं है। अंतर यह है कि हम मापदंडों को कैसे पास करते हैं: एक सरणी के रूप में लागू होते हैं, कॉमा द्वारा अलग किए गए कॉल में - लगभग)। । कॉल का उपयोग करते हुए, आप तय करते हैं कि फ़ंक्शन का नाम होने पर इसका क्या अर्थ होगा:

 const myCounter = Counter.new() Counter.next.call(myCounter) 

जब हम फ़ंक्शन को कॉल करते हैं तो यह वास्तव में डॉट नोटेशन दृश्य के पीछे होता है। lhs.fn () fn.call (lhs) के समान है।

इस प्रकार, यह एक विशेष पहचानकर्ता है जिसे फ़ंक्शन कहा जाता है।

समस्याएं शुरू होती हैं

मान लीजिए कि आप एक काउंटर बनाना चाहते हैं और हर सेकंड उसका मूल्य बढ़ाते हैं। यह कैसे करना है:

 const myCounter = Counter.new() setInterval(myCounter.next, 1000) //    console.log(`Why is ${myCounter.next()} still 0?`) //  myCounter.next()    0? 

क्या आपको यहाँ कोई गलती दिखती है? जब सेटइंटरवल शुरू होता है, तो इसका मान अपरिभाषित होता है, इसलिए ऐसा कुछ नहीं होता है। इस समस्या को निम्नानुसार हल किया जा सकता है:

 const myCounter = Counter.new() setInterval(function(){ myCounter.next() }, 1000) 

बाँध के बारे में थोड़ा

इस समस्या को हल करने का एक और तरीका है:

 function bindThis(fn, _this){ return function(...args){ return fn.call(_this, ...args) } } const myCounter = Counter.new() setInterval(bindThis(myCounter.next, myCounter), 1000) 

BindThis factory function का उपयोग करके, हम यह सुनिश्चित कर सकते हैं कि Counter.next हमेशा myCounter को इस रूप में कहता है, भले ही नए फ़ंक्शन को कैसे कहा जाए। वास्तव में, हम काउंटर.नेक्स्ट के फ़ंक्शन को नहीं बदलते हैं। जेएस में एक अंतर्निहित बांध विधि है। इसलिए, हम इस तरह से ऊपर के उदाहरण को फिर से लिख सकते हैं: setInterval (myCounter.next.bind (myCounter), 1000)।

हम प्रोटोटाइप के साथ काम करते हैं

फिलहाल, हमारे पास एक अच्छा काउंटर क्लास है, लेकिन यह अभी भी "कुटिल" है। ये निम्नलिखित पंक्तियाँ हैं:

 // ... reset: Counter.reset, next: Counter.next, // ... 

हमें अपने उदाहरणों के साथ कक्षा के तरीकों को साझा करने के लिए बेहतर तरीके की आवश्यकता है। प्रोटोटाइप इसका एक उत्कृष्ट काम करते हैं। यदि आप किसी ऐसे फ़ंक्शन या ऑब्जेक्ट की संपत्ति का उल्लेख करते हैं जो मौजूद नहीं है, तो JS इस फ़ंक्शन या ऑब्जेक्ट के प्रोटोटाइप में (फिर प्रोटोटाइप प्रोटोटाइप में और इसी तरह प्रोटोटाइप श्रृंखला के शीर्ष पर स्थित Object.prototype पर इस संपत्ति की तलाश करेगा। ट्रांस।) आप Object.setPrototypeOf का उपयोग करके किसी ऑब्जेक्ट के प्रोटोटाइप को परिभाषित कर सकते हैं। आइए प्रोटोटाइप का उपयोग करके हमारे काउंटर क्लास को फिर से लिखें:

 let Counter = { reset: function(){ this._count = 0 }, next: function(){ return ++this._count }, new: function(initialValue = 0){ this._count = initialValue } } function newInstanceOf(klass, ...args){ //       "klass",  "class"   const instance = {} Object.setPrototypeOf(instance, klass) instance.new(...args) return instance } const myCounter = newInstanceOf(Counter) console.log(myCounter.next()) // 1 

कीवर्ड "नया"

सेटप्रोटोटाइपऑफ का उपयोग करना बहुत ही समान है कि "नया" ऑपरेटर कैसे काम करता है। अंतर यह है कि नया पारित फ़ंक्शन के प्रोटोटाइप निर्माता का उपयोग करेगा। इसलिए, हमारे तरीकों के लिए एक ऑब्जेक्ट बनाने के बजाय, हम उन्हें फंक्शन कंस्ट्रक्टर के प्रोटोटाइप में पास करते हैं:

 function Counter(initialValue = 0){ this._count = initialValue } Counter.prototype.reset = function(){ this._count = 0 } Counter.prototype.next = function(){ return ++this._count } const myCounter = new Counter() console.log(`${myCounter.next()}`) // 1 

अंत में, हमारे पास कोड उस रूप में है जिसमें यह व्यवहार में पाया जा सकता है। जेएस में कक्षाएं दिखाई देने से पहले, यह कक्षाएं बनाने और आरंभ करने के लिए मानक दृष्टिकोण था।

कीवर्ड "वर्ग"

मुझे उम्मीद है कि अब आप समझ गए हैं कि हम फ़ंक्शन कंस्ट्रक्टर के प्रोटोटाइप का उपयोग क्यों करते हैं और यह फ़ंक्शन विधियों में कैसे काम करता है। हालाँकि, हमारे कोड में सुधार किया जा सकता है। सौभाग्य से, आज जेएस में कक्षाएं घोषित करने का एक बेहतर तरीका है:

 class Counter { reset(){ this._count = 0 } next(){ return ++this._count } constructor(initialValue = 0){ this._count = initialValue } } const myCounter = new Counter() console.log(`${myCounter.next()}`) // 1 

कीवर्ड "क्लास" विशेष रूप से "कैट" के तहत कुछ भी नहीं करता है। आप इसे सिंटैक्टिक शुगर, "प्रोटोटाइप" दृष्टिकोण के लिए एक आवरण के रूप में सोच सकते हैं। यदि आप ES3 के लिए ट्रांसपोर्टर को उन्मुख करते हैं, तो आपको कुछ इस तरह मिलेगा:

 var Counter = /** @class **/ (function(){ function Counter(initialValue){ if(initialValue === void 0) { initialValue = 0 } this._count = initialValue } Counter.prototype.reset = function(){ this._count = 0 } Counter.prototype.next = function(){ ++this._count } return Counter }()); var myCounter = new Counter() console.log(myCounter.next()) 

ध्यान दें कि ट्रांसपिलर उत्पन्न कोड जो पिछले उदाहरण के लगभग समान है।

तीर कार्य

यदि आप पिछले 5 वर्षों से JS में कोड लिख रहे हैं, तो आपको आश्चर्य हो सकता है कि मैं तीर के कार्यों का उल्लेख करता हूं। मेरी सलाह: हमेशा तीर फ़ंक्शन का उपयोग करें जब तक आपको वास्तव में एक नियमित फ़ंक्शन की आवश्यकता न हो। ऐसा हुआ है कि क्लास के कंस्ट्रक्टर और तरीकों की परिभाषा केवल यही है जब हमें साधारण कार्यों का उपयोग करना चाहिए। एरो फ़ंक्शंस की विशेषताओं में से एक मोटापा है।

यह तीर के कार्यों में

कुछ लोग मान सकते हैं कि तीर के कार्य निर्मित होने पर इसका वर्तमान मूल्य लेते हैं। यह एक तकनीकी दृष्टिकोण से गलत है (इसका अर्थ परिभाषित नहीं किया गया है, यह शाब्दिक वातावरण से लिया गया है), लेकिन यह एक अच्छा मानसिक मॉडल है। इस तरह एक तीर समारोह:

 const myArrowFunction = () => { this.doSomething() } 

आप इसे इस तरह से फिर से लिख सकते हैं:

 const _this = this const myRegularFunction = function(){ _this.doSomething() } 

आपका ध्यान के लिए धन्यवाद। ऑल द बेस्ट।