जावास्क्रिप्ट में चीजों के लिए सिर्फ जटिल समझाने की कोशिश करना

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

शॉर्ट सर्किट

विकिपीडिया हमें बताता है कि क्लोजर अन्य कार्यों में परिभाषित कार्य हैं।
जावास्क्रिप्ट में क्लोज़र सभी कार्य हैं, क्योंकि वे "मुख्य फ़ंक्शन" के शरीर में निहित हैं।
वे क्या पसंद हैं? "बंद" का क्या अर्थ है?
शब्दावली का एक बहुत ही सरल अर्थ है जिसे आसानी से समझाया जा सकता है।
लॉकिंग फ़ंक्शन में न केवल फ़ंक्शन के संदर्भ में, बल्कि ऊपर के सभी स्तरों पर बनाए गए चर तक पहुंचने की क्षमता है।
मैं कोड का वर्णन करूंगा:

var a = 1; var b = 2; function closureFirstLevel() { return a + b; } function createrOfSecondLevelClosure() { var c = a + b; return function() { return c + closureFirstLevel() + a + b; } } var c = createrOfSecondLevelClosure(); function runCInAnotherContext() { return c(); } console.log(a,b); console.log('  a & b       :',closureFirstLevel()); console.log('  c (   ),        ,   a  b       :',c()); 

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

यदि आप runCInAnotherContext चलाते हैं तो यह फंक्शन 'c' को रन करेगा (आखिरकार, craitOfSecondLevelClosure एक फंक्शन लौटाता है, जिसे बचाया जा सकता है और वैरिएबल 'c' इस फंक्शन में डिक्लेयर किया गया है), जो कि इस प्रकार काम करेगा: वेरिएबल्स का योग और फंक्शन का परिणाम। runCInAnotherContext फ़ंक्शंस को संदर्भ से बाहर घोषित किया गया है, क्योंकि आरंभीकरण के दौरान इसने स्वयं को इन चरों में बंद कर दिया।

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

 var elem = document.getElementsByTagName('a'); for (var n = 0, l = elem.length; n < l; n++ ) { elem[n].onclick = function() { alert(n); return false; } } //         alert 

