दूसरे उत्तरों से असंतुष्ट। 2019/3/13 के शीर्ष मतदान का उत्तर तथ्यात्मक रूप से गलत है।
=>इसका क्या अर्थ है इसका संक्षिप्त रूप संस्करण है, यह एक फ़ंक्शन लिखने और वर्तमान के लिए बाध्य करने के लिए एक शॉर्टकट हैthis
const foo = a => a * 2;
के लिए प्रभावी रूप से एक शॉर्टकट है
const foo = function(a) { return a * 2; }.bind(this);
आप उन सभी चीजों को देख सकते हैं जो छोटी हो गईं। हमें जरूरत नहीं थी function, न returnही.bind(this) और ही ब्रेसिज़ या कोष्ठक की भी
तीर फ़ंक्शन का एक लंबा लंबा उदाहरण हो सकता है
const foo = (width, height) => {
const area = width * height;
return area;
};
यह दिखाते हुए कि यदि हम फ़ंक्शन के लिए कई तर्क चाहते हैं, तो हमें कोष्ठकों की आवश्यकता है और यदि हम एकल अभिव्यक्ति से अधिक लिखना चाहते हैं, तो हमें एक स्पष्ट और स्पष्ट विवरण चाहिए return ।
.bindभाग को समझना महत्वपूर्ण है और यह एक बड़ा विषय है। यह thisजावास्क्रिप्ट में क्या मतलब है के साथ क्या करना है।
सभी कार्यों में एक अंतर्निहित पैरामीटर होता है जिसे कहा जाता है this। किस तरहthisकिसी फ़ंक्शन को कॉल करते समय सेट किया जाता है यह उस फ़ंक्शन को कैसे कहा जाता है पर निर्भर करता है।
लेना
function foo() { console.log(this); }
यदि आप इसे सामान्य रूप से कहते हैं
function foo() { console.log(this); }
foo();
this वैश्विक वस्तु होगी।
यदि आप सख्त मोड में हैं
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
यह undefined
आप thisसीधे callया का उपयोग कर सेट कर सकते हैंapply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
आप thisबिंदी ऑपरेटर के उपयोग से भी निर्धारित कर सकते हैं.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
एक समस्या तब आती है जब आप किसी फ़ंक्शन को कॉलबैक या श्रोता के रूप में उपयोग करना चाहते हैं। आप क्लास बनाते हैं और कॉलबैक के रूप में एक फ़ंक्शन असाइन करना चाहते हैं जो क्लास का एक उदाहरण एक्सेस करता है।
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
उपरोक्त कोड काम नहीं करेगा क्योंकि जब तत्व ईवेंट को फायर करता है और फ़ंक्शन को कॉल करता है this मूल्य वर्ग का उदाहरण नहीं होगा।
उस समस्या को हल करने का एक सामान्य तरीका उपयोग करना है .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
क्योंकि एरो सिंटैक्स वही काम करता है जो हम लिख सकते हैं
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bindप्रभावी ढंग से एक नया कार्य करता है । यदि bindमौजूद नहीं था तो आप मूल रूप से इस तरह से अपना खुद का बना सकते हैं
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
प्रसार ऑपरेटर के बिना पुराने जावास्क्रिप्ट में यह होगा
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
उस कोड को समझना क्लोजर की समझ की आवश्यकता है , लेकिन लघु संस्करण bindएक नया फ़ंक्शन बनाता है जो मूल फ़ंक्शन को हमेशा उस thisमूल्य के साथ कॉल करता है जो इसके लिए बाध्य था। एरो फंक्शन वही काम करते हैं क्योंकि वे एक शॉर्टकट हैंbind(this)
