जावास्क्रिप्ट मेटाप्रोग्रामिंग

मेटाप्रोग्रामिंग प्रोग्रामों के निर्माण से जुड़ी एक प्रकार की प्रोग्रामिंग है जो अपने काम के परिणामस्वरूप अन्य कार्यक्रमों को उत्पन्न करती है, या ऐसे प्रोग्राम जो निष्पादन के दौरान खुद को बदलते हैं। (विकिपीडिया)

सरल भाषा में, जावास्क्रिप्ट के भीतर मेटाप्रोग्रामिंग तंत्र माना जा सकता है जो आपको किसी भी कार्रवाई के आधार पर वास्तविक समय में कार्यक्रम का विश्लेषण करने और बदलने की अनुमति देता है। और, सबसे अधिक संभावना है, आप हर दिन स्क्रिप्ट लिखने के दौरान किसी तरह उनका उपयोग करते हैं।

जावास्क्रिप्ट, इसकी प्रकृति से, एक बहुत शक्तिशाली गतिशील भाषा है और आपको लचीले कोड को अच्छी तरह से लिखने की अनुमति देता है:

/** *   save-    */ const comment = { authorId: 1, comment: '' }; for (let name in comment) { const pascalCasedName = name.slice(0, 1).toUpperCase() + name.slice(1); comment[`save${pascalCasedName}`] = function() { //   } } comment.saveAuthorId(); //  authorId comment.saveComment(); //  comment 

अन्य भाषाओं में गतिशील रूप से बनाने के तरीकों के लिए समान कोड को इसके लिए विशेष वाक्यविन्यास या एपीआई की आवश्यकता हो सकती है। उदाहरण के लिए, PHP भी एक गतिशील भाषा है, लेकिन इसमें उसे अधिक प्रयास की आवश्यकता होगी:

 <?php class Comment { public $authorId; public $comment; public function __construct($authorId, $comment) { $this->authorId = $authorId; $this->comment = $comment; } //       public function __call($methodName, $arguments) { foreach (get_object_vars($this) as $fieldName => $fieldValue) { $saveMethodName = "save" . strtoupper($fieldName[0]) . substr($fieldName, 1); if ($methodName == $saveMethodName) { //   } } } } $comment = new Comment(1, ''); $comment->saveAuthorId(); //  authorId $comment->saveComment(); //  comment 

लचीली वाक्य रचना के अलावा, हमारे पास गतिशील कोड लिखने के लिए उपयोगी कार्यों का एक समूह भी है: Object.create, Object.defineProperty, Function.apply और कई अन्य।

उन पर अधिक विस्तार से विचार करें।

1. कोड जनरेशन
2. कार्यों के साथ काम करें
3. वस्तुओं के साथ काम करना
4. एपीआई को प्रतिबिंबित करें
5. चिह्न (प्रतीक)
6. एक प्रॉक्सी (प्रॉक्सी)
7. निष्कर्ष

1. कोड जनरेशन

कोड को गतिशील रूप से निष्पादित करने के लिए मानक उपकरण, एवल फ़ंक्शन है, जो आपको उत्तीर्ण स्ट्रिंग से कोड निष्पादित करने की अनुमति देता है:

 eval('alert("Hello, world")'); 

दुर्भाग्य से, eval की कई बारीकियाँ हैं:

• यदि हमारा कोड सख्त मोड ('उपयोग सख्त') में लिखा गया है, तो eval के अंदर घोषित किए गए चर कॉलिंग कोड में दिखाई नहीं देंगे। इसी समय, ईवैल के अंदर का कोड हमेशा बाहरी चर को बदल सकता है।
• eval के अंदर कोड को वैश्विक संदर्भ (यदि window.eval के माध्यम से बुलाया जाता है) और फ़ंक्शन के संदर्भ में दोनों को निष्पादित किया जा सकता है जिसके अंदर कॉल किया गया था (यदि बस eval, बिना खिड़की के)।
• जेएस मिनिफिकेशन के कारण समस्याएँ उत्पन्न हो सकती हैं, जब आकार को कम करने के लिए परिवर्तनीय नामों को छोटे लोगों के साथ बदल दिया जाता है। कोड को एक स्ट्रिंग के रूप में पारित करने के लिए आमतौर पर मिनिफाइज़र को स्पर्श नहीं किया जाता है, इस वजह से हम पुराने अज्ञात नामों का उपयोग करके बाहरी चर तक पहुंच शुरू कर सकते हैं, जिससे सूक्ष्म त्रुटियां हो सकती हैं।

इन समस्याओं को हल करने के लिए एक बढ़िया विकल्प है - नया कार्य ।

 const hello = new Function('name', 'alert("Hello, " + name)'); hello('') // alert("Hello, "); 

Eval के विपरीत, हम हमेशा फ़ंक्शन के तर्कों के माध्यम से स्पष्ट रूप से मापदंडों को पारित कर सकते हैं और गतिशील रूप से इसे ( Function.apply या Function.call के माध्यम से) इसका संदर्भ दे सकते हैं। इसके अलावा, निर्मित फ़ंक्शन को हमेशा वैश्विक दायरे में कहा जाता है।

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

2. कार्यों के साथ काम करें

जावास्क्रिप्ट हमें गतिशील रूप से कार्यों के साथ काम करने के लिए कई उत्कृष्ट उपकरण प्रदान करता है, जिससे हम दोनों रनटाइम में फ़ंक्शन के बारे में विभिन्न जानकारी प्राप्त कर सकते हैं और इसे बदल सकते हैं:

• Function.length - आपको एक फ़ंक्शन से तर्कों की संख्या का पता लगाने की अनुमति देता है:

  
  

   const func = function(name, surname) { console.log(`Hello, ${surname} ${name}`) }; console.log(func.length) // 2 

  
  

• Function.apply और Function.call - आपको इस फ़ंक्शन के संदर्भ को गतिशील रूप से बदलने की अनुमति देते हैं:

  
  

   const person = { name: '', introduce: function() { return ` ${this.name}`; } } person.introduce(); //   person.introduce.call({ name: '' }); //   

  
  

  वे केवल उस में एक दूसरे से भिन्न होते हैं, फ़ंक्शन में। फ़ंक्शन के लिए, तर्कों को एक सरणी के रूप में कार्य किया जाता है, और फ़ंक्शन.call में, अल्पविराम द्वारा अलग किया जाता है। इस सुविधा का उपयोग अक्सर सरणी के रूप में कार्य करने के लिए तर्कों की एक सूची को पारित करने से पहले किया जाता था। एक सामान्य उदाहरण Math.max फ़ंक्शन है (डिफ़ॉल्ट रूप से, यह सरणियों के साथ काम नहीं कर सकता है):

  
  

   Math.max.apply(null, [1, 2, 4, 3]); // 4 

  
  

  नए प्रसार ऑपरेटर के आगमन के साथ , आप बस इसे लिख सकते हैं:

  
  

   Math.max(...[1, 2, 4, 3]); // 4 

  
  

• फ़ंक्शन.बिंद - आपको मौजूदा किसी से एक फ़ंक्शन की एक प्रति बनाने की अनुमति देता है, लेकिन एक अलग संदर्भ के साथ:

  
  

   const person = { name: '', introduce: function() { return ` ${this.name}`; } } person.introduce(); //   const introduceEgor = person.introduce.bind({ name: '' }); introduceEgor(); //   

  
  

• Function.caller - आपको कॉलिंग फ़ंक्शन प्राप्त करने की अनुमति देता है। इसका उपयोग करने की अनुशंसा नहीं की जाती है , क्योंकि यह भाषा मानक में अनुपस्थित है और सख्त मोड में काम नहीं करेगा। यह इस तथ्य के कारण था कि यदि विभिन्न जावास्क्रिप्ट इंजन भाषा विनिर्देश में वर्णित टेल कॉल ऑप्टिमाइज़ेशन को लागू करते हैं, तो फंक्शन.caller को कॉल करना गलत परिणाम उत्पन्न करना शुरू कर सकता है। उपयोग उदाहरण:

  
  

   const a = function() { console.log(a.caller == b); } const b = function() { a(); } b(); // true 

  
  

• Function.toString - फ़ंक्शन का एक स्ट्रिंग प्रतिनिधित्व लौटाता है। यह एक बहुत शक्तिशाली विशेषता है जो आपको किसी फ़ंक्शन की सामग्री और उसके तर्कों की जांच करने की अनुमति देती है:

  
  

   const getFullName = (name, surname, middlename) => { console.log(`${surname} ${name} ${middlename}`); } getFullName.toString() /* * "(name, surname, middlename) => { * console.log(`${surname} ${name} ${middlename}`); * }" */ 

  
  

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

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

नियमित फ़ंक्शन पार्सिंग के साथ सरल उदाहरण:

 /** *    . * @param fn  */ const getFunctionParams = fn => { const COMMENTS = /(\/\/.*$)|(\/\*[\s\S]*?\*\/)|(\s*=[^,\)]*(('(?:\\'|[^'\r\n])*')|("(?:\\"|[^"\r\n])*"))|(\s*=[^,\)]*))/gm; const DEFAULT_PARAMS = /=[^,]+/gm; const FAT_ARROW = /=>.*$/gm; const ARGUMENT_NAMES = /([^\s,]+)/g; const formattedFn = fn .toString() .replace(COMMENTS, "") .replace(FAT_ARROW, "") .replace(DEFAULT_PARAMS, ""); const params = formattedFn .slice(formattedFn.indexOf("(") + 1, formattedFn.indexOf(")")) .match(ARGUMENT_NAMES); return params || []; }; const getFullName = (name, surname, middlename) => { console.log(surname + ' ' + name + ' ' + middlename); }; console.log(getFunctionParams(getFullName)); // ["name", "surname", "middlename"] 

 /** *     . * @param fn  */ const getFunctionBody = fn => { const restoreIndent = body => { const lines = body.split("\n"); const bodyLine = lines.find(line => line.trim() !== ""); let indent = typeof bodyLine !== "undefined" ? (/[ \t]*/.exec(bodyLine) || [])[0] : ""; indent = indent || ""; return lines.map(line => line.replace(indent, "")).join("\n"); }; const fnStr = fn.toString(); const rawBody = fnStr.substring( fnStr.indexOf("{") + 1, fnStr.lastIndexOf("}") ); const indentedBody = restoreIndent(rawBody); const trimmedBody = indentedBody.replace(/^\s+|\s+$/g, ""); return trimmedBody; }; //       getFullName const getFullName = (name, surname, middlename) => { console.log(surname + ' ' + name + ' ' + middlename); }; console.log(getFunctionBody(getFullName)); 

यह ध्यान रखना महत्वपूर्ण है कि मिनिफायर का उपयोग करते समय, पार्स किए गए फ़ंक्शन और उसके तर्कों के अंदर दोनों कोड को अनुकूलित किया जा सकता है और इसलिए, परिवर्तन।

3. वस्तुओं के साथ काम करना

जावास्क्रिप्ट में एक वैश्विक ऑब्जेक्ट ऑब्जेक्ट है जिसमें गतिशील रूप से वस्तुओं के साथ काम करने के कई तरीके शामिल हैं।

इन विधियों में से अधिकांश भाषा में लंबे समय से मौजूद हैं और व्यापक रूप से उपयोग की जाती हैं।

वस्तु के गुण

• Object.assign - पहले पैरामीटर द्वारा निर्दिष्ट ऑब्जेक्ट में एक या एक से अधिक वस्तुओं के गुणों को आसानी से कॉपी करने के लिए:

  
  

   Object.assign({}, { a: 1 }, { b: 2 }, { c: 3 }) // {a: 1, b: 2, c: 3} 

  
  

• Object.keys और Object.values - या तो कुंजियों की सूची या ऑब्जेक्ट मानों की सूची लौटाता है:

  
  

   const obj = { a: 1, b: 2, c: 3 }; console.log(Object.keys(obj)); // ["a", "b", "c"] console.log(Object.values(obj)); // [1, 2, 3] 

  
  

• Object.entries - प्रारूप [[key1, value1], [key2, value2]] में इसके गुणों की सूची लौटाता है:

  
  

   const obj = { a: 1, b: 2, c: 3 }; console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]] 

  
  

• Object.prototype.hasOwnProperty - यदि कोई संपत्ति किसी वस्तु में समाहित है (इसकी विरोध श्रृंखला में नहीं):

  
  

   const obj = { a: 1 }; obj.__proto__ = { b: 2 }; console.log(obj.hasOwnProperty('a')); // true console.log(obj.hasOwnProperty('b')) // false 

  
  

• Object.getOwnPropertyNames - एन्यूमरेटेड और नॉन- एन्युमेटेड दोनों सहित, अपने स्वयं के गुणों की एक सूची देता है:

  
  

   const obj = { a: 1, b: 2 }; Object.defineProperty(obj, 'c', { value: 3, enumerable: false }); //    for (let key in obj) { console.log(key); } // "a", "b" console.log(Object.getOwnPropertyNames(obj)); // [ "a", "b", "c" ] 

  
  

• Object.getOwnPropertySymbols - अपनी स्वयं की सूची लौटाता है (ऑब्जेक्ट में निहित है, और इसकी प्रोटोटाइप श्रृंखला में नहीं) वर्ण:

  
  

   const obj = {}; const a = Symbol('a'); obj[a] = 1; console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(a) ] 

  
  

