सेट "यह" चर आसानी से?

Question

मुझे जावास्क्रिप्ट की बहुत अच्छी समझ है, सिवाय इसके कि मैं "यह" चर सेट करने के लिए एक अच्छा तरीका नहीं समझ सकता। विचार करें:

var myFunction = function(){
    alert(this.foo_variable);
}

var someObj = document.body; //using body as example object
someObj.foo_variable = "hi"; //set foo_variable so it alerts

var old_fn = someObj.fn;   //store old value
someObj.fn = myFunction;   //bind to someObj so "this" keyword works
someObj.fn();              
someObj.fn = old_fn;       //restore old value

क्या अंतिम 4 लाइनों के बिना ऐसा करने का कोई तरीका है? यह बल्कि कष्टप्रद है ... मैंने एक अनाम फ़ंक्शन को बांधने की कोशिश की है, जो मुझे लगा कि सुंदर और चतुर था, लेकिन कोई फायदा नहीं हुआ:

var myFunction = function(){
    alert(this.foo_variable);
}

var someObj = document.body;        //using body as example object
someObj.foo_variable = "hi";        //set foo_variable so it alerts
someObj.(function(){ fn(); })();    //fail.

जाहिर है, चर को myFunction में पास करना एक विकल्प है ... लेकिन यह इस प्रश्न का बिंदु नहीं है।

धन्यवाद।

Answer 1

जावास्क्रिप्ट में सभी कार्यों के लिए दो तरीके परिभाषित हैं call(), और apply()। फ़ंक्शन सिंटैक्स इस तरह दिखता है:

call( /* object */, /* arguments... */ );
apply(/* object */, /* arguments[] */);

ये कार्य जो करते हैं, वे उस फ़ंक्शन को कहते हैं, जिस पर उन्हें ऑब्जेक्ट पैरामीटर का मान असाइन किया गया था ।

var myFunction = function(){
    alert(this.foo_variable);
}
myFunction.call( document.body );

Comments

इसके अलावा, यदि आप jQuery का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं $.proxy(function, element)ताकि जब भी उस फ़ंक्शन को कॉल किया जाए, तो यह तत्व के संदर्भ में होगा। api.jquery.com/jquery.proxy

— ट्रेविन एवरी

एक अन्य उपयोगी विधि है.bind()

— सोरस फलाहती

Answer 2

मुझे लगता है कि आप देख रहे हैं call:

myFunction.call(obj, arg1, arg2, ...);

यह सेट के myFunctionसाथ कॉल करता thisहै obj।

वहाँ भी थोड़ा अलग तरीका है apply, जो एक सरणी के रूप में फ़ंक्शन पैरामीटर लेता है:

myFunction.apply(obj, [arg1, arg2, ...]);

Comments

धारा 15.3.4.3, 15.3.4.4 और 10.1.8 को ECMAScript भाषा में देखें विशिष्टता: ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

— कुछ

Answer 3

यदि आप thisकिसी फ़ंक्शन को मान 'स्टोर' करना चाहते हैं, ताकि आप इसे बाद में कॉल कर सकें (जैसे कि जब आपके पास अब उस मूल्य तक पहुंच नहीं है), तो आप bindयह कर सकते हैं (हालांकि सभी ब्राउज़रों में उपलब्ध नहीं):

var bound = func.bind(someThisValue);

// ... later on, where someThisValue is not available anymore

bound(); // will call with someThisValue as 'this'

Comments

FYI bindजाहिरा तौर पर IE9 +, FF4 +, Safari 5.1.4+ और Chrome 7+ (स्रोत) में उपलब्ध है । आप किसी अनाम फ़ंक्शन पर सीधे बाइंड भी कर सकते हैं:var myFunction = function(){ /* this = something */ }.bind(something);

— एडम

Answer 4

बाँधने की मेरी खोज this मुझे यहाँ ले आई, इसलिए मैं अपने निष्कर्षों को पोस्ट कर रहा हूँ: 'ECMAScript 2015' में हम इस शब्द का उपयोग तीर के कार्यों के लिए भी कर सकते हैं।

देखें: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

के बजाय:

function Person() {
  setInterval(function growUp() {
    // The callback refers to the `self` variable of which
    // the value is the expected object.
    this.age++;
  }.bind(this), 1000);
}

अब हम कर सकते हैं:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

Answer 5

सेटिंग कर रहा है thisजावास्क्रिप्ट में कीवर्ड ।

जावास्क्रिप्ट को thisकीवर्ड को सुविधाजनक तरीके से सेट करने के लिए 3 तरीकों से बनाया गया है । वे सभी Function.prototypeऑब्जेक्ट पर स्थित हैं, इसलिए प्रत्येक फ़ंक्शन उनका उपयोग कर सकता है (चूंकि प्रत्येक फ़ंक्शन इस प्रोटोटाइप से विरासत में विरासत के माध्यम से प्राप्त होता है)। ये कार्य निम्नलिखित हैं:

1. Function.prototype.call(): यह फ़ंक्शन उस ऑब्जेक्ट को लेता है जिसे आप thisपहले तर्क के रूप में उपयोग करना चाहते हैं । फिर शेष तर्कों को फ़ंक्शन के संबंधित तर्क दिए जाते हैं जिसे कहा जाता है।
2. Function.prototype.apply(): यह फ़ंक्शन उस ऑब्जेक्ट को लेता है जिसे आप thisपहले तर्क के रूप में उपयोग करना चाहते हैं । फिर दूसरा तर्क एक सरणी है जिसमें फ़ंक्शन के तर्कों के मान शामिल हैं जिन्हें कहा जाता है (सरणी का पहला तत्व फ़ंक्शन का पहला तर्क है, सरणी का दूसरा तर्क फ़ंक्शन का दूसरा तर्क है आदि)।
3. Function.prototype.bind(): यह फ़ंक्शन एक नया फ़ंक्शन देता है जिसका एक अलग मूल्य है this। वह ऑब्जेक्ट लेता है जिसे आप thisपहले तर्क के रूप में मान के रूप में सेट करना चाहते हैं और फिर एक नया फ़ंक्शन ऑब्जेक्ट लौटाते हैं।

कॉल / अप्लाई और बाइंड के बीच अंतर:

• callऔर applyइस तथ्य के समान हैं कि वे तुरंत फ़ंक्शन को कहते हैं (पूर्वनिर्धारित मूल्य के साथ this)
• bindसे अलग है callऔर applyइस तथ्य में कि यह फ़ंक्शन मान के एक अलग बंधन के साथ एक नया फ़ंक्शन देता हैthis ।

उदाहरण:

const thisObj = {
  prop1: 1,
  prop2: 2,
};

function myFunc(arg1, arg2) {
  console.log(this.prop1, this.prop2);
  console.log(arg1, arg2);
}

// first arg this obj, other arguments are the  
// respective arguments of the function
myFunc.call(thisObj, 'Call_arg1', 'Call_arg2');

// first arg this obj, other argument is an array which  
// are the respective arguments of the function
myFunc.apply(thisObj, ['Apply_arg1', 'Apply_arg2']);


// the bind method returns a new function with a different
// this context which is stored in the newMyFunc variable
const newMyFunc = myFunc.bind(thisObj);

// now we can call the function like a normal function 
newMyFunc('first', 'second');