'इस' के 4 अलग-अलग परिदृश्य। सही व्याख्या क्या है?

Question

ये ट्यूट-प्रीमियम Jquery vid ट्यूटोरियल से लिया जाता है।
http://tutsplus.com/lesson/the-this-keyword/ जेफ बताता है कि 'यह' हर बार किस बात का जिक्र कर रहा है लेकिन मुझे यकीन नहीं है कि मैंने उन सभी के पीछे तर्क को समझ लिया है।

E.g. 1

function doSomething(e) { 
e.preventDefault(); 
console.log(this); 
} 

$('a').on('click', doSomething); 

इस मामले में (इस मामले में किया जा रहा है पैरेंट ऑब्जेक्ट)

"इस 'एक' तत्व को संदर्भित करता है" मुझे लगता है कि क्योंकि यहां बयान के बराबर है:

$('a').on('click', function (e) { 
    e.preventDefault(); 
    console.log(this); 
    } 

तो 'ए' मूल वस्तु

ईजी है 2

var obj = { 
    doIt: function(e){ 
    e.preventDefault(); 
    console.log(this); 
    } 
} 

$('a').on('click', obj.doIt); 

इस मामले में (* लेकिन जाहिरा तौर पर यह पैरेंट ऑब्जेक्ट नहीं है?) "यह अभी भी 'एक' तत्व को संदर्भित करता है"

यही वह समय लगता है हम एक विधि लेकिन कॉल कर रहे हैं कथन अभी भी वही चीज़ के बराबर है जैसे ईजी 1

* ट्यूटोरियल में एक चीज़ मुझे थोड़ा उलझन में डालती है। मैंने सोचा कि 'यह' हमेशा मूल वस्तु को संदर्भित करता है, इसलिए इस मामले में 'ए' अभी भी मूल वस्तु है। लेकिन (ट्यूटोरियल में 05.23 पर) वह अनुमान लगाता है कि यह मामला नहीं है, "कई बार ऐसा हो सकता है जब आप चाहते हैं कि यह 'इसके' मूल ऑब्जेक्ट को संदर्भित करे जो 'ओब्जे' होगा, जिसमें वह घटना बनाते हैं .3।

E.g.

$('a').on('click', function(){  
function(){ console.log(this);} 
}; 
e.preventDefault(); 

: 3

var obj = { 
    doIt: function(){ 
    console.log(this); 
    } 
} 

$('a').on('click', function(e){  
obj.doIt(); 
     }; 
e.preventDefault(); 

इस मामले में

मैं तथ्य यह है कि 'इस' एक नेस्टेड समारोह में है के रूप में इस बयान के बराबर के साथ करने के लिए इस अनुमान "इस obj वस्तु को संदर्भित करता है"

मुझे वास्तव में समझ में नहीं आ रहा है कि क्यों, विशेष रूप से जैसा कि मैंने एक लेख में पढ़ा है कि नेस्टेड फ़ंक्शंस 'यह' में अपना रास्ता खो देता है और हेड ऑब्जेक्ट (विंडो ऑब्जेक्ट) को संदर्भित करता है "।

Eg4

var obj = { 
    doIt: function(){ 
    console.log(this);  
    } 
} 

$('a').on('click', function(e){  
     obj.doIt.call(this);    
     e.preventDefault(); 
}); 

इस मामले में

"यह 'एक' का अर्थ है" जावास्क्रिप्ट निश्चित गाइड "दोनों कॉल (करने के लिए पहला तर्क के अनुसार) है जिस पर वस्तु है समारोह को लागू किया जाना है " यहां" यह "पहली तर्क के रूप में प्रयोग किया जाता है। लेकिन "यह" वह वस्तु नहीं है जिस पर फ़ंक्शन लागू किया जाना है ??
मुझे लगता है कि मुझे लगता है कि कॉल फ़ंक्शन फ़ंक्शन का आह्वान करने के लिए है और एक पॉइंटर के रूप में अपने पहले पैरामीटर का उपयोग किसी ऑब्जेक्ट पर करता है लेकिन मुझे नहीं लगता कि 'इस' का उपयोग क्यों करना है कि फ़ंक्शन 'ए' द्वारा लागू किया जाता है। यह कुछ ऐसा नहीं है जिसे मैंने अन्य कॉल() उदाहरणों में देखा है।

इस तरह के एक विशाल पद के लिए खेद है।उम्मीद है कि कोई भी इस चरण से अभी भी पढ़ रहा है ...

Answer 1

मुझे आशा है कि इससे इस मुद्दे को स्पष्ट करने में मदद मिलेगी, यह वास्तव में भ्रमित हो सकता है।

• जब this अपने कोड पर ढीला है, यह वैश्विक वस्तु के पास भेजेगा (वेब ​​ब्राउज़र में, कि window है)।

  console.log(this); // window 
  

• जब this एक वस्तु विधि के अंदर है (जैसे पर अपने जैसे 3), यह वस्तु के पास भेजेगा। यह new, या ऑब्जेक्ट अक्षर (जैसे आपके उदाहरण पर) के साथ स्थापित वस्तुओं का तात्पर्य है।

  var obj = { 
      doIt: function(e){ 
       console.log(this); 
      } 
  } 
  obj.doIt(); // obj 
  

• एक ईवेंट हैंडलर के अंदर, this वस्तु घटना के लिए बाध्य है के पास भेजेगा।

  // This is the plain js equivalent of your jQuery example 
  document.getElementsByTagName['a'][0].addEventListener('click', function(e){ 
      console.log(this); // the first anchor on the document 
  }); 
  
  // This is exactly the same: 
  var clickHandler = function(e){ 
      console.log(this); // the first anchor on the document 
  }; 
  document.getElementsByTagName['a'][0].addEventListener('click', clickHandler); 
  
  // Even if the handler is defined inside of another object, this will be 
  // the obj the event is bound to. It's the case of your E.g. 2 
  var obj = { 
      doIt: function(e){ 
       console.log(this); // the first anchor on the document 
      } 
  } 
  document.getElementsByTagName['a'][0].addEventListener('click', obj.doIt); 
  // When you pass obj.doIt to addEventListener above, you are passing a reference 
  // to that function. It's like "stealing" the function from the object 
  

• एक वस्तु Function.call या Function.apply को पहले पैरामीटर के रूप में पारित किया जाता है, यदि this समारोह यह वस्तु आप पारित कर दिया के पास भेजेगा के अंदर प्रकट होता है। यह this को इंगित करने का एक तरीका है।

  var obj = { 
      doIt: function(){ 
       console.log(this); // window 
      } 
  } 
  obj.doIt.call(window); 
  

Answer 2

this जावास्क्रिप्ट में व्यवहार पहले थोड़ा उलझन में है। असल में, चर के विपरीत (जो स्थिर रूप से स्कॉप्ड हैं), thisगतिशील रूप से स्कॉप्ड है। यही है, this का मान उस स्थान पर निर्धारित किया जाता है जहां आपने कॉल पर लिखा था, जहां आपने इसे लिखा था।

जब आप अपना कार्य on पर पास करते हैं, तो इसे बाद में संदर्भ से बुलाया जाता है जहां this प्रश्न में तत्व है। यह पर निर्भर करता है कि आपको यह फ़ंक्शन कैसे मिला। ऐसा कहने के लिए, एक फ़ंक्शन परवाह नहीं है कि आप इसे obj.fn जैसे सिंटैक्स का उपयोग करके एक्सेस करते हैं या सिर्फ इसका नाम fn - अभिव्यक्ति का मूल्य किसी भी मामले में समान है।

कार्यों के अलावा अन्य चीजों के साथ, यह समझ में आता है। यह देखते हुए:

var a = 10, 
    obj = { a : 10 }; 

आप सहमत हैं कि भाव a और obj.a एक ही मूल्य है। यह कार्यों के बारे में भी सच है।

संक्षेप में: this का मान इस बात पर निर्भर करता है कि आपने इसे कहां और कहां घोषित किया है या इसे कहने से पहले आपने इसे कैसे संदर्भित किया है।

Answer 3

https://developer.mozilla.org/en/JavaScript/Reference/Operators/thisthis कीवर्ड में संक्षिप्त परिचय है। और call() के संदर्भ में देखें।

jQuery कॉल के रूप में (हाँ, .call() विधि के साथ) डोम तत्व के संदर्भ में ईवेंट हैंडलर, आपके सभी उदाहरण समझाए गए हैं।

Answer 4

सच इन प्रतिक्रियाओं लोग सराहना करते हैं। मैं जल्दी घंटे में तैनात और कोशिश की है (& आवश्यक) आपकी प्रतिक्रिया को पचाने के लिए समय का एक सा लेने के लिए।

https://developer.mozilla.org/en/JavaScript/Reference/Operators/this एक महान चिल्लाओ था। मैंने काफी कुछ लेख/टट पढ़े हैं और यह एक बेहतर लोगों में से एक जैसा लगता है।

मुझे लगता है कि मुख्य ज्ञान दिया गया है कि वस्तु के लिए बाध्य 'इस' कैसे/जहां समारोह (संदर्भ बुला) के बजाय कैसे या जहाँ समारोह परिभाषित किया गया था की तुलना में बुलाया गया था द्वारा निर्धारित होता है।

तो बस क्यू & एक गुंजाइश के लिए चीजों को वापस और तुम लोग क्या प्रतिक्रिया व्यक्त की है की रोशनी में अपने ही क्यू जवाब देने के लिए प्रयास करने के लिए ...

जैसे 1 यहाँ: 'DoSomething' समारोह क्लिक हैंडलर के संदर्भ में कहा जाता था तो वस्तु के लिए बाध्य 'इस' है "एक"

जैसे 2 फिर क्लिक हैंडलर अभी भी समारोह ट्रिगर कर रहा है तो वस्तु के लिए बाध्य 'इस' है "एक"

जैसे 3 नेस्टेड समारोह में बुला संदर्भ obj.doIt है()। इसलिए, जैसा कि वह ट्यूटोरियल में कहता है, 'इस' से जुड़ी वस्तु "obj" है।

हालांकि, नीचे दिए गए उदाहरण developer.mozilla.org से समान तर्क के आधार पर, वस्तु वास्तव में करने के लिए "obj.doIt" बाध्य नहीं है:

o.b = {g: independent, prop: 42};   
console.log(o.b.g()); // logs 42   

"इस बंधन केवल सबसे से प्रभावित होता है । तत्काल सदस्य संदर्भ ... इस समारोह के अंदर तथ्य यह है कि वस्तु ही ओ का एक सदस्य है कोई परिणाम है ओबी के संदर्भित करेंगे;। सबसे तत्काल संदर्भ वह सब मायने रखती है "

E.g. 4

यहां - 'कॉल' का काम अप्रत्यक्ष रूप से फ़ंक्शन का आह्वान करना है जैसे कि यह एक नई वस्तु का एक तरीका है - इस मामले में हमने इसे 'इस' के रूप में परिभाषित किया है। यहां 'यह' को "ए 'से संदर्भित किया गया है क्योंकि यह क्लिक हैंडलर द्वारा ट्रिगर किए गए फ़ंक्शन का हिस्सा है।

मुझे उम्मीद है कि यह थोड़ा करीब है। मुझे इस पर एक डंसे लग रहा है (सख्त पन इरादा) क्योंकि जवाब हैं मुझे अभी तक प्रस्तुत किया गया है कि मैं अभी भी पूरी तरह से भरोसा नहीं कर रहा हूं। मैं अवधारणा का पालन कर रहा हूं।

अगर मुझे पचाने के लिए थोड़ी देर के लिए अपने छेद पर वापस क्रॉल करना है, तो मैं नई स्थिति की मांग करता हूं, जावास्क्रिप्ट & केवल एक के लिए JQuery कुछ हफ्ते अब

फिर से प्रतिक्रिया के लिए धन्यवाद।