📌 📪 🔄 प्रोटोटाइप, क्लोजर, और प्रदर्शन के बारे में आपको जो कुछ भी जानना है 🦕 🕵️ 💻

इतना सरल नहीं है

पहली नज़र में, जावास्क्रिप्ट काफी सरल भाषा की तरह लग सकता है। शायद यह काफी लचीली वाक्य रचना के कारण है। या अन्य प्रसिद्ध भाषाओं के साथ समानता के कारण, जैसे कि जावा। खैर, या जावा, रूबी, या .NET की तुलना में अपेक्षाकृत कम डेटा प्रकारों के कारण।

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

जावास्क्रिप्ट में, डेटा खोजें दो चीजों पर निर्भर करती हैं: प्रोटोटाइप विरासत और गुंजाइश चेन। इन दोनों तंत्रों को समझना डेवलपर के लिए नितांत आवश्यक है, क्योंकि यह संरचना में सुधार की ओर जाता है, और, अक्सर, कोड प्रदर्शन में भी।

प्रोटोटाइप श्रृंखला में गुण प्राप्त करना

जावास्क्रिप्ट में एक संपत्ति तक पहुँचने पर, ऑब्जेक्ट प्रोटोटाइप की पूरी श्रृंखला स्कैन की जाती है।

जावास्क्रिप्ट में प्रत्येक फ़ंक्शन एक ऑब्जेक्ट है। जब एक फ़ंक्शन को new

ऑपरेटर के साथ बुलाया जाता है, तो एक नया ऑब्जेक्ट बनाया जाता है।

 function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } var p1 = new Person('John', 'Doe'); var p2 = new Person('Robert', 'Doe');

ऊपर दिए गए उदाहरण में, p1

और p2

दो अलग-अलग वस्तुएं हैं, जिनमें से प्रत्येक को Person

कंस्ट्रक्टर का उपयोग करके बनाया गया है। निम्नलिखित उदाहरण से पता चलता है, वे Person

स्वतंत्र उदाहरण हैं:

 console.log(p1 instanceof Person); //  'true' console.log(p2 instanceof Person); //  'true' console.log(p1 === p2); //  'false'

एक बार जब जावास्क्रिप्ट ऑब्जेक्ट्स में फ़ंक्शन होते हैं, तो उनके पास गुण हो सकते हैं। उनके पास सबसे महत्वपूर्ण संपत्ति है जिसे prototype

कहा जाता है।

prototype

, जो कि एक वस्तु है, को माता-पिता के प्रोटोटाइप से बार-बार विरासत में मिला है, जब तक कि यह बहुत ऊपर के स्तर तक नहीं पहुंच जाता। इसे अक्सर प्रोटोटाइप श्रृंखला कहा जाता है। श्रृंखला की शुरुआत में हमेशा Object.prototype

(यानी, प्रोटोटाइप श्रृंखला के शीर्ष स्तर पर) होता है; इसमें hasProperty()

, isPrototypeOf()

, isPrototypeOf()

, आदि के तरीके शामिल हैं।

प्रत्येक फ़ंक्शन के प्रोटोटाइप को अपने स्वयं के तरीकों और गुणों द्वारा विस्तारित किया जा सकता है।

किसी ऑब्जेक्ट की नई आवृत्ति बनाते समय ( new

ऑपरेटर के साथ फ़ंक्शन को कॉल करके), यह प्रोटोटाइप के माध्यम से सभी गुणों को विरासत में प्राप्त करता है। हालांकि, ध्यान रखें कि उदाहरणों में प्रोटोटाइप ऑब्जेक्ट तक सीधी पहुंच नहीं है, केवल इसके गुणों तक।

 //   Person    //  'getFullName': Person.prototype.getFullName = function() { return this.firstName + ' ' + this.lastName; } //  p1     console.log(p1.getFullName()); //  'John Doe' //   p1      'prototype'... console.log(p1.prototype); //  'undefined' console.log(p1.prototype.getFullName()); //

यह एक महत्वपूर्ण और सूक्ष्म बिंदु है: भले ही p1

को getFullName

विधि getFullName

करने से पहले बनाया गया था, फिर भी यह उस तक पहुंच रखेगा, क्योंकि इसका प्रोटोटाइप Person

प्रोटोटाइप था।

(यह उल्लेखनीय है कि ब्राउज़र __proto__

संपत्ति में प्रोटोटाइप लिंक को __proto__

हैं, लेकिन इसका उपयोग वास्तव में कर्म को __proto__

है, कम से कम क्योंकि यह ECMAScript मानक में नहीं है, इसलिए इसका उपयोग न करें )।