• Object.prototyp.propertyIsEnumerable - जाँचता है कि क्या कोई संपत्ति प्राप्य है (उदाहरण के लिए, इन-लूप के लिए, में उपलब्ध है):

  
  

   const arr = [ ' ' ]; console.log(arr.propertyIsEnumerable(0)); // true —  ' '   console.log(arr.propertyIsEnumerable('length')); // false —  length    

  
  

ऑब्जेक्ट प्रॉपर्टी डिस्क्रिप्टर्स

डिस्क्रिप्टर्स आपको संपत्ति मापदंडों को ठीक करने की अनुमति देते हैं। उनका उपयोग करते हुए, हम किसी भी संपत्ति को पढ़ने / लिखने के दौरान आसानी से अपने स्वयं के इंटरसेप्टर्स बना सकते हैं (गेटर्स एंड सेटर्स - गेट / सेट), गुणों को अपरिवर्तनीय या गैर-गणना योग्य और कई अन्य चीजों को बना सकते हैं।

• Object.defineProperty और Object.defineProperties - एक या एक से अधिक संपत्ति विवरणक बनाता है। गेट्टर और सेटर के साथ अपना खुद का डिस्क्रिप्टर बनाएं:

  
  

   const obj = { name: '', surname: '' }; Object.defineProperty(obj, 'fullname', { //     fullname get: function() { return `${this.name} ${this.surname}`; }, //     fullname (     delete obj.fullname) set: function(value) { const [name, surname] = value.split(' '); this.name = name; this.surname = surname; }, }); console.log(obj.fullname); //   obj.fullname = ' '; console.log(obj.name); //  console.log(obj.surname); //  

  
  

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

  
  

   const obj = {}; //      get/set,       value.    get/set  value.   — undefined. Object.defineProperty(obj, 'name', { value: '' }); // ,         (for-in, for-of, Object.keys).   — false. Object.defineProperty(obj, 'a', { enumerable: true }); //         defineProperty     delete.   — false. Object.defineProperty(obj, 'b', { configurable: false }); //      .   — false. Object.defineProperty(obj, 'c', { writable: true }); 

  
  

• Object.getOwnPropertyDescriptor और Object.getOwnPropertyDescriptors - आपको इच्छित वस्तु विवरणक या उनकी पूरी सूची प्राप्त करने की अनुमति देते हैं:

  
  

   const obj = { a: 1, b: 2 }; console.log(Object.getOwnPropertyDescriptor(obj, "a")); // { configurable: true, enumerable: true, value: 1, writable: true } /** * { * a: { configurable: true, enumerable: true, value: 1, writable: true }, * b: { configurable: true, enumerable: true, value: 2, writable: true } * } */ console.log(Object.getOwnPropertyDescriptors(obj)); 

  
  

वस्तुओं के साथ काम करते समय प्रतिबंध बनाना

• ऑब्जेक्ट.फ़्रीज़ - किसी ऑब्जेक्ट के गुणों को "जमा देता है"। इस तरह के "फ्रीज" का परिणाम ऑब्जेक्ट की संपत्तियों की पूर्ण अपरिवर्तनीयता है - उन्हें बदला और हटाया नहीं जा सकता है, नए जोड़े गए, विवरण बदले गए:

  
  

   const obj = Object.freeze({ a: 1 }); //       ,       . obj.a = 2; obj.b = 3; console.log(obj); // { a: 1 } console.log(Object.isFrozen(obj)) // true 

  
  

• Object.seal - किसी ऑब्जेक्ट के गुण "सील"। सीलिंग ऑब्जेक्ट.फ्रीज के समान है, लेकिन इसमें कई अंतर हैं। हम, Object.freeze के रूप में, नए गुणों को जोड़ने, मौजूदा लोगों को हटाने, उनके विवरणों को बदलने पर रोक लगाते हैं, लेकिन साथ ही साथ हम संपत्ति मूल्यों को भी बदल सकते हैं:

  
  

   const obj = Object.seal({ a: 1 }); obj.a = 2; //  a   2 //     ,       . obj.b = 3; console.log(obj); // { a: 2 } console.log(Object.isSealed(obj)) // true 

  
  

• Object.preventExtensions - नई संपत्तियों / विवरणों को जोड़ने पर रोक लगाता है:

  
  

   const obj = Object.preventExtensions({ a: 1 }); obj.a = 2; //       ,       . obj.b = 3; console.log(obj); // { a: 2 } console.log(Object.isExtensible(obj)) // false 

  
  

ऑब्जेक्ट प्रोटोटाइप

• Object.create - पैरामीटर में निर्दिष्ट प्रोटोटाइप के साथ एक ऑब्जेक्ट बनाने के लिए। इस विशेषता का उपयोग प्रोटोटाइप उत्तराधिकार के लिए और ऑब्जेक्ट "गुण" से गुण के बिना, "स्वच्छ" ऑब्जेक्ट बनाने के लिए किया जा सकता है:

  
  

   const pureObj = Object.create(null); 

  
  

• Object.getPrototypOf और Object.setPrototypOf - किसी ऑब्जेक्ट के प्रोटोटाइप को प्राप्त / परिवर्तित करने के लिए:

  
  

   const duck = {}; const bird = {}; Object.setPrototypeOf(duck, bird); console.log(Object.getPrototypeOf(duck) === bird); // true console.log(duck.__proto__ === bird); // true 

  
  

• Object.prototype.isPrototypeOf - यदि वर्तमान ऑब्जेक्ट किसी अन्य की प्रोटोटाइप श्रृंखला में समाहित है, तो जाँच करता है:

  
  

   const duck = {}; const bird = {}; duck.__proto__ = bird; console.log(bird.isPrototypeOf(duck)); // true 

  
  

4. रिफ्लेक्ट एपीआई

ईएस 6 के आगमन के साथ, प्रतिबिंब और आत्मनिरीक्षण से संबंधित विभिन्न तरीकों को संग्रहीत करने के लिए जावास्क्रिप्ट में एक वैश्विक रिफ्लेक्ट ऑब्जेक्ट को जोड़ा गया है।

उनकी अधिकांश विधियाँ ऐसी वैश्विक वस्तुओं से मौजूदा तरीकों को ऑब्जेक्ट और फ़ंक्शन के रूप में स्थानांतरित करने का परिणाम हैं, और अधिक आरामदायक उपयोग के लिए थोड़ा रिफैक्टिंग के साथ एक अलग नामस्थान पर।

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

 let obj = Object.create(null); obj.qwerty = 'qwerty'; console.log(obj.__proto__) // null console.log(obj.hasOwnProperty('qwerty')) // Uncaught TypeError: obj.hasOwnProperty is not a function console.log(obj.hasOwnProperty === undefined); // true console.log(Object.prototype.hasOwnProperty.call(obj, 'qwerty')); // true 

रीफैक्टरिंग ने तरीकों के व्यवहार को अधिक स्पष्ट और नीरस बना दिया है। उदाहरण के लिए, यदि पहले, जब एक गलत मान (जैसे कि एक संख्या या एक स्ट्रिंग) पर Object.defineProperty को कॉल किया जाता है, तो एक अपवाद फेंक दिया गया था, लेकिन एक ही समय में, Object.getOwnPropertyDescriptor पर कॉल करने के लिए एक गैर-ऑब्जेक्ट ऑब्जेक्ट डिस्क्रिप्टर चुपचाप अपरिभाषित लौटा, फिर रिफ्लेक्ट से समान तरीके हमेशा गलत डेटा के अपवादों को फेंक देते हैं। ।

कई नए तरीके भी जोड़े गए हैं:

• Reflect.construct Object.create का एक अधिक सुविधाजनक विकल्प है, जो न केवल निर्दिष्ट प्रोटोटाइप के साथ एक ऑब्जेक्ट बनाने की अनुमति देता है, बल्कि इसे तुरंत इनिशियलाइज़ करने के लिए भी है:

  
  

   function Person(name, surname) { this.name = this.formatParam(name); this.surname = this.formatParam(surname); } Person.prototype.formatParam = function(param) { return param.slice(0, 1).toUpperCase() + param.slice(1).toLowerCase(); } const oldPerson = Object.create(Person.prototype); // {} Person.call(oldPerson, '', ''); // {name: "", surname: ""} const newPerson = Reflect.construct(Person, ['', '']); // {name: "", surname: ""} 

  
  

• Reflect.ownKeys - निर्दिष्ट ऑब्जेक्ट से संबंधित गुणों का एक सरणी देता है (और प्रोटोटाइप श्रृंखला में ऑब्जेक्ट्स के लिए नहीं):

  
  

   let person = { name: '', surname: '' }; person.__proto__ = { age: 30 }; console.log(Reflect.ownKeys(person)); // ["name", "surname"] 

  
  

• Reflect.deleteProperty - एक विधि के रूप में किए गए डिलीट ऑपरेटर का एक विकल्प:

  
  

   let person = { name: '', surname: '' }; delete person.name; // person = {surname: ""} Reflect.deleteProperty(person, 'surname'); // person = {} 

  
  

• Reflect.has - ऑपरेटर के लिए एक विकल्प, एक विधि के रूप में बनाया गया है:

  
  

   let person = { name: '', surname: '' }; console.log('name' in person); // true console.log(Reflect.has(person, 'name')); // true 

  
  

• Reflect.get और Reflect.set - ऑब्जेक्ट गुण पढ़ने / बदलने के लिए:

  
  

   let person = { name: '', surname: '' }; console.log(Reflect.get(person, 'name')); //  Reflect.set(person, 'surname', '') // person = {name: "", surname: ""} 

  
  

परिवर्तनों के बारे में अधिक विवरण यहां पाया जा सकता है ।

मेटाडेटा को प्रतिबिंबित करें

ऊपर सूचीबद्ध रिफ्लेक्ट ऑब्जेक्ट विधियों के अलावा, वस्तुओं के लिए विभिन्न मेटाडेटा को आसानी से बांधने के लिए एक प्रायोगिक प्रस्ताव है।

मेटाडेटा कोई भी उपयोगी जानकारी हो सकती है जो प्रत्यक्ष रूप से ऑब्जेक्ट से संबंधित नहीं है, उदाहरण के लिए:

• टाइपस्क्रिप्ट, जब emitDecoratorMetadata ध्वज चालू होता है, तो मेटाडेटा में प्रकारों के बारे में जानकारी लिखता है, जिससे आप उन्हें रनटाइम में एक्सेस कर सकते हैं। इसके अलावा, यह जानकारी प्रमुख डिज़ाइन द्वारा प्राप्त की जा सकती है: प्रकार:
  

   const typeData = Reflect.getMetadata("design:type", object, propertyName); 

• उलटा नियंत्रण के लिए लोकप्रिय InversifyJS पुस्तकालय मेटाडेटा में वर्णित संबंधों के बारे में विभिन्न जानकारी संग्रहीत करता है।

फिलहाल, इस पॉलीफिल का उपयोग ब्राउज़रों में काम करने के लिए किया जाता है ।

5. प्रतीक

प्रतीक एक नया अपरिवर्तनीय डेटा प्रकार है, जिसका उपयोग मुख्य रूप से ऑब्जेक्ट संपत्ति पहचानकर्ताओं के लिए अद्वितीय नाम बनाने के लिए किया जाता है। हमारे पास दो तरह से चरित्र बनाने की क्षमता है:

1. स्थानीय प्रतीकों - प्रतीक समारोह के मापदंडों में पाठ विशिष्टता को प्रभावित नहीं करता है और केवल डिबगिंग के लिए आवश्यक है:

   
   

    const sym1 = Symbol('name'); const sym2 = Symbol('name'); console.log(sym1 == sym2); // false 

   
   

2. वैश्विक वर्ण - वर्ण वैश्विक रजिस्ट्री में संग्रहीत हैं, इसलिए समान कुंजी वाले वर्ण समान हैं:

   
   

    const sym3 = Symbol.for('name'); const sym4 = Symbol.for('name'); const sym5 = Symbol.for('other name'); console.log(sym3 == sym4); // true,        'name' console.log(sym3 == sym5); // false,     

   
   

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

• Symbol.iterator - आप के लिए या ... प्रसार ऑपरेटर का उपयोग कर वस्तुओं को पुनरावृत्त करने के लिए अपने खुद के नियम बनाने की अनुमति देता है:

  
  

   let arr = [1, 2, 3]; //       arr[Symbol.iterator] = function() { const self = this; let pos = this.length - 1; return { next() { if (pos >= 0) { return { done: false, value: self[pos--] }; } else { return { done: true }; } } } }; console.log([...arr]); // [3, 2, 1] 

  
  

• Symbol.hasInstance एक विधि है जो यह निर्धारित करती है कि एक निर्माता अपने उदाहरण के रूप में किसी वस्तु को पहचानता है या नहीं। Instof ऑपरेटर द्वारा उपयोग किया जाता है:

  
  

   class MyArray { static [Symbol.hasInstance](instance) { return Array.isArray(instance); } } console.log([] instanceof MyArray); // true 

  
  

• Symbol.isConcatSpreadable - इंगित करता है कि सरणी Aratt.concat में समाप्‍त होने पर समतल होना चाहिए या नहीं:

  
  

   let firstArr = [1, 2, 3]; let secondArr = [4, 5, 6]; firstArr.concat(secondArr); // [1, 2, 3, 4, 5, 6] secondArr[Symbol.isConcatSpreadable] = false; console.log(firstArr.concat(secondArr)); // [1, 2, 3, [4, 5, 6]] 

  
  

• Symbol.species - आपको यह निर्दिष्ट करने की अनुमति देता है कि वर्ग के अंदर व्युत्पन्न वस्तुओं को बनाने के लिए किस निर्माता का उपयोग किया जाएगा।
  उदाहरण के लिए, हमारे पास सरणियों के साथ काम करने के लिए एक मानक ऐरे वर्ग है और इसमें एक .map तरीका है जो वर्तमान के आधार पर एक नया सरणी बनाता है। यह जानने के लिए कि इस नए सरणी को बनाने के लिए किस वर्ग का उपयोग करना है, Array इसे कॉल करता है। अवरोधक [Symbol.species] जैसे:

  
  

   Array.prototype.map = function(cb) { const ArrayClass = this.constructor[Symbol.species]; const result = new ArrayClass(this.length); this.forEach((value, index, arr) => { result[index] = cb(value, index, arr); }); return result; } 

  
  

  इस प्रकार, Symbol.species को ओवरराइड करते हुए, हम सरणियों के साथ काम करने के लिए अपनी खुद की कक्षा बना सकते हैं और कह सकते हैं कि सभी मानक विधियाँ जैसे कि .map, .reduce, आदि ऐरे क्लास का उदाहरण नहीं देते हैं, लेकिन हमारे वर्ग का एक उदाहरण है:

  
  

   class MyArray extends Array { static get [Symbol.species]() { return this; } } const arr = new MyArray(1, 2, 3); // [1, 2, 3] console.log(arr instanceof MyArray); // true console.log(arr instanceof Array); // true //   Array.map     Array,    Symbol.species  this      MyArray const doubledArr = arr.map(x => x * 2); console.log(doubledArr instanceof MyArray); // true console.log(doubledArr instanceof Array); // true 

  
  

  बेशक, यह न केवल सरणियों के साथ, बल्कि अन्य मानक कक्षाओं के साथ भी काम करता है। इसके अलावा, यहां तक ​​कि अगर हम बस उसी वर्ग के नए उदाहरणों को लौटाने वाले तरीकों के साथ अपनी कक्षा बनाते हैं, तो हमें कंस्ट्रक्टर का संदर्भ प्राप्त करने के लिए इस का उपयोग करना चाहिए। अवरोधक [Symbol.species]।

  
  

• Symbol.toPrimitive - आपको यह निर्दिष्ट करने की अनुमति देता है कि हमारी वस्तु को आदिम मूल्य में कैसे परिवर्तित किया जाए। यदि पहले, एक आदिम को कम करने के लिए, हमें मूल्य के साथ-साथ स्ट्रिंग का उपयोग करने की आवश्यकता थी, अब सब कुछ एक सुविधाजनक तरीके से किया जा सकता है:

  
  

   const figure = { id: 1, name: '', [Symbol.toPrimitive](hint) { if (hint === 'string') { return this.name; } else if (hint === 'number') { return this.id; } else { // default return this.name; } } } console.log(`${figure}`); // hint = string console.log(+figure); // hint = number console.log(figure + ''); // hint = default 

  
  

• Symbol.match - आपको String.prototyp.match फ़ंक्शन के लिए विधि के लिए अपने स्वयं के हैंडलर कक्षाएं बनाने की अनुमति देता है:

  
  

   class StartAndEndsWithMatcher { constructor(value) { this.value = value; } [Symbol.match](str) { const startsWith = str.startsWith(this.value); const endsWith = str.endsWith(this.value); if (startsWith && endsWith) { return [this.value]; } return null; } } const testMatchResult = '||'.match(new StartAndEndsWithMatcher('|')); console.log(testMatchResult); // ["|"] const catMatchResult = '|'.match(new StartAndEndsWithMatcher('|')); console.log(catMatchResult) // null 

  
  

  — Symbol.replace , Symbol.search Symbol.split String.prototype .

  
  

, ( reflect-metadata ) . - , , . :

 const validationRules = Symbol('validationRules'); const person = { name: '', surname: '' }; person[validationRules] = { name: ['max-length-256', 'required'], surname: ['max-length-256'] }; 

6. (Proxy)

Proxy , Reflect API Symbols ES6, // , , . , .

, data-binding MobX React, Vue . .

:

 const formData = { login: 'User', password: 'pass' }; const proxyFormData = new Proxy(formData, { set(target, name, value) { target[name] = value; this.forceUpdate(); //   React- } }); //       forceUpdate()    React proxyFormData.login = 'User2'; //     ,   -      proxyFormData.age = 20; 

, /:

 const formData = { login: 'User', password: 'pass' }; const proxyFormData = {}; for (let param in formData) { Reflect.defineProperty(proxyFormData, `__private__${param}`, { value: formData[param], enumerable: false, configurable: true }); Reflect.defineProperty(proxyFormData, param, { get: function() { return this[`__private__${param}`]; }, set: function(value) { this[`__private__${param}`] = value; this.forceUpdate(); //   React- }, enumerable: true, configurable: true }); } //       forceUpdate()    React proxyFormData.login = 'User2'; //                  -  Reflect.defineProperty proxyFormData.age = 20; 

-, — Proxy ( , ), / , delete obj[name] .

7.

JavaScript , ECMAScript 4, . , .

You Don't Know JS .