सभी को नमस्कार! सितंबर के अंत में,
"फुलस्टैक जावास्क्रिप्ट डेवलपर" पाठ्यक्रम की एक नई धारा
OTUS पर शुरू होगी। कक्षाओं की शुरुआत की प्रत्याशा में, हम आपके साथ एक लेखक के लेख को विशेष रूप से पाठ्यक्रम के छात्रों के लिए तैयार करना चाहते हैं।
लेख के लेखक: पावेल याकूपोव
पूर्वावलोकन। मैं तुरंत ध्यान देना चाहता हूं कि इस लेख में "निन्जा" से परिचित विषयों की जांच की जाती है, और इस लेख का उद्देश्य भाषा की कुछ बारीकियों को बेहतर ढंग से समझना है, और उन कार्यों में नहीं खोना है जो वे अक्सर एक साक्षात्कार के दौरान देते हैं - आखिरकार, ऐसे वास्तविक विकास से कार्य का कोई लेना देना नहीं है, और जो लोग उन्हें देते हैं, वे अक्सर इस तरह से समझने की कोशिश करते हैं कि आप जावास्क्रिप्ट कितनी अच्छी तरह जानते हैं।
संदर्भ स्मृति प्रकार
जावास्क्रिप्ट में डेटा कितना सही संग्रहीत है? कई प्रोग्रामिंग पाठ्यक्रम क्लासिक के साथ व्याख्या करना शुरू करते हैं: एक चर "बॉक्स" का एक प्रकार है जिसमें हम कुछ डेटा संग्रहीत करते हैं। जो लोग, ऐसा लगता है, ऐसा लगता है कि यह डायनामिक टाइपिंग वाली भाषाओं के लिए महत्वपूर्ण नहीं है: दुभाषिया किसी भी प्रकार के डेटा को "निगल" करेगा और यदि आवश्यक हो तो प्रकार को बदल सकता है, और आपको चर के प्रकारों के बारे में नहीं सोचना चाहिए और उन्हें कैसे संसाधित किया जाता है। कौन सा कोर्स गलत है, और इसलिए हम आज की चर्चा उन विशेषताओं के साथ शुरू करेंगे जो अक्सर फिसल जाती हैं: कैसे चर को जावास्क्रिप्ट में संग्रहीत किया जाता है - आदिम (कॉपी) या लिंक के रूप में।
हम तुरंत उन प्रकारों के प्रकारों को सूचीबद्ध करेंगे जो आदिम के रूप में संग्रहीत किए जा सकते हैं: ये
boolean ,
null ,
undefined ,
Number ,
String ,
Symbol ,
BigInt । जब हम इस डेटा प्रकार के साथ अलग-अलग घोषित चर का सामना करते हैं, तो हमें याद रखना चाहिए कि प्रारंभिक आरंभीकरण के दौरान वे एक मेमोरी सेल बनाते हैं - और उन्हें मूल्य द्वारा सौंपा, कॉपी, हस्तांतरित और वापस किया जा सकता है।
जावास्क्रिप्ट के बाकी संदर्भित स्मृति क्षेत्रों पर निर्भर करता है। उनकी आवश्यकता क्यों है? भाषा के रचनाकारों ने एक ऐसी भाषा बनाने की कोशिश की जिसमें स्मृति का आर्थिक रूप से यथासंभव उपयोग किया जाएगा (और यह उस समय बिल्कुल नया नहीं था)। उदाहरण के लिए, कल्पना करें कि आपको तीन नए कार्य सहयोगियों के नामों को याद करने की आवश्यकता है - पूरी तरह से नए नाम, और तुलना बढ़ाने के लिए, भारत या चीन के अपने नए सहयोगियों को आपके लिए असामान्य नामों के साथ। अब कल्पना करें कि आपके सहकर्मियों को स्कूल में आपके और आपके दो सबसे अच्छे दोस्तों की तरह ही बुलाया जाता है। किस स्थिति में याद रखना आसान होगा? यहां, एक व्यक्ति और एक कंप्यूटर की मेमोरी इसी तरह काम करती है। यहाँ कुछ विशिष्ट उदाहरण दिए गए हैं:
let x = 15;
इस प्रकार, यदि आप एक साक्षात्कार में एक समान कार्य का सामना करते हैं, तो तुरंत यह समझने की कोशिश करें कि आपके सामने किस प्रकार का डेटा है - यह कहां से आया और इसे कैसे मिला, एक आदिम प्रकार के रूप में, या एक संदर्भ के रूप में।
प्रसंग का काम
यह समझने के लिए कि संदर्भ जेएस में कैसे काम करता है, आपको कुछ बिंदुओं का अध्ययन करने की आवश्यकता है:
- दृश्यता का वैश्विक / स्थानीय स्तर।
- वैश्विक / स्थानीय दायरे में चर को आरंभ करते समय संदर्भ में अंतर।
- तीर कार्य।
एक बार, ES5 में वापस, सब कुछ काफी सरल था: केवल var का उपयोग करके एक चर घोषणा थी, जिसे प्रोग्राम फ्लो में घोषित किए जाने पर वैश्विक माना जाता था (जिसका अर्थ था कि वैरिएबल को किसी वैश्विक ऑब्जेक्ट, जैसे
window या
global रूप में असाइन किया गया था)। फिर
let और
const सीन आए, जो कुछ अलग व्यवहार करते हैं: वे वैश्विक ऑब्जेक्ट को नहीं सौंपे गए हैं, और ब्लॉक स्कोप पर ध्यान केंद्रित करते हुए मेमोरी में संग्रहीत हैं। अब var को पहले से ही अप्रचलित माना जाता है, क्योंकि इसके उपयोग से वैश्विक क्षेत्र का दबदबा हो सकता है, और इसके अलावा,
let और अधिक अनुमान लगाते हैं।
1. तो, समझने के लिए यह स्पष्ट रूप से समझने योग्य है कि जावास्क्रिप्ट (स्कोप) में क्या हैं। यदि निर्देश का उपयोग करके वैश्विक दायरे में एक चर घोषित किया जाता है, तो इसे
window ऑब्जेक्ट को नहीं सौंपा जाता है, लेकिन वैश्विक रूप से सहेजा जाता है।
आइए उन कार्यों को आगे बढ़ाएं जो अक्सर साक्षात्कार में प्रासंगिक प्रश्नों पर शुरुआती होते हैं।
//: ? let x = 15; function foo(){ let x = 13; return x; } console.log(x)// 15 foo(); console.log(x)// x = foo(); console.log(x)// return ,
2. एक ही समय में, सभी शुरुआती यह नहीं जानते हैं कि जावास्क्रिप्ट दुभाषिया कोड को कैसे पढ़ता है: वास्तव में, यह इसे दो बार पढ़ता है, पहली बार जब यह फ़ंक्शन डिक्लेरेशन के रूप में घोषित कार्यों का कोड पढ़ता है (और दूसरे, वास्तविक पढ़ने और निष्पादन पर उन्हें निष्पादित करने के लिए तैयार है) )। एक और छोटी चाल,
var से संबंधित है और
let : पहली बार
var निर्देश के साथ एक चर पढ़ा जाता है, यह
undefined सेट है। लेकिन
let साथ
let इसकी समय से पहले कॉल संभव नहीं है:
console.log(x); console.log(y) var x = 42; let y = 38;
3. ES6 में दिखाई देने वाले एरो फ़ंक्शंस ने तेज़ी से लोकप्रियता हासिल की - वे प्रोग्रामर द्वारा
Node.js (इंजन के त्वरित अपडेट के कारण) और
रिएक्ट (लाइब्रेरी की विशेषताओं और बेबेल के अपरिहार्य उपयोग के कारण) द्वारा जल्दी अपनाए गए। संदर्भ के संबंध में, तीर के कार्य निम्नलिखित नियम का पालन करते हैं: वे इसके लिए बाध्य नहीं होते हैं। हम इसका उदाहरण देते हैं:
var x = 4; var y = 4; function mult(){ return this.x * this.y; } let foo = mult.bind(this); console.log(foo()); let muliply = ()=>x*y; console.log(muliply()); /* x y let, function declaration */
डेटा प्रकार और क्या लागू होता है
मान लें कि यह सही है: एक सरणी अनिवार्य रूप से एक ऑब्जेक्ट है, और जावास्क्रिप्ट में यह ऑब्जेक्ट की पहली भिन्नता नहीं है - मानचित्र, कमजोर, सेट और संग्रह इसकी पुष्टि करते हैं।
तो, एक सरणी एक वस्तु है, और जेएस में एक नियमित वस्तु से इसका अंतर है, सबसे पहले, अनुक्रमण के अनुकूलन के कारण काम की एक उच्च गति, और दूसरा, Array.prototype से विरासत, जो तरीकों का एक बड़ा सेट प्रदान करता है, जो क्यों है बिग ब्रदर »
Object.prototype ।
console.log(typeof({})) console.log(typeof([])) console.log(typeof(new Set)) console.log(typeof(new Map)) //
डेटा प्रकारों में विषमताओं की कतार में अगला
null । यदि आप जावास्क्रिप्ट से पूछते हैं कि किस प्रकार का डेटा अशक्त है, तो हमें काफी स्पष्ट जवाब मिलता है। हालाँकि, यहाँ यह कुछ ट्रिक्स के बिना नहीं होगा:
let x = null; console.log(typeof(x)); //! , null objet, ? console.log(x instanceof Object.prototype.constructor); //false // ! )
यह याद रखने योग्य है कि
null एक विशेष डेटा प्रकार है - हालांकि पिछले उदाहरण की शुरुआत दूसरे के साथ कड़ाई से इंगित की गई है। इस विशेष प्रकार को भाषा में क्यों जोड़ा गया, इसकी बेहतर समझ के लिए, यह मुझे लगता है कि यह C ++ या C # सिंटैक्स की मूल बातें तलाशने लायक है।
और निश्चित रूप से, एक साक्षात्कार में अक्सर ऐसा काम होता है, जिसकी ख़ासियत गतिशील टाइपिंग से संबंधित होती है:
console.log(null==undefined);//true console.log(null===undefined);// false
जेएस की तुलना करते समय बड़ी संख्या में ट्रिक्स टाइप कास्टिंग से जुड़े होते हैं; हम शारीरिक रूप से उन सभी को यहां लाने में सक्षम नहीं हैं। हम
"क्या नरक जावास्क्रिप्ट" का जिक्र करने की सलाह देते हैं।
विकास प्रक्रिया के दौरान भाषा में छोड़ी गई इलॉजिकल विशेषताएं
लाइनों का जोड़। वास्तव में, संख्या के साथ तार के जोड़ को भाषा के विकास में त्रुटियों के लिए जिम्मेदार नहीं ठहराया जा सकता है, लेकिन जावास्क्रिप्ट के संदर्भ में यह अच्छी तरह से ज्ञात उदाहरणों के लिए प्रेरित किया गया है जो कि तार्किक रूप से पर्याप्त नहीं माना जाता है:
codepen.io/pen/?editors=0011 let x = 15; let y = "15"; console.log(x+y);// "" console.log(xy); //
तथ्य यह है कि प्लस केवल संख्याओं के साथ लाइनों को जोड़ता है, अपेक्षाकृत अतार्किक है, लेकिन आपको इसे याद रखने की आवश्यकता है। यह विशेष रूप से असामान्य हो सकता है क्योंकि अन्य दो व्याख्या की गई भाषाएं जो लोकप्रिय हैं और व्यापक रूप से वेब विकास में उपयोग की जाती हैं - PHP और पायथन - तार और संख्याओं के जोड़ के साथ ऐसी चालें नहीं फेंकते हैं और इस तरह के संचालन में बहुत अधिक भविष्यवाणी करते हैं।
इसी तरह के उदाहरण कम ज्ञात हैं, उदाहरण के लिए, NaN के साथ:
console.log(NaN == NaN); //false console.log(NaN > NaN); //false console.log(NaN < NaN); //false … ... , NaN? console.log(typeof(NaN)); // number
अक्सर NaN अप्रिय आश्चर्य लाता है अगर, उदाहरण के लिए, आपने गलत तरीके से कॉन्फ़िगर की गई जाँच की।
0.1 +0.2 के साथ उदाहरण बहुत अधिक प्रसिद्ध है - क्योंकि यह त्रुटि IEEE 754 प्रारूप से संबंधित है, जिसका उपयोग इस तरह के "गणितीय" पायथन में भी किया जाता है।
हम एप्सिलॉन नंबर के साथ एक कम ज्ञात बग भी शामिल करते हैं, जिसके कारण एक ही नस में है:
console.log(0.1+0.2)// 0.30000000000000004 console.log(Number.EPSILON);// 2.220446049250313e-16 console.log(Number.EPSILON + 2.1) // 2.1000000000000005
और प्रश्न जो थोड़े अधिक जटिल हैं:
Object.prototype.toString.call([])// ? // -> '[object Array]' Object.prototype.toString.call(new Date) // Date? // -> '[object Date]'
घटना प्रसंस्करण चरणों
कई शुरुआती ब्राउज़र की घटनाओं को नहीं समझते हैं। अक्सर अपरिचित भी सबसे बुनियादी सिद्धांत हैं जिनके द्वारा ब्राउज़र की घटनाएं काम करती हैं - अवरोधन, चढ़ाई, और डिफ़ॉल्ट घटनाएं। एक शुरुआत के दृष्टिकोण से सबसे रहस्यमय बात एक घटना का उद्भव है जो, कोई संदेह नहीं है, शुरुआत में उचित है सवाल उठाता है। एक पॉपअप निम्नानुसार काम करता है: जब आप एक नेस्टेड डोम तत्व पर क्लिक करते हैं, तो ईवेंट न केवल उस पर, बल्कि अभिभावक पर भी फायर करता है, अगर इस तरह के ईवेंट के साथ एक हैंडलर भी पेरेंट पर स्थापित किया गया था।
किसी घटना के सामने आने पर हमें इसे रद्द करने की आवश्यकता हो सकती है।
// , function MouseOn(e){ this.style.color = "red"; e.stopPropagation(); // }
इसके अलावा, शुरुआती लोगों के लिए यह अक्सर डिफ़ॉल्ट रूप से होने वाली घटनाओं को रद्द करने के लिए एक समस्या है। प्रपत्र विकसित करते समय यह विशेष रूप से महत्वपूर्ण है - क्योंकि प्रपत्र सत्यापन, उदाहरण के लिए, क्लाइंट पक्ष और सर्वर साइड दोनों पर किए जाने की आवश्यकता है:
codepen.io/isakura313/pen/GRKMdaR?editors=0010 document.querySelector(".button-form").addEventListener( 'click', function(e){ e.preventDefault(); console.log(' . , ') } )
किसी ईवेंट के सरफेसिंग को रद्द करना कुछ परेशानियां भी ला सकता है: उदाहरण के लिए, आप एक तथाकथित "डेड ज़ोन" बना सकते हैं जिसमें आवश्यक चीज़ काम नहीं करेगी - उदाहरण के लिए, एक तत्व की एक घटना जो पास होने के लिए "भाग्यशाली नहीं" है।
ध्यान देने के लिए आप सभी का धन्यवाद! यहां कुछ उपयोगी लिंक दिए गए हैं जिनसे आप बहुत सारी उपयोगी जानकारी प्राप्त कर सकते हैं:
वह सब है। हम 12 सितंबर को आयोजित होने वाले
मुफ्त वेबिनार में आपका इंतजार कर रहे हैं।