जावास्क्रिप्ट मूल बातें और गलत धारणाएँ

ऑब्जेक्ट्स, क्लासेस, कंस्ट्रक्टर्स

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

जावास्क्रिप्ट में कोई परिचित वर्ग नहीं है, लेकिन ऐसे निर्माण कार्य हैं जो कुछ एल्गोरिदम के अनुसार वस्तुओं को उत्पन्न करते हैं (नया ऑपरेटर देखें)।

प्रोटोटाइपिकल डेलिगेटिंग इनहेरिटेंस

शास्त्रीय वंशानुक्रम बहुत समान है कि लोग अपने पूर्वजों के जीन को कैसे विरासत में लेते हैं। कुछ बुनियादी विशेषताएं हैं: लोग चल सकते हैं, बात कर सकते हैं ... और प्रत्येक व्यक्ति के लिए विशिष्ट विशेषताएं हैं। लोग खुद को बदलने में सक्षम नहीं हैं - उनकी कक्षा (लेकिन वे अपने गुणों को बदल सकते हैं) और दादा-दादी, माता और पिता बच्चों और पोते के जीन को गतिशील रूप से प्रभावित नहीं कर सकते हैं। सब कुछ बहुत सांसारिक है।

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

चलो कोड में सब कुछ का वर्णन करें:

var Grandfather = function () {}; //  Grandfather Grandfather.prototype.color = 'green'; var Father = function () {}; //  Father Father.prototype = new Grandfather(); //  ,        var Son = function () {}; //  Son Son.prototype = new Father(); //  var u = new Grandfather(); //  "" Grandfather var f = new Father(); //  "" Father var s = new Son(); //  "" Son //    console.log([u.color, f.color, s.color]); // ["green", "green", "green"] //         Grandfather.prototype.color = 'blue'; console.log([u.color, f.color, s.color]); // ["blue", "blue", "blue"] //          Father.prototype.color = 'green'; //     : // Grandfather.prototype.color = 'green'; console.log([u.color, f.color, s.color]); // ["blue", "green", "green"] //   Grandfather.prototype.color = 'blue'; console.log([u.color, f.color, s.color]); // ["blue", "green", "green"] //             s.color = 'black'; //   ,      console.log([u.color, f.color, s.color]); // ["blue", "green", "black"] var SonsSon = function () {}; //  SonsSon SonsSon.prototype = new Son(); //  var ss = new SonsSon(); //  "" SonsSon //      console.log([u.color, f.color, s.color, ss.color]); // ["blue", "green", "black", "green"] 

पढ़ें:
जावास्क्रिप्ट में ओओपी: वंशानुक्रम
हम चित्रों में प्रोटोटाइप, __proto__, कंस्ट्रक्टर और उनके चेन से निपटते हैं

प्रोटोटाइप श्रृंखला, दिए गए नाम के साथ संपत्ति प्राप्त करना

प्रोटोटाइप चेन ऑब्जेक्ट्स की एक परिमित श्रृंखला है जिसका उपयोग विरासत और साझा गुणों को व्यवस्थित करने के लिए किया जाता है।

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

कुछ जावास्क्रिप्ट कार्यान्वयन प्रोटोटाइप श्रृंखला में अगली वस्तु का प्रतिनिधित्व करने के लिए __proto__ संपत्ति का उपयोग करते हैं।

एक पढ़ने की संपत्ति की खोज निम्नलिखित फ़ंक्शन द्वारा वर्णित की जा सकती है:

 function getProperty(obj, prop) { if (obj.hasOwnProperty(prop)) return obj[prop] else if (obj.__proto__ !== null) return getProperty(obj.__proto__, prop) else return undefined } 

उदाहरण के लिए, 2 गुण (x, y) और प्रिंट विधि वाले सरल बिंदु 2D वर्ग पर विचार करें। उपरोक्त परिभाषाओं का उपयोग करना - एक वस्तु का निर्माण करना।

 var Point = { x: 0, y: 0, print: function () { console.log(this.x, this.y); } }; var p = {x: 10, __proto__: Point}; //  'x'    : /* px */ getProperty(p, 'x'); // 10 //  'y'    __proto__  - Point /* py */ getProperty(p, 'y'); // 0 //  print    __proto__  - Point /* p.print() */ getProperty(p, 'print').call(p); // 10 0 

