🍇 🧖🏻 🌲 जावास्क्रिप्ट गाइड भाग 4: विशेषताएं 🌖 🌡️ 🖐🏻

आज हम जावास्क्रिप्ट मैनुअल के अनुवाद का चौथा भाग प्रकाशित कर रहे हैं, जो कार्यों के लिए समर्पित है।

→ भाग 1: पहला कार्यक्रम, भाषा सुविधाएँ, मानक
→ भाग 2: कोड शैली और कार्यक्रम संरचना
→ भाग 3: चर, डेटा प्रकार, भाव, वस्तु
→ भाग 4: सुविधाएँ
→ भाग 5: सरणियाँ और लूप
→ भाग 6: अपवाद, अर्धविराम, वाइल्डकार्ड शाब्दिक
→ भाग 7: सख्त मोड, यह कीवर्ड, घटनाओं, मॉड्यूल, गणितीय गणना
→ भाग 8: ES6 सुविधाओं का अवलोकन
→ भाग 9: ES7, ES8 और ES9 मानकों का अवलोकन

जावास्क्रिप्ट कार्य करता है

आइए जावास्क्रिप्ट में कार्यों के बारे में बात करते हैं, उनकी एक सामान्य समीक्षा करें और उनके बारे में विवरणों पर विचार करें, जिसके ज्ञान से आप उन्हें प्रभावी ढंग से उपयोग कर पाएंगे।

एक फ़ंक्शन कोड का एक स्वतंत्र ब्लॉक है, जिसे एक बार घोषित किया जाता है, जिसे आवश्यकतानुसार कई बार कहा जा सकता है। एक फ़ंक्शन, हालांकि आवश्यक नहीं है, मापदंडों को स्वीकार करें। फ़ंक्शंस एकल मान लौटाते हैं।

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

इसके अलावा, जावास्क्रिप्ट में कार्यों को "प्रथम श्रेणी के कार्य" कहा जाता है क्योंकि उन्हें चर के लिए सौंपा जा सकता है, उन्हें तर्कों के रूप में अन्य कार्यों में पारित किया जा सकता है, और उन्हें अन्य कार्यों से लौटाया जा सकता है।

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