आप फ़ंक्शन को बंद कर सकते हैं:

 var elem = document.getElementsByTagName('a'); for (var n = 0, l = elem.length; n < l; n++ ) { elem[n].onclick = function(x) { return function() { alert(x); return false; } }(n); // ,            alert   click  . } 

और आप एक पूरी तरह से अलग दृष्टिकोण का भी उपयोग कर सकते हैं। सरणियों के लिए, forEach विधि (EcmaScript5 मानक का हिस्सा) लूप के लिए काफी काम नहीं करता है।
यह एक तर्क लेता है - एक फ़ंक्शन जो तत्वों को संसाधित करेगा और जो तर्क लेता है: elementOfArray, positionInArray, Array। और हर बार इस फ़ंक्शन को, स्वाभाविक रूप से, इसके संदर्भ में कहा जाता है।
कहीं यह केवल पहले तर्क को स्वीकार करने के लिए पर्याप्त है, कहीं अधिक है।
हम इस फ़ंक्शन को निष्पादन संदर्भ बदलकर अपनी नोडलिस्ट ऑब्जेक्ट के लिए कॉल कर सकते हैं। (यह कैसे काम करता है, इस बारे में अधिक जानकारी के लिए, इस बारे में और प्रोटोटाइप के बारे में लेख का हिस्सा देखें)।

 var elem = document.getElementsByTagName('a'); Array.prototype.forEach.call(elem,function(el,position) { el.onclick = function() { alert(position); return false; } }) 

यह कीवर्ड

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

 var a = { property1: 1, property2: 2, func: function() { console.log(this.property1 + this.property2, 'test'); return this.property1 + this.property2; } } console.log(a.func()); //this    'a',    . setTimeout(function() { console.log(a.func()); //this       'a',   ,   ,     'a' },100); setTimeout(a.func,101); //   , NaN (   undefined + undefined) //,      ,          ,    

सेटटाइमआउट के बजाय, आप सेट इन्टरवल या ईवेंट हैंडलर के बाइंडिंग को प्रतिस्थापित कर सकते हैं (उदाहरण के लिए: elem.onclick या addEventListener), या किसी अन्य तरीके से आस्थगित गणना करने के लिए, जिनमें से सभी एक या दूसरे तरीके से निष्पादन संदर्भ की हानि का कारण बनते हैं। और इसे बचाने के लिए, कई तरीके हैं।
आप इसे केवल एक अनाम फ़ंक्शन में लपेट सकते हैं, आप एक ऐसा संस्करण बना सकते हैं = यह चर और इसका उपयोग कर सकते हैं (इसके बजाय इसे तथाकथित फ़ंक्शन के बाहर एक वैरिएबल बनाएं, निश्चित रूप से), और सबसे सही तरीके का भी उपयोग करें - इसे जबरन बांधने के लिए। ऐसा करने के लिए, फ़ंक्शन में एक अंतर्निहित बाइंड विधि है (यह एक्मास्क्रिप्ट 5 मानक में उपलब्ध हो गया है, इसलिए आपको पुराने ब्राउज़रों के लिए इसके समर्थन को लागू करने की आवश्यकता है), जो एक नया फ़ंक्शन देता है जो वांछित संदर्भ और तर्क के लिए बाध्य है। उदाहरण:

 function logCurrentThisPlease() { console.log(this); } logCurrentThisPlease(); //window var a = {} a.logCurrentThisPlease = logCurrentThisPlease; a.logCurrentThisPlease(); //a setTimeout(a.logCurrentThisPlease, 100); //window,         setTimeout(function() { a.logCurrentThisPlease(); }, 200);//a setTimeout(function() { this.logCurrentThisPlease(); }.bind(a), 200);//a var that = a; function logCurrentThatPlease() { console.log(that); } logCurrentThatPlease(); //a setTimeout(logCurrentThatPlease, 200);//a var logCurrentBindedContextPlease = logCurrentThisPlease.bind(a); //  — ,    ,   —   logCurrentBindedContextPlease(); //a setTimeout(logCurrentBindedContextPlease, 200); //a 

खैर, एक अधिक जटिल उदाहरण है।
नियमित अंतराल पर काम करने वाले पुनरावर्ती कार्यों में हानि।

 var a = { i: 0, infinityIncrementation: function() { console.log( this.i++ ); if (this.i < Infinity) setTimeout(this.infinityIncrementation,500); } } a.infinityIncrementation(); // 0,undefined —  ,      a.infinityIncrementation = a.infinityIncrementation.bind(a); //     a.infinityIncrementation(); //0,1,2,3,4,5,6,7,8,9,10...Infinity-1 //  var b = { i: 0, infinityIncrementation: function() { console.log( this.i++ ); if (this.i < Infinity) setTimeout(function() {this.infinityIncrementation}.bind(this),500); } } b.infinityIncrementation(); //0,1,2,3,4,5,6,7,8,9,10...Infinity-1 

दूसरा काम करने का तरीका सही और पहला गलत क्यों है, लेख का प्रोटोटाइप भाग देखें।

फ़ंक्शन के तरीके जो आपको निष्पादन के संदर्भ को बदलने की अनुमति देते हैं - बाध्य करें, कॉल करें, लागू करें

Function.bind एक ऐसी विधि है जो पहले तर्क को उस संदर्भ के रूप में लेती है जिसमें इसे निष्पादित किया जाएगा (यह क्या होगा), और शेष एक असीमित संख्या में तर्कों के रूप में जिसके साथ लौटा गया फ़ंक्शन कहा जाएगा।
फ़ंक्शन .apply वह विधि है जो फ़ंक्शन को कॉल करती है, पहला तर्क वह तर्क है जो फ़ंक्शन में यह होगा, दूसरा तर्क का सरणी है जिसके साथ फ़ंक्शन को कहा जाएगा।
Function.call लागू करने के लिए समान है, केवल दूसरे तर्क के बजाय, फ़ंक्शन में असीमित संख्या में तर्क पारित किए जाएंगे।

ऑब्जेक्ट कंस्ट्रक्टर्स

कई इस तरह से निर्माण करते हैं:

 function SuperObjectConstructor() { this.a = 1; this.b = 2; this.summ = function() { return this.a + this.b; } } 

और यह बहुत सही नहीं है। यहाँ क्या गलत है? इस उदाहरण में, केवल एक चीज गलत है कि फ़ंक्शन को कंस्ट्रक्टर बॉडी में घोषित किया गया है। यह बुरा क्यों है?
सबसे पहले, फ़ंक्शन के प्रोटोटाइप को बदलकर इस तरह के फ़ंक्शन को ओवरराइड करने से काम नहीं होता है, अर्थात, इस कंस्ट्रक्टर के माध्यम से आरंभ होने वाले सभी ऑब्जेक्ट दूसरे को विधि बदलने में सक्षम नहीं होंगे। वंशानुक्रम की क्षमता सामान्य रूप से गायब हो जाती है।
दूसरी बात - अतिरिक्त मेमोरी खपत:

 var a = new SuperObjectConstructor(); var b = new SuperObjectConstructor(); console.log(a.summ == b.summ); //false 

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

 function SuperObjectConstructorRightVersion(a,b) { this.a = a || this.constructor.prototype.a; //      this.b = b || this.constructor.prototype.b; } SuperObjectConstructorRightVersion.prototype = { //   constructor: SuperObjectConstructorRightVersion, //          a: 1, b: 2, summ: function() { return this.a + this.b; } } /*   SuperObjectConstructorRightVersion.prototype.a = 1; SuperObjectConstructorRightVersion.prototype.b = 2; SuperObjectConstructorRightVersion.prototype.summ = function() {....};        . */ var abc = new SuperObjectConstructorRightVersion(); console.log(abc.summ());//3 var bfg = new SuperObjectConstructorRightVersion(5,20); console.log(bfg.summ());//25 

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

एक और सूक्ष्म बिंदु। यदि आप इस विधि को अन्य ऑब्जेक्ट्स में स्थानांतरित करना चाहते हैं या बस इसे किसी अन्य संदर्भ में उपयोग करना चाहते हैं, तो बाइंड का उपयोग करके ऑब्जेक्ट के संदर्भ में बाइंड का उपयोग न करें (प्रारंभिक रूप से निर्माण के दौरान, आप मूल रूप से इससे बाहर हो सकते हैं)।
यह हमें एम्बेडेड ऑब्जेक्ट्स करने की अनुमति देता है।
उदाहरण के लिए, आप अन्य एनेमरेबल (एनुमरेटेड) ऑब्जेक्ट्स के लिए forEach array विधि का उपयोग कर सकते हैं। उदाहरण के लिए, सभी प्रकार के नोडलिस्ट (जीवित और निर्जीव) (जैसा कि ऊपर दिखाया गया है)।

निष्कर्ष

अब आइए लेख के कंटेंट को मिलाकर एक बड़े रचनाकार को न लिखें।

 function Monster(name, hp, dmg) { this.name = name || this.constructor.prototype.name(); this.hp = hp || this.constructor.prototype.hp; this.dmg = dmg || this.constructor.prototype.dmg; } Monster.prototype = { constructor: Monster, hp: 10, dmg: 3, name: function() { return 'RandomMonster'+(new Date).getTime(); }, offerFight: function(enemy) { if (!enemy.acceptFight) { alert('this thing cant fight with me :('); return; } enemy.acceptFight(this); this.acceptFight(enemy); }, acceptFight: function(enemy) { var timeout = 50 + this.diceRollForRandom(); this.attack(enemy,timeout); }, diceRollForRandom: function() { return (Math.random() >= 0.5 ? 50 : 20); }, takeDmg: function(dmg) { console.log(this.name,' was damaged (',dmg,'),current HP is ',this.hp-dmg); return this.hp -= dmg; }, attack: function(enemy,timeout) { if (enemy.takeDmg(this.dmg) <= 0) { enemy.die(); this.win(); return; } this.to = setTimeout(function() {this.attack(enemy)}.bind(this),timeout); }, win: function() { alert('My name is ' + this.name + ', and Im a winner'); }, die: function() { alert('I died, ' + this.name); clearTimeout(this.to); } } var ChuckNorris = new Monster('Chuck Norris', 100, 100); var MikhailBoyarsky = new Monster('Misha Boyarsky', 200, 50); MikhailBoyarsky.offerFight(ChuckNorris); 

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