मैंने परिणामी फ़ंक्शन call करने के बजाय सीधे call उपयोग क्यों किया, इसका वर्णन नीचे किया गया है।

वास्तव में, Point में एक और संपत्ति है, और यह हमारे माता-पिता __proto__ के प्रोटोटाइप के संदर्भ में है, जो कि Point के मामले में Object.prototype को Object.prototype ।
उदाहरण के लिए, यह है कि प्रोटोटाइप की पूरी श्रृंखला बहुत पहले उदाहरण में कैसे दिखाई देगी:

  /* SonsSon <- Son <---- Father <- Grandfather <-- Object <-- null */ console.log(ss.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ === null); 

__proto__, प्रोटोटाइप, नया ऑपरेटर

ऊपर एक "निम्न-स्तरीय कोड" था, अब देखते हैं कि जीवन में सब कुछ कैसे काम करता है:

 function Point(x, y) { //  Point this.x = x; this.y = y; } Point.prototype = { //   print: function () { console.log(this.x, this.y); } }; var p = new Point(10, 20); //    p.print(); // 10 20 

यदि पिछले कोड में हम कम से कम जानते थे कि हम क्या जिक्र कर रहे हैं, तो सब कुछ किसी न किसी तरह भ्रमित था।

सभी "जादू" नए ऑपरेटर में निहित है। ब्रेंडन आइच (जावास्क्रिप्ट के निर्माता) चाहते थे कि जावास्क्रिप्ट पारंपरिक ओओ भाषाओं जैसे सी ++, जावा की तरह दिखे, इसलिए नया ऑपरेटर जोड़ा गया। आइए देखें कि यह कैसे काम करता है।

नए ऑपरेटर के पास अपने कार्य और फ़ंक्शन तर्क ( new F(arguments...) ) के निपटान में है और निम्नलिखित क्रियाएं करता है:

1. एकल __proto__ संपत्ति के साथ एक खाली वस्तु बनाता है जो __proto__ का संदर्भ F.prototype
2. एक्सक्यूटर्स कंस्ट्रक्टर F जिसमें this पहले बनाई गई वस्तु है
3. एक वस्तु लौटाता है
एक New फ़ंक्शन बनाएं जो new ऑपरेटर के व्यवहार का अनुकरण करता है:

 function New (F, args) { /*1*/ var n = {'__proto__': F.prototype}; /*2*/ F.apply(n, args); /*3*/ return n; } 

पिछले उदाहरण को प्वाइंट से बदलें:

 function Point(x, y) { //  Point this.x = x; this.y = y; } Point.prototype = { //   print: function () { console.log(this.x, this.y); } }; var p1 = new Point(10, 20); p1.print(); // 10 20 console.log(p1 instanceof Point); // true //  : var p2 = New(Point, [10, 20]); p2.print(); // 10 20 console.log(p2 instanceof Point); // true 

प्रोटोटाइप चेनिंग

पहले उदाहरण में, मैंने निम्नलिखित निर्माण Father.prototype = new Grandfather() का उपयोग करके एक प्रोटोटाइप श्रृंखला का निर्माण किया। Father.prototype = new Grandfather() :

 var Grandfather = function () {}; //  Grandfather Grandfather.prototype.color = 'green'; var Father = function () {}; //  Father Father.prototype = new Grandfather(); //  ,        var Son = function () {}; //  Son Son.prototype = new Father(); //  

अब हम नए ऑपरेटर के व्यवहार को जानते हैं और समझ सकते हैं कि यहाँ क्या किया जा रहा है - new Grandfather() विस्तार करें:

 Father.prototype = { __proto__: { //  Grandfather color: 'green', __proto__: Object.prototype } }; 

अब new Father() बुलाते समय new Father() हमें यह वस्तु मिलती है (हम तुरंत वस्तु का विस्तार करेंगे):

 Son.prototype = { __proto__: { //  Father __proto__: { //  Grandfather color: 'green', __proto__: Object.prototype } } } 

आइए देखें कि हमारे पास वस्तु के अंत में क्या है (पुत्र उदाहरण)

 { color: 'black', //      __proto__: { //  Son __proto__: { //  Father color: 'green', //     __proto__: { //  Grandfather color: 'blue', //      __proto__: Object.prototype } } } } 

क्यों Father.prototype = new Grandfather() एक प्रोटोटाइप श्रृंखला के निर्माण के लिए सबसे अच्छा विकल्प नहीं है?
क्योंकि हमें Grandfather के कंस्ट्रक्टर को कॉल करना होगा, जो अतिरिक्त गुणों को मिला सकते हैं और अतिरिक्त तरीकों को कॉल कर सकते हैं, जैसे कि alert । इस समस्या को हल करने के लिए, एक नकली निर्माता का उपयोग करें:

 function inherit (object, parent) { function F(){}; //   F.prototype = parent.prototype; //     object.prototype = new F(); //       return object; //     }; 

उपयोग उदाहरण:

 var Grandfather = function () {}; //  Grandfather Grandfather.prototype.color = 'green'; var Father = function () {}; //  Father inherit(Father, Grandfather); //   

Grandfather कंस्ट्रक्टर निष्पादित नहीं करेगा। अगर हम सभी को दादाजी के कंस्ट्रक्टर को चलाने की आवश्यकता है, तो इसे कॉल या एपी का उपयोग करके कॉल करें

 var Father = function () { //  Father Grandfather.call(this); }; 

Instanceof ऑपरेटर

 if (p instanceof Point) { // ... } 

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

instanceof ऑपरेटर दो वस्तुओं पर काम करता है - obj और constructor: ( obj instanceof constructor )। Constructor.prototype से शुरू होकर, यह प्रोटोटाइप श्रृंखला के माध्यम से चलता है और निम्नलिखित समानता को obj.__proto__ === constructor.prototype ; यदि यह सत्य है, तो यह सही है।

हम कोड में वर्णन करेंगे:

 function isInstanceOf(obj, constructor) { if (obj.__proto__ === constructor.prototype) return true; else if (obj.__proto__ !== null) return isInstanceOf(obj.__proto__, constructor) else return false } 

उपरोक्त उदाहरण पर विचार करें:

 function Point(x, y) { //  Point this.x = x; this.y = y; } Point.prototype = { //   print: function () { console.log(this.x, this.y); } }; var p = new Point(10, 20); //    /* {} instanceof Object */ console.log(isInstanceOf({}, Object)); // true /* p instanceof Point */ console.log(isInstanceOf(p, Point)); // true /* p instanceof Object */ console.log(isInstanceOf(p, Object)); // true ,  Object     (Point.__proto__ === Object.prototype) /* p instanceof Array */ console.log(isInstanceOf(p, Array)); // false ,  Array     

यह संपत्ति

यह एक बड़ी गलती है।

कई इस तथ्य के लिए उपयोग किए जाते हैं कि प्रोग्रामिंग भाषाओं में यह कीवर्ड ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग से निकटता से संबंधित है, अर्थात्, यह निर्माता द्वारा उत्पन्न वर्तमान वस्तु को इंगित करता है। ईसीएमएस्क्रिप्ट में, यह केवल उत्पन्न वस्तु को परिभाषित करने तक सीमित नहीं है।

जावास्क्रिप्ट में, यह कॉलर द्वारा कॉल के रूप में निर्धारित किया जाता है। वह नियम जिसके द्वारा यह निर्धारित किया जाएगा, (मैं सरल तरीके से समझाऊंगा):
1. यदि विधि को सीधे कहा जाता है ( new, call, apply, bind, with, try catch बिना new, call, apply, bind, with, try catch ), तो यह वह वस्तु होगी जो विधि नाम के बाईं ओर बिंदु से पहले होती है।
2. अगर कोई बिंदु नहीं है (फ़ंक्शन को सीधे कहा जाता है), तो यह पर्यावरण के आधार पर अपरिभाषित, अशक्त या खिड़की (वैश्विक) पर सेट किया जाएगा और "सख्त उपयोग करें"।
3. यदि अभिव्यक्ति एक लिंक नहीं है, लेकिन एक मूल्य है, तो पैराग्राफ 2 लागू होता है

एक उदाहरण:

 var foo = { bar: function () { console.log(this); } }; var bar = foo.bar; bar(); // this === global (2) foo.bar(); // this === foo (1) (foo.bar)(); // this === foo     (1) //       -  (foo.bar = foo.bar)(); // this === global (3) (false || foo.bar)(); // this === global (3) (foo.bar, foo.bar)(); // this === global (3) function foo() { function bar() { console.log(this); } bar(); // this === global (2) } 

getProperty(p, 'print').call(p) उदाहरण को याद करें getProperty(p, 'print').call(p) यह इस नियम के कारण है कि मैंने इसे मैन्युअल रूप से निर्दिष्ट किया है। अन्यथा, प्रिंट फ़ंक्शन इस - विंडो के रूप में प्राप्त होगा।

ये ऑपरेटर और विधियां this: new, call, apply, bind, with, try catch के मूल्य को नियंत्रित करने में सक्षम हैं this: new, call, apply, bind, with, try catch (उनके साथ सब कुछ कम या ज्यादा स्पष्ट है, मैं इसे प्रभावित नहीं करूँगा)।

इस पर अधिक:
ECMA-262-3 की सूक्ष्मता। भाग 3: यह

अपरिभाषित, अशक्त, शून्य

null - एक आदिम मान जो एक अशक्त, खाली, शून्य से संबंधित लिंक का प्रतिनिधित्व करता है
अपरिभाषित - वह मूल मान जो प्रत्येक चर डिफ़ॉल्ट रूप से प्राप्त करता है (जब चर का कोई मूल्य नहीं होता है)
शून्य एक ऑपरेटर है (यानी, जब बुलाया जाता है तो कोष्ठक की आवश्यकता नहीं होती है) जो एक अभिव्यक्ति को निष्पादित करता है और हमेशा अप्रभावित रहता है

निष्कर्ष

1. जावास्क्रिप्ट में कोई कक्षाएं नहीं हैं - कंस्ट्रक्टर हैं
2. प्रोटोटाइप श्रृंखला - वह आधार जिसके आधार पर जावास्क्रिप्ट में सभी उत्तराधिकार आधारित हैं
3. प्रोटोटाइप श्रृंखला का उपयोग करके वस्तु की संपत्ति प्राप्त की जाती है।
4. __proto__ प्रोटोटाइप निर्माता (प्रोटोटाइप) का संदर्भ है
5. नया ऑपरेटर एक एकल संपत्ति के साथ एक खाली वस्तु बनाता है __proto__, जो F.prototype को संदर्भित करता है, निर्माता F को निष्पादित करता है जिसमें यह पहले बनाई गई वस्तु है और एक वस्तु लौटाता है
6. इंस्टॉफ़ ऑपरेटर यह जाँच नहीं करता है कि क्या ऑब्जेक्ट ऑब्जेक्ट्सकॉन्स्टोरेंट कंस्ट्रक्टर द्वारा उत्पन्न किया गया है, अपने फैसले के लिए यह एक प्रोटोटाइप श्रृंखला का उपयोग करता है
7. जावास्क्रिप्ट में, इसका मूल्य कॉलर द्वारा कॉल के रूप में निर्धारित किया जाता है
8. शून्य एक ऑपरेटर है, एक फ़ंक्शन नहीं है। अपरिभाषित, अशक्त - आदिम मूल्य

महत्वपूर्ण कुछ जावास्क्रिप्ट कार्यान्वयन में, __proto__ को सीधे बदला नहीं जा सकता है , इसके अलावा, यह संपत्ति मानक नहीं है और पहले से ही पुरानी है। प्रोटोटाइप का संदर्भ प्राप्त करने के लिए, Object.getPrototypOf का उपयोग करें । लेख में, मैंने इसका इस्तेमाल किया (__proto__) ने ECMAScript के "इंटर्नल" को प्रदर्शित करने के लिए।

लेख सामग्री का इस्तेमाल किया

दिमित्री Soshinkov dsCode के ब्लॉग से लेख
कैसे प्रोटोटाइप इनहेरिटेंस वास्तव में काम करता है (क्रिस्टोफर चेड्यू)