चूंकि Person

p1

के उदाहरण में प्रोटोटाइप ऑब्जेक्ट तक सीधी पहुंच नहीं है, इसलिए हमें इस तरह से p1

में getFullName

विधि को फिर से लिखना होगा:

 //    p1.getFullName, ** p1.prototype.getFullName, //  p1.prototype : p1.getFullName = function(){ return '  '; }

अब p1

की अपनी getFullName

प्रॉपर्टी है। लेकिन उदाहरण p2

में इस संपत्ति का अपना कार्यान्वयन नहीं है। तदनुसार, p1.getFullName

लिए कॉल ऑब्जेक्ट p1

की मूल विधि को खींचती है, जबकि p2.getFullName()

लिए कॉल प्रोटोटाइप श्रृंखला के लिए Person

।

 console.log(p1.getFullName()); //  '  ' console.log(p2.getFullName()); //  'Robert Doe'

सावधान रहने की एक और चीज़ किसी वस्तु के प्रोटोटाइप को गतिशील रूप से बदलने की क्षमता है:

 function Parent() { this.someVar = 'someValue'; }; //   Parent,     'sayHello' Parent.prototype.sayHello = function(){ console.log('Hello'); }; function Child(){ //      //    . Parent.call(this); }; //   Child     'otherVar'... Child.prototype.otherVar = 'otherValue'; // ...       Child  Parent // (     'otherVar', //     Child  'otherVar'   ) Child.prototype = Object.create(Parent.prototype); var child = new Child(); child.sayHello(); //  'Hello' console.log(child.someVar); //  'someValue' console.log(child.otherVar); //  'undefined'

प्रोटोटाइप वंशानुक्रम का उपयोग करते समय, याद रखें कि माता-पिता से विरासत के बाद बच्चे के प्रोटोटाइप के गुणों को निर्धारित किया जाना चाहिए।

इसलिए, प्रोटोटाइप श्रृंखला में गुण प्राप्त करना निम्नानुसार काम करता है:

यदि ऑब्जेक्ट में वांछित नाम के साथ एक संपत्ति है, तो उसे वापस कर दिया जाता है। ( hasOwnProperty

पद्धति का उपयोग करके, hasOwnProperty

सत्यापित hasOwnProperty

सकते हैं कि यह वास्तव में ऑब्जेक्ट की अपनी संपत्ति है)।
यदि ऑब्जेक्ट में समान नहीं है, तो ऑब्जेक्ट के प्रोटोटाइप को देखें।
यदि यहां कुछ भी नहीं है, तो हम पहले से ही अपने स्वयं के प्रोटोटाइप की जांच करते हैं।
और इसी तरह, जब तक हमें वांछित संपत्ति नहीं मिल जाती।
अगर हमें Object.prototyp मिलता है, लेकिन कुछ भी नहीं मिलता है, तो संपत्ति को सेट नहीं माना जाता है।

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

कार्यक्षेत्र श्रृंखला के माध्यम से परिवर्तनीय खोज

एक और जावास्क्रिप्ट खोज इंजन बंद होने पर आधारित है।

यह समझने के लिए कि यह कैसे काम करता है, निष्पादन के संदर्भ के रूप में इस तरह की अवधारणा को पेश करना आवश्यक है।

जावास्क्रिप्ट में, दो प्रकार के निष्पादन संदर्भ हैं:

वैश्विक, जब जावास्क्रिप्ट चलाया जाता है।
किसी फ़ंक्शन को कॉल करने पर स्थानीय, बनाया जाता है

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

 //   var message = 'Hello World'; var sayHello = function(n){ //   1      var i = 0; var innerSayHello = function() { //   2      console.log((i + 1) + ': ' + message); //   2   } for (i = 0; i < n; i++) { innerSayHello(); } //   1   }; sayHello(3); // : // 1: Hello World // 2: Hello World // 3: Hello World

प्रत्येक निष्पादन संदर्भ में, चर को हल करने के लिए उपयोग की जाने वाली गुंजाइश श्रृंखला नामक एक विशेष वस्तु है। श्रृंखला अनिवार्य रूप से वर्तमान से वैश्विक तक उपलब्ध निष्पादन संदर्भों का ढेर है। (अधिक सटीक होने के लिए, स्टैक के शीर्ष पर स्थित ऑब्जेक्ट को सक्रियण ऑब्जेक्ट कहा जाता है और इसमें शामिल हैं: निष्पादन योग्य फ़ंक्शन के लिए स्थानीय चर का संदर्भ, फ़ंक्शन के दिए गए तर्क और दो "विशेष" ऑब्जेक्ट्स: this

और arguments

)।