यह एक फ़ंक्शन घोषणा जैसा दिखता है।

 function doSomething(foo) { // - }

इन दिनों, इन कार्यों को "सामान्य" कहा जाता है, उन्हें ईएस 6 में दिखाई देने वाले "तीर" कार्यों से अलग किया जाता है।

आप एक फंक्शन को एक वैरिएबल या कंटीन्यू को असाइन कर सकते हैं। इस तरह के निर्माण को एक फ़ंक्शन अभिव्यक्ति कहा जाता है।

 const doSomething = function(foo) { // - }

आप देख सकते हैं कि उपरोक्त उदाहरण में, फ़ंक्शन को एक नियत स्थान पर सौंपा गया है, लेकिन इसमें स्वयं का नाम नहीं है। ऐसे कार्यों को गुमनाम कहा जाता है। इसी तरह के कार्यों को नाम दिए जा सकते हैं। इस मामले में, हम एक नामित फ़ंक्शन अभिव्यक्ति (फ़ंक्शन फ़ंक्शन नाम) के बारे में बात कर रहे हैं।

 const doSomething = function doSomFn(foo) { // - }

ऐसे अभिव्यक्तियों के उपयोग से डिबगिंग की सुविधा बढ़ जाती है (त्रुटि संदेशों में जहां स्टैक ट्रेस किया जाता है, फ़ंक्शन का नाम दिखाई देता है)। कार्यात्मक अभिव्यक्ति में फ़ंक्शन के नाम की भी आवश्यकता हो सकती है ताकि फ़ंक्शन खुद को कॉल कर सके, जो पुनरावर्ती एल्गोरिदम को लागू करने के लिए अपरिहार्य है।

ES6 मानक में, तीर फ़ंक्शन दिखाई दिए हैं, जो तथाकथित "इनलाइन फ़ंक्शंस" के रूप में उपयोग करने के लिए विशेष रूप से सुविधाजनक हैं - अन्य कार्यों (कॉलबैक) के लिए दिए गए तर्क के रूप में।

 const doSomething = foo => { // - }

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

फ़ंक्शन पैरामीटर

पैरामीटर वे चर हैं जो किसी फ़ंक्शन को घोषित करने के चरण में सेट किए जाते हैं और इसमें पारित मान शामिल होंगे (इन मानों को तर्क कहा जाता है)। जावास्क्रिप्ट में क्रियाओं के या तो कोई पैरामीटर नहीं हो सकते हैं, या एक या अधिक पैरामीटर हो सकते हैं।

 const doSomething = () => { // - } const doSomethingElse = foo => { // - } const doSomethingElseAgain = (foo, bar) => { // - }

यहाँ तीर के कार्यों के कुछ उदाहरण दिए गए हैं।

ES6 मानक के साथ शुरू, कार्यों में तथाकथित "डिफ़ॉल्ट पैरामीटर" हो सकते हैं।

 const doSomething = (foo = 1, bar = 'hey') => { // - }

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

 doSomething(3) doSomething()

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

फ़ंक्शन के लिए दिए गए तर्क को सरणियों के रूप में दर्शाया जा सकता है। इन तर्कों को पार्स करने के लिए, आप एक ऑपरेटर का उपयोग कर सकते हैं जो तीन डॉट्स जैसा दिखता है (यह तथाकथित "विस्तार ऑपरेटर" या "प्रसार ऑपरेटर") है। यहाँ है कि यह कैसा दिखता है।

 const doSomething = (foo = 1, bar = 'hey') => { // - } const args = [2, 'ho!'] doSomething(...args)

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

 const doSomething = ({ foo = 1, bar = 'hey' }) => { // - console.log(foo) // 2 console.log(bar) // 'ho!' } const args = { foo: 2, bar: 'ho!' } doSomething(args)

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

मान फ़ंक्शंस से लौटे

सभी फ़ंक्शन एक निश्चित मान लौटाते हैं। यदि वापसी आदेश स्पष्ट रूप से निर्दिष्ट नहीं है, तो फ़ंक्शन undefined वापस आ जाएगा।

 const doSomething = (foo = 1, bar = 'hey') => { // - } console.log(doSomething())

फ़ंक्शन निष्पादन या तो सभी कोड के बाद समाप्त होता है, जिसमें इसे निष्पादित किया जाता है, या कोड में return कीवर्ड का सामना करने के बाद। जब यह कीवर्ड किसी फ़ंक्शन में आता है, तो इसका संचालन पूरा हो जाता है और नियंत्रण उस स्थान पर स्थानांतरित हो जाता है जहां से फ़ंक्शन को कॉल किया गया था।

यदि return कीवर्ड के बाद आप एक निश्चित मान निर्दिष्ट करते हैं, तो यह मान इस फ़ंक्शन के निष्पादन के परिणामस्वरूप फ़ंक्शन कॉल की जगह पर लौटता है।

 const doSomething = () => { return 'test' } const result = doSomething() // result === 'test'

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

 const doSomething = () => { return ['Roger', 6] } const [ name, age ] = doSomething() console.log(name, age) //Roger 6

निर्माण const [ name, age ] = doSomething() को निम्नानुसार पढ़ा जा सकता है: " name और age const [ name, age ] = doSomething() घोषणा name और उन्हें सरणी के तत्वों के मान निर्दिष्ट करें कि फ़ंक्शन वापस आ जाएगा।"
यहां बताया गया है कि एक ही वस्तु का उपयोग कैसे होता है।

 const doSomething = () => { return {name: 'Roger', age: 6} } const { name, age } = doSomething() console.log(name, age) //Roger 6

नेस्टेड कार्य

कार्यों को अन्य कार्यों के अंदर घोषित किया जा सकता है।

 const doSomething = () => { const doSomethingElse = () => {} doSomethingElse() return 'test' } doSomething()

एक नेस्टेड फ़ंक्शन का दायरा इसके लिए एक फ़ंक्शन बाहरी द्वारा सीमित है; इसे बाहर से नहीं बुलाया जा सकता है।

ऑब्जेक्ट तरीके

जब कार्यों को वस्तुओं के गुणों के रूप में उपयोग किया जाता है, तो ऐसे कार्यों को ऑब्जेक्ट तरीके कहा जाता है।

 const car = { brand: 'Ford', model: 'Fiesta', start: function() {   console.log(`Started`) } } car.start()

यह कीवर्ड

यदि हम वस्तुओं के तरीकों के रूप में उपयोग किए जाने वाले तीर और साधारण कार्यों की तुलना करते हैं, तो हम उनके महत्वपूर्ण अंतर को पा सकते हैं, जो this कीवर्ड के अर्थ में समाहित हैं। एक उदाहरण पर विचार करें।

 const car = { brand: 'Ford', model: 'Fiesta', start: function() {   console.log(`Started ${this.brand} ${this.model}`) }, stop: () => {   console.log(`Stopped ${this.brand} ${this.model}`) } } car.start() //Started Ford Fiesta car.stop() //Stopped undefined undefined

जैसा कि आप देख सकते हैं, start() विधि को कॉल करने से अपेक्षित परिणाम प्राप्त होता है, लेकिन stop() विधि स्पष्ट रूप से सही ढंग से काम नहीं करती है।

यह इस तथ्य के कारण है कि तीर और सामान्य कार्यों में उपयोग किए जाने पर यह कीवर्ड अलग-अलग व्यवहार करता है। अर्थात्, तीर फ़ंक्शन में this में उस संदर्भ का लिंक होता है जिसमें फ़ंक्शन शामिल होता है। इस मामले में, जब ब्राउज़र की बात आती है, तो यह संदर्भ window ऑब्जेक्ट है।

यहां बताया गया है कि ब्राउज़र कंसोल में ऐसे कोड का निष्पादन कैसा दिखता है।

 const test = { fn: function() {   console.log(this) }, arrFn: () => {   console.log(this) } } test.fn() test.arrFn()

इस कीवर्ड में कन्वेंशनल और एरो फंक्शन्स दिए गए हैं

जैसा कि आप देख सकते हैं, इसे एक नियमित फ़ंक्शन में कॉल करने का मतलब है ऑब्जेक्ट को कॉल करना, और this एरो फ़ंक्शन window इंगित करता window ।

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

फंक्शनल एक्सपट्र्स ने तुरंत कॉल किया

तुरंत इनवॉइस फंक्शन एक्सप्रेशन (IIFE) एक ऐसा फंक्शन है जिसे घोषित होने के तुरंत बाद स्वचालित रूप से कॉल किया जाता है।

 ;(function () { console.log('executed') })()

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

उपरोक्त उदाहरण में, executed शब्द कंसोल पर जाएगा, जिसके बाद IIFE बाहर निकल जाएगा। IIFE, अन्य कार्यों की तरह, अपने काम के परिणामों को वापस कर सकता है।

 const something = (function () { return 'IIFE' })() console.log(something)

इस सरल उदाहरण को निष्पादित करने के बाद, कंसोल को IIFE लाइन मिल जाएगी, जो तुरंत फ़ंक्शन अभिव्यक्ति को निष्पादित करने के बाद something गई। ऐसा लग सकता है कि इस तरह के डिजाइन से कोई विशेष लाभ नहीं है। हालाँकि, यदि IIFE में कुछ जटिल गणनाएँ की जाती हैं, जिन्हें केवल एक बार करने की आवश्यकता होती है, जिसके बाद संबंधित तंत्र अनावश्यक हैं - IIFE की उपयोगिता स्पष्ट है। अर्थात्, इस दृष्टिकोण के साथ, IIFE निष्पादित होने के बाद, केवल फ़ंक्शन द्वारा लौटाया गया परिणाम कार्यक्रम में उपलब्ध होगा। इसके अलावा, हम याद रख सकते हैं कि फ़ंक्शन अन्य फ़ंक्शन और ऑब्जेक्ट को वापस करने में सक्षम हैं। हम क्लोजर के बारे में बात कर रहे हैं, हम उनके बारे में नीचे बात करेंगे।

सुविधा अपग्रेड

जावास्क्रिप्ट कोड निष्पादित होने से पहले, इसे पुनर्गठित किया जाता है। हमने पहले से ही वेरिएबल के लिए उत्थापन तंत्र के बारे में बात की थी, जो कि var कीवर्ड का उपयोग करके घोषित किया गया था। एक समान तंत्र कार्यों के साथ काम करता है। अर्थात्, हम इस तथ्य के बारे में बात कर रहे हैं कि निष्पादन से पहले कोड को संसाधित करने के दौरान कार्यों की घोषणाओं को उनके कार्यक्षेत्र के ऊपरी हिस्से में ले जाया जाता है। परिणामस्वरूप, उदाहरण के लिए, यह पता चला है कि आप घोषित होने से पहले फ़ंक्शन को कॉल कर सकते हैं।

 doSomething() //did something function doSomething() { console.log('did something') }

यदि आप एक फ़ंक्शन कॉल को स्थानांतरित करते हैं ताकि यह घोषणा के बाद चला जाए, तो कुछ भी नहीं बदलेगा।

यदि, एक समान स्थिति में, एक कार्यात्मक अभिव्यक्ति का उपयोग किया जाता है, तो एक समान कोड एक त्रुटि फेंक देगा।

 doSomething() //TypeError var doSomething = function () { console.log('did something') }

इस स्थिति में, यह पता चलता है कि हालांकि doSomething चर की घोषणा गुंजाइश के शीर्ष तक बढ़ जाती है, यह असाइनमेंट ऑपरेशन पर लागू नहीं होता है।
यदि, var बजाय, आप एक समान स्थिति में let या const कीवर्ड का उपयोग करते हैं, तो यह कोड भी काम नहीं करेगा, हालाँकि, सिस्टम एक अलग त्रुटि संदेश प्रदर्शित करेगा ( TypeError बजाय ReferenceError ), क्योंकि let और const का उपयोग let समय, चर और निरंतर घोषणाएं नहीं उठाई जाती हैं।

तीर कार्य

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

विशुद्ध रूप से बाहरी दृष्टिकोण से, तीर के कार्यों को घोषित करने के लिए सिंटैक्स सामान्य कार्यों के सिंटैक्स की तुलना में अधिक कॉम्पैक्ट है। यहाँ एक नियमित कार्य की घोषणा है।

 const myFunction = function () { //... }

यहां तीर फ़ंक्शन की घोषणा है, जो सामान्य रूप से, यदि आप तीर के कार्यों की विशेषताओं को ध्यान में नहीं रखते हैं, तो पिछले एक के समान है।

 const myFunction = () => { //... }

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

 const myFunction = (a,b) => a + b console.log(myFunction(1,2)) //3

जैसा कि आप देख सकते हैं, तीर फ़ंक्शन के पैरामीटर, सामान्य कार्यों के मामले में, कोष्ठक में वर्णित हैं। इसके अलावा, यदि ऐसा कोई फ़ंक्शन केवल एक पैरामीटर लेता है, तो इसे कोष्ठक के बिना निर्दिष्ट किया जा सकता है। उदाहरण के लिए, यहां एक फ़ंक्शन है जो 2 से पारित संख्या को विभाजित करने का परिणाम देता है।

 const myFunction = a => a / 2 console.log(myFunction(8)) //4

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

। समारोह के परिणाम की प्रबल वापसी

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

 const myFunction = () => ({value: 'test'}) const obj = myFunction() console.log(obj.value) //test

Word इसको कीवर्ड करें और एरो फंक्शन करें

ऊपर, जब हमने this की विशेषताओं को देखा, तो हमने नियमित और तीर के कार्यों की तुलना की। इस खंड का उद्देश्य आपके मतभेदों के महत्व पर आपका ध्यान आकर्षित करना है। this , अपने आप में, कुछ कठिनाइयों का कारण बन सकता है, क्योंकि यह कोड निष्पादन के संदर्भ पर और इस पर निर्भर करता है कि सख्त मोड सक्षम है या नहीं।

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

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

डोम तत्वों के लिए ईवेंट हैंडलर के रूप में फ़ंक्शन का उपयोग करते समय एक ही समस्या होती है। उदाहरण के लिए, HTML एलिमेंट button उपयोग बटनों का वर्णन करने के लिए किया जाता है। जब उपयोगकर्ता किसी बटन पर क्लिक करता है तो click ईवेंट को click जाता है। कोड में इस घटना का जवाब देने के लिए, आपको पहले संबंधित तत्व का लिंक प्राप्त करना होगा, और फिर इसे एक फ़ंक्शन के रूप में एक इवेंट हैंडलर असाइन करना होगा। ऐसे हैंडलर के रूप में, आप नियमित फ़ंक्शन और एरो फ़ंक्शन दोनों का उपयोग कर सकते हैं। लेकिन, यदि ईवेंट हैंडलर में आपको उस तत्व को एक्सेस करने की आवश्यकता है जिसके लिए इसे कहा जाता है (जो कि this ), एरो फ़ंक्शन यहां काम नहीं करेगा, क्योंकि इसमें उपलब्ध this मान window ऑब्जेक्ट को इंगित करता है। व्यवहार में यह परीक्षण करने के लिए, एक HTML पृष्ठ बनाएं, जिसका कोड नीचे दिखाया गया है, और बटन पर क्लिक करें।

 <!DOCTYPE html> <html> <body>   <button id="fn">Function</button>   <button id="arrowFn">Arrow function</button>   <script>     const f = document.getElementById("fn")     f.addEventListener('click', function () {         alert(this === f)     })     const af = document.getElementById("arrowFn")     af.addEventListener('click', () => {         alert(this === window)     })   </script> </body> </html>

इस स्थिति में, जब आप इन बटनों पर क्लिक करते हैं, तो true युक्त विंडो दिखाई देंगी। हालाँकि, पहचानकर्ता fn साथ बटन के click इवेंट हैंडलर में, बटन के लिए this की समानता की जाँच की जाती है, और पहचानकर्ता arrowFn साथ बटन में, this और window की वस्तु की समानता की जाँच की window है।

परिणामस्वरूप, यदि आपको HTML तत्व के ईवेंट हैंडलर में this कॉल करने की आवश्यकता है, तो एक्शन फ़ंक्शन ऐसे हैंडलर के डिज़ाइन के लिए काम नहीं करेगा।

शॉर्ट सर्किट

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

जब किसी फ़ंक्शन को कॉल किया जाता है, तो उसके पास हर उस चीज तक पहुंच होती है जो बाहरी के दायरे में होती है। लेकिन फ़ंक्शन के अंदर क्या घोषित किया गया है, इसकी कोई पहुंच नहीं है। यही है, यदि किसी फ़ंक्शन में एक चर (या अन्य फ़ंक्शन) घोषित किया गया था, तो वे फ़ंक्शन के निष्पादन के दौरान या इसके काम के पूरा होने के बाद बाहरी कोड के लिए दुर्गम हैं। हालाँकि, यदि किसी अन्य फ़ंक्शन को फ़ंक्शन से वापस किया जाता है, तो इस नए फ़ंक्शन के पास मूल फ़ंक्शन में घोषित की गई सभी चीज़ों तक पहुंच होगी। इस स्थिति में, यह सब बंद में बाहरी कोड से छिपा होगा।

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

 const bark = dog => { const say = `${dog} barked!` ;(() => console.log(say))() } bark(`Roger`) // Roger barked!

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

 const prepareBark = dog => { const say = `${dog} barked!` return () => console.log(say) } const bark = prepareBark(`Roger`) bark() // Roger barked!

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

आइए एक और प्रयोग करें - मूल फ़ंक्शन का उपयोग करके, अलग-अलग कुत्तों के लिए दो नए बनाएं।

 const prepareBark = dog => { const say = `${dog} barked!` return () => {   console.log(say) } } const rogerBark = prepareBark(`Roger`) const sydBark = prepareBark(`Syd`) rogerBark() sydBark()

यह कोड निम्नलिखित आउटपुट देगा।

 Roger barked! Syd barked!

यह पता चलता है कि मान स्थिरांक का मान उस फ़ंक्शन से जुड़ा हुआ है जिसे prepareBark() फ़ंक्शन से लौटाया गया है।

ध्यान दें कि जब आप फिर से prepareBark() कॉल करते say , तो इसे एक नया मान मिलता है, जबकि पहली बार prepareBark() say मूल्य को दर्ज नहीं किया जाता है। मुद्दा यह है कि इस फ़ंक्शन के प्रत्येक कॉल के साथ, एक नया क्लोजर बनाया जाता है।

परिणाम

आज हमने साधारण और तीर के कार्यों के बारे में, उनके घोषणा और उपयोग की विशेषताओं के बारे में बात की, कि this कीवर्ड विभिन्न स्थितियों में कैसे व्यवहार करता है, और बंद होने के बारे में। अगली बार हम सरणियों और छोरों पर चर्चा करते हैं।

प्रिय पाठकों! आप जावास्क्रिप्ट में तीर के कार्यों के बारे में कैसा महसूस करते हैं?

जावास्क्रिप्ट गाइड भाग 4: विशेषताएं