ध्यान दें कि आरेख में this

कैसे डिफ़ॉल्ट रूप से window

ऑब्जेक्ट को इंगित करता है, और वैश्विक ऑब्जेक्ट में अन्य ऑब्जेक्ट्स, जैसे console

और location

।

स्कोप की श्रृंखला के माध्यम से एक चर को हल करने की कोशिश करते समय, वर्तमान संदर्भ को पहले वांछित चर के लिए जांचा जाता है। यदि कोई मेल नहीं मिलता है, तो श्रृंखला में अगले संदर्भ ऑब्जेक्ट की जांच की जाती है, और इसी तरह, जब तक वांछित नहीं मिलता है। यदि कुछ नहीं मिला, तो एक ReferenceError

।

इसके अलावा, यह ध्यान रखना महत्वपूर्ण है कि यदि try-catch

या ब्लॉक के with

सामना किया जाता है तो एक नया दायरा जोड़ा जाता है। इन सभी मामलों में, दृश्यता क्षेत्रों की श्रृंखला के शीर्ष पर एक नई वस्तु बनाई और रखी जाती है।

 function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; function persist(person) { with (person) { //  'person'      //       "with",        // 'firstName'  'lastName',    person.firstName  // person.lastName if (!firstName) { throw new Error('FirstName is mandatory'); } if (!lastName) { throw new Error('LastName is mandatory'); } } try { person.save(); } catch(error) { //   ,   'error' console.log('Impossible to store ' + person + ', Reason: ' + error); } } var p1 = new Person('John', 'Doe'); persist(p1);

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

 for (var i = 0; i < 10; i++) { /* ... */ } // 'i'     ! console.log(i); //  '10'

अधिकांश अन्य भाषाओं में, ऊपर दिए गए कोड में त्रुटि होगी क्योंकि चर का "जीवन" (यानी, गुंजाइश) ब्लॉक के लिए सीमित होगा। लेकिन जावास्क्रिप्ट में नहीं। मुझे स्कोप चेन के शीर्ष पर सक्रियण ऑब्जेक्ट में जोड़ा जाता है, और ऑब्जेक्ट डिलीट होने तक वहीं रहता है, जो स्टैक से निष्पादन संदर्भ हटाए जाने के बाद होता है। इस व्यवहार को अस्थायी चर के रूप में जाना जाता है।

यह उल्लेखनीय है कि जावास्क्रिप्ट में ब्लॉक-लेवल स्कोप को नए let

कीवर्ड के आगमन के साथ पेश किया गया था। यह पहले से ही जावास्क्रिप्ट 1.7 में उपलब्ध है और ECMAScript 6 के साथ आधिकारिक तौर पर समर्थित कीवर्ड बनना चाहिए।

प्रदर्शन प्रभाव

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

हर बार प्रॉपर्टी चेन या स्कोप के साथ जिन सर्च ऑपरेशन्स का वर्णन किया गया है उन्हें प्रॉपर्टी या वेरिएबल कहा जाता है। जब यह लूप में या किसी अन्य भारी ऑपरेशन के दौरान होता है, तो आप तुरंत कोड प्रदर्शन पर प्रभाव महसूस करेंगे, विशेष रूप से जावास्क्रिप्ट के एकल-थ्रेडेड प्रकृति की पृष्ठभूमि के खिलाफ, जो कई ऑपरेशनों को एक साथ निष्पादित होने से रोकता है।

 var start = new Date().getTime(); function Parent() { this.delta = 10; }; function ChildA(){}; ChildA.prototype = new Parent(); function ChildB(){} ChildB.prototype = new ChildA(); function ChildC(){} ChildC.prototype = new ChildB(); function ChildD(){}; ChildD.prototype = new ChildC(); function ChildE(){}; ChildE.prototype = new ChildD(); function nestedFn() { var child = new ChildE(); var counter = 0; for(var i = 0; i < 1000; i++) { for(var j = 0; j < 1000; j++) { for(var k = 0; k < 1000; k++) { counter += child.delta; } } } console.log('Final result: ' + counter); } nestedFn(); var end = new Date().getTime(); var diff = end - start; console.log('Total time: ' + diff + ' milliseconds');

ऊपर दिए गए कोड में, हमारे पास एक लंबा वंशानुक्रम वृक्ष और तीन नेस्टेड लूप हैं। सबसे गहरे लूप में, काउंटर delta

वैरिएबल के मूल्य में वृद्धि करता है। लेकिन डेल्टा का मूल्य विरासत के पेड़ के बहुत ऊपर निर्धारित किया जाता है! इसका मतलब यह है कि हर बार जब आप child.delta

कहते हैं child.delta

पूरे पेड़ को ऊपर से नीचे तक स्कैन किया जाता है । यह प्रदर्शन पर प्रतिकूल प्रभाव डाल सकता है।

यह महसूस करने के बाद, हम आसानी से nestedFn

के प्रदर्शन को बेहतर बना सकते हैं।

 function nestedFn() { var child = new ChildE(); var counter = 0; var delta = child.delta; // cache child.delta value in current scope for(var i = 0; i < 1000; i++) { for(var j = 0; j < 1000; j++) { for(var k = 0; k < 1000; k++) { counter += delta; // no inheritance tree traversal needed! } } } console.log('Final result: ' + counter); } nestedFn(); var end = new Date().getTime(); var diff = end - start; console.log('Total time: ' + diff + ' milliseconds');

स्वाभाविक रूप से, हम ऐसा कर सकते हैं यदि हम केवल यह सुनिश्चित करने के लिए जानते हैं कि छोरों के निष्पादन के दौरान child.delta

का मूल्य नहीं बदलेगा; अन्यथा, हमें समय-समय पर मौजूदा मूल्य के साथ परिवर्तनीय मूल्य को अपडेट करना होगा।

तो, चलो nestedFn

दोनों संस्करणों को nestedFn

और देखते हैं कि उनके बीच एक ध्यान देने योग्य प्रदर्शन अंतर है या नहीं।

 diego@alkadia:~$ node test.js Final result: 10000000000 Total time: 8270 milliseconds

इसे पूरा होने में लगभग 8 सेकंड का समय लगा। यह बहुत कुछ है।

अब देखते हैं कि हमारा अनुकूलित संस्करण क्या है:

 diego@alkadia:~$ node test2.js Final result: 10000000000 Total time: 1143 milliseconds

इस बार केवल एक सेकंड। बहुत तेज!

भारी प्रश्नों को रोकने के लिए स्थानीय चर का उपयोग किसी संपत्ति (प्रोटोटाइप श्रृंखला के साथ) की खोज करने और चर (गुंजाइश के माध्यम से) को हल करने के लिए दोनों का उपयोग किया जाता है।

इसके अलावा, मूल्यों के इस तरह के "कैशिंग" (स्थानीय चर में) कुछ सामान्य जावास्क्रिप्ट पुस्तकालयों का उपयोग करते समय एक लाभ देता है। उदाहरण के लिए, jQuery को लें। यह "चयनकर्ताओं" का समर्थन करता है, एक या एक से अधिक DOM तत्वों को प्राप्त करने के लिए एक तंत्र। जिस आसानी से ऐसा होता है "चयनकर्ता" यह भूल जाता है कि चयनकर्ता को खोजना कितना मुश्किल काम है। इसलिए, एक चर में खोज परिणामों को संग्रहीत करना प्रदर्शन में एक ठोस वृद्धि देता है।

 //     DOM  $('.container') "n"  for (var i = 0; i < n; i++) { $('.container').append(“Line “+i+”<br />”); } //  ... // ,    $('.container')  , //     DOM "n"  var $container = $('.container'); for (var i = 0; i < n; i++) { $container.append("Line "+i+"<br />"); } //      ... //     DOM  $('.container')  , //   DOM    var $html = ''; for (var i = 0; i < n; i++) { $html += 'Line ' + i + '<br />'; } $('.container').append($html);

दूसरा दृष्टिकोण पहले की तुलना में काफी बेहतर प्रदर्शन देगा, विशेष रूप से बड़ी संख्या में तत्वों वाले पृष्ठों पर।

संक्षेप में देना

जावास्क्रिप्ट डेटा खोज अन्य भाषाओं से काफी अलग है, और इसमें कई बारीकियां हैं। इसलिए, इस भाषा को वास्तव में मास्टर करने के लिए इसकी अवधारणाओं को पूरी तरह से और सबसे महत्वपूर्ण रूप से सही ढंग से समझना आवश्यक है। यह ज्ञान क्लीनर, अधिक विश्वसनीय कोड और बेहतर प्रदर्शन लाएगा।

प्रोटोटाइप, क्लोजर, और प्रदर्शन के बारे में आपको जो कुछ भी जानना है

इतना सरल नहीं है

प्रोटोटाइप श्रृंखला में गुण प्राप्त करना

कार्यक्षेत्र श्रृंखला के माध्यम से परिवर्तनीय खोज

प्रदर्शन प्रभाव

संक्षेप में देना

More articles: