जावास्क्रिप्ट कॉल () और लागू () बनाम बाइंड ()?

Question

मुझे पहले से ही पता है applyऔरcall समान कार्य हैं जो सेट this(एक फ़ंक्शन का संदर्भ) हैं।

अंतर हम तर्क भेजने के तरीके के साथ है (मैनुअल बनाम सरणी)

सवाल:

लेकिन मुझे bind()विधि का उपयोग कब करना चाहिए ?

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

jsbin

Comments

यह आपकी गलती नहीं है अगर ऐसे उपयोगकर्ता हैं जो उत्तर देने या उत्थान करने से पहले ओपी की प्रतिष्ठा के बिंदुओं को देखते हैं :)

— गेब्रियल लामलास

कॉल औरएक कॉल फ़ंक्शन को लागू करते हुए बाइंड एक फ़ंक्शन बनाता है। यद्यपिcall()आप व्यक्तिगतapply()रूप सेऔरएक तर्क सरणी के रूप मेंतर्क पारित करते हैं। अधिक जानकारी के लिए लिंक किए गए दस्तावेज़ीकरण की जांच करें जो आपके प्रश्न का पूरी तरह से उत्तर देने में सक्षम होना चाहिए।

— नोप

kind of weird there is not an existing question about this :उस के बारे मेन। संभवतः ऐसा इसलिए है क्योंकि bind()जावास्क्रिप्ट 1.8.5 - ECMA-262, 5 वें संस्करण में पहले से मौजूद अन्य दो के बाद जोड़ा गया था। जबकि call()और apply()जावास्क्रिप्ट 1.3 के बाद से आसपास किया गया है - ECMA-262 3 संस्करण। SO के उन पर सवाल हैं जैसे: क्या-क्या-अंतर-के बीच-कॉल-और-लागू होता है । मैं केवल अनुमान लगा रहा हूं, क्योंकि मैं सोच रहा था कि मैं खुद हूं।

— नोप

क्या आपको इन तरीकों (कॉल, अप्लाई, बाइंड) की आवश्यकता है ?? इसके बिना आप विधि को भी कॉल कर सकते हैं और यह केवल ऑब्जेक्ट को इंगित करेगा

— माही

चेकआउट द लिंक - Techyaura-blogs.blogspot.com/2020/05/…

— techyaura

Answer 1

मैंने फंक्शन ऑब्जेक्ट्स, फंक्शन कॉल्स call/applyऔर bindथोड़ी देर पहले यह तुलना की थी:

.bindआपको भविष्य में फ़ंक्शन को निष्पादित करने की अनुमति देते हुए अबthis मूल्य निर्धारित करने की अनुमति देता है , क्योंकि यह एक नया फ़ंक्शन ऑब्जेक्ट देता है।

Answer 2

उपयोग करें .bind()जब आप चाहते हैं कि बाद में एक निश्चित संदर्भ के साथ उस फ़ंक्शन को बुलाया जाए, जो घटनाओं में उपयोगी है। उपयोग .call()या .apply()जब आप फ़ंक्शन को तुरंत लागू करना चाहते हैं, और संदर्भ को संशोधित करें।

फ़ंक्शन को तुरंत कॉल / लागू करें, जबकि bindएक फ़ंक्शन देता है, जो बाद में निष्पादित होने पर, मूल फ़ंक्शन को कॉल करने के लिए सही संदर्भ सेट होगा। इस तरह से आप async कॉलबैक और घटनाओं में संदर्भ बनाए रख सकते हैं।

मैं यह बहुत कुछ करता हूं:

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

मैं इसे Async कॉलबैक के लिए Node.js में बड़े पैमाने पर उपयोग करता हूं, जिसके लिए मैं एक सदस्य विधि पारित करना चाहता हूं, लेकिन फिर भी वह संदर्भ चाहता हूं कि वह उदाहरण है जिसने async कार्रवाई शुरू की है।

बाँध का एक सरल, निष्कपट कार्यान्वयन इस प्रकार होगा:

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

इसके लिए और भी बहुत कुछ है (जैसे अन्य आर्स पास करना), लेकिन आप इसके बारे में अधिक पढ़ सकते हैं और एमडीएन पर वास्तविक कार्यान्वयन देख सकते हैं ।

उम्मीद है की यह मदद करेगा।

Comments

@RoyiNamir सही है, आप बाद में दिए गए "बाउंड" फ़ंक्शन का उपयोग कर सकते हैं, और संदर्भ बनाए रखा जाएगा।

— चाड

ठीक वैसा ही होता bindहै।

— चाड

@RoyiNamir ने मेरे उत्तर को संपादित किया

— चाड

आप फंक्शंस को कॉल करने से पहले तर्क के लिए भी बाँध सकते हैं।

— एंड्रयू किर्केगार्ड

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

— चाड

Answer 3

वे सभी इसे फ़ंक्शन (या ऑब्जेक्ट) में संलग्न करते हैं और अंतर फ़ंक्शन इनवोकेशन (नीचे देखें) में है।

कॉल इसे फ़ंक्शन में संलग्न करता है और फ़ंक्शन को तुरंत निष्पादित करता है:

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

person.hello("world");  // output: "James Smith says hello world"
person.hello.call({ name: "Jim Smith" }, "world"); // output: "Jim Smith says hello world"

बाँध देता इस समारोह में और इसे इस तरह अलग-अलग लागू करने की आवश्यकता है:

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

person.hello("world");  // output: "James Smith says hello world"
var helloFunc = person.hello.bind({ name: "Jim Smith" });
helloFunc("world");  // output: Jim Smith says hello world"

या इस तरह:

...    
var helloFunc = person.hello.bind({ name: "Jim Smith" }, "world");
helloFunc();  // output: Jim Smith says hello world"

आवेदन कॉल के समान है सिवाय इसके कि यह एक बार में तर्कों को सूचीबद्ध करने के बजाय एक सरणी जैसी वस्तु लेता है:

function personContainer() {
  var person = {  
     name: "James Smith",
     hello: function() {
       console.log(this.name + " says hello " + arguments[1]);
     }
  }
  person.hello.apply(person, arguments);
}
personContainer("world", "mars"); // output: "James Smith says hello mars", note: arguments[0] = "world" , arguments[1] = "mars"                                     

Comments

क्या इसका मतलब यह है कि बिंद एक बंद है?

— ग्रेगरी आर

आपने मुझे अपने कोड स्निपेट के माध्यम से एक फ़ंक्शन के अंदर उपयोग किए जाने वाले तर्कों के बारे में सिखाया है। "use strict"ऐसे आरक्षित खोजशब्दों को ओवरराइड करने से बचने के लिए उल्लेख करना उचित है । +1।

— आरबीटी

@ मोम सहमत; मैंने एक संपादन प्रस्तुत किया है जिसमें "यह" गलत है या तब तक कोई मतलब नहीं है जब तक कि हम बाँध / कॉल / आवेदन नहीं करते हैं

— आयनो

सुधार सुझाव के लिए धन्यवाद। मैंने अपने उत्तर को थोड़ा संपादित किया। @iono आपके सुझाव में कुछ अशुद्धियाँ थीं, इसलिए इसे स्वीकार नहीं किया जा सकता था, लेकिन जवाब में मेरे अपने संपादन थे। उम्मीद है कि अब यह अधिक व्यापक है।

— जिज्ञासुशेरो

Answer 4

SIMPLEST फॉर्म में उत्तर दें

• कॉल समारोह को आमंत्रित करता है और आपको एक-एक करके तर्कों में पारित करने की अनुमति देता है।
• फ़ंक्शन लागू करें और आपको एक सरणी के रूप में तर्क में पारित करने की अनुमति देता है।
• बिंद एक नया फ़ंक्शन देता है, जिससे आप इस सरणी और किसी भी तर्क में पास हो सकते हैं।

---

कॉल बनाम बिंद उदाहरण बनाम लागू करें

कॉल

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King

लागू

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King

बाइंड

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}

var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);

sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King

जब प्रत्येक का उपयोग करने के लिए

कॉल और लागू बहुत विनिमेय हैं। बस यह तय करें कि किसी ऐरे में भेजना आसान है या तर्क की अल्पविराम से अलग की गई सूची।

मुझे हमेशा याद रहता है कि कौन सा ऐसा है जिसे याद करके कि कॉल अल्पविराम (अलग सूची) के लिए है और लागू करें ऐरे के लिए है।

बिंद थोड़ा अलग है। यह एक नया फंक्शन देता है। कॉल करें और लागू करें वर्तमान फ़ंक्शन को तुरंत निष्पादित करें।

बिंद बहुत सारी चीजों के लिए महान है। उपरोक्त उदाहरण में करी कार्यों के लिए हम इसका उपयोग कर सकते हैं। हम एक साधारण हेलो फंक्शन ले सकते हैं और इसे हेल्लोजोन या हेल्लोकेली में बदल सकते हैं। हम इसे onClick जैसी घटनाओं के लिए भी उपयोग कर सकते हैं जहाँ हमें नहीं पता कि उन्हें कब निकाल दिया जाएगा लेकिन हम जानते हैं कि हम उन्हें किस संदर्भ में देखना चाहते हैं।

संदर्भ: codeplanet.io

Comments

बहुत बढ़िया जवाब, अगर यह मेरी प्रश्न पोस्ट थी, तो मैं आपको टिक मार्क देता हूं।

— अमेरिकलीका

में callऔर apply, इसे का पालन करता है कि यदि आप एक नहीं है thisविधि के अंदर, तो आप एक के रूप में पहला तर्क आवंटित होगा null?

— डेरिल सैंटोस

@DaryllSantos, MDN के अनुसार: यह वैकल्पिक वैकल्पिक। किसी फ़ंक्शन पर कॉल के लिए इस का मूल्य प्रदान किया गया। ध्यान दें कि यह विधि द्वारा देखा गया वास्तविक मूल्य नहीं हो सकता है: यदि विधि गैर-सख्त मोड में एक फ़ंक्शन है, तो अशक्त और अपरिभाषित को वैश्विक ऑब्जेक्ट के साथ बदल दिया जाएगा और आदिम मूल्यों को ऑब्जेक्ट में बदल दिया जाएगा। तो अगर आप इस फंक्शन में इसका इस्तेमाल नहीं करते हैं तो कोई बात नहीं।

— अमित शाह

call = = अल्पविराम, लागू करें == सरणी एक छोटी सी यादगार चाल थी

— drlff

var person1 = {firstName: 'Jon', lastName: 'Kuperman'}; function say(greeting) { console.log(greeting + ' ' + this.firstName + ' ' + this.lastName); } say.apply(person1, ['Hello']); // Hello Jon Kupermanपूरी तरह से ठीक काम करता है और VM128: 4 हैलो जॉन कुपरमैन

— प्रतीक

Answer 5

यह thisफ़ंक्शन को कैसे कहा जाता है, इसके लिए स्वतंत्र मूल्य निर्धारित करने की अनुमति देता है। कॉलबैक के साथ काम करते समय यह बहुत उपयोगी है:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(sayHello.bind(obj), 1000);

callइस तरह से परिणाम प्राप्त करने के लिए इस तरह दिखेगा:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(function(){sayHello.call(obj)}, 1000);

Comments

.bind()आपके द्वारा पहले दिखाया गया उपयोग गलत है। जब आप fn.bind(obj)अन्य फ़ंक्शन का उपयोग करते हैं, तो आपको लौटा दिया जाएगा (ऐसा नहीं है कि आपने पहले बनाया है)। और फ़ंक्शन के thisअंदर के मूल्य को बदलने की कोई क्षमता नहीं है binded। अधिकतर इसका उपयोग कॉलबैक thisबीमा के लिए किया जाता है । लेकिन आपके उदाहरण में - परिणाम में कोई अंतर नहीं हैं। लेकिन fn !== fn.bind(obj);गौर कीजिए कि।

— वलेरिविसिन

@ मैं आपकी टिप्पणी को नहीं समझता - कोई भिन्न क्यों नहीं है?

— 13

कॉल और अप्लाई में अंतर है। कॉल में आप तर्कों को अल्पविराम द्वारा अलग किए गए तार के रूप में पास करते हैं, जबकि आवेदन में आप सरणी के रूप में तर्क पारित कर सकते हैं। बाकी वही हैं।

— आशीष यादव

अल्पविराम से अलग तार ?? अल्पविराम अलग होने के रूप में सिर्फ तर्क पारित करें !!

— सुधांशु चौधरी

Answer 6

मान लें कि हमारे पास multiplicationफ़ंक्शन है

function multiplication(a,b){
console.log(a*b);
}

का उपयोग कर कुछ मानक कार्य बनाने देता है bind

var multiby2 = multiplication.bind(this,2);

अब मल्टीबी 2 (बी) गुणा (2, बी) के बराबर है;

multiby2(3); //6
multiby2(4); //8

क्या होगा अगर मैं दोनों मापदंडों को बाइंड में पास करता हूं

var getSixAlways = multiplication.bind(this,3,2);

अब getSixAlways () गुणा (3,2) के बराबर है;

getSixAlways();//6

यहां तक ​​कि पासिंग पैरामीटर रिटर्न 6; getSixAlways(12); //6

var magicMultiplication = multiplication.bind(this);

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

अरे नहीं, हम गुणन कार्यक्षमता को जादू-टोटके में छिपा रहे हैं।

कॉलिंग magicMultiplicationरिटर्न खाली हैfunction b()

निष्पादन पर यह ठीक काम करता है magicMultiplication(6,5); //30

कॉल और आवेदन कैसे करें?

magicMultiplication.call(this,3,2); //6

magicMultiplication.apply(this,[5,2]); //10

सरल शब्दों में, bindफ़ंक्शन बनाता है, callऔर applyफ़ंक्शन को निष्पादित करता है जबकि applyसरणी में मापदंडों की अपेक्षा करता है

Comments

बहुत अच्छी तरह से समझाया!

— कैटालिनबर्ता

+1 के लिए "सरल शब्दों में, bindफ़ंक्शन बनाता है, callऔर फ़ंक्शन को applyनिष्पादित करता है जबकि applyसरणी में मापदंडों की अपेक्षा करता है"

— जोश बुचिया

Answer 7

दोनों Function.prototype.call()और Function.prototype.apply()एक दिया के साथ एक समारोह फोन thisमूल्य, और कहा कि समारोह की वापसी मान।

Function.prototype.bind()दूसरी ओर, दिए गए thisमूल्य के साथ एक नया फ़ंक्शन बनाता है , और उस फ़ंक्शन को बिना निष्पादित किए देता है।

तो, चलिए एक फंक्शन लेते हैं जो इस तरह दिखता है:

var logProp = function(prop) {
    console.log(this[prop]);
};

अब, एक ऐसी वस्तु लेते हैं जो इस प्रकार दिखती है:

var Obj = {
    x : 5,
    y : 10
};

हम अपने कार्य को इस तरह अपनी वस्तु से बांध सकते हैं:

Obj.log = logProp.bind(Obj);

अब, हम Obj.logअपने कोड में कहीं भी भाग सकते हैं :

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

---

जहां यह वास्तव में दिलचस्प हो जाता है, जब आप न केवल इसके लिए एक मूल्य बांधते हैं this, बल्कि इसके तर्क के लिए भी prop:

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

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

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10

Answer 8

बाइंड : यह प्रदान की गई मान और संदर्भ के साथ फ़ंक्शन को बांधता है लेकिन यह फ़ंक्शन को निष्पादित नहीं करता है। फ़ंक्शन को निष्पादित करने के लिए आपको फ़ंक्शन को कॉल करने की आवश्यकता है।

कॉल : यह प्रदान किए गए संदर्भ और पैरामीटर के साथ फ़ंक्शन को निष्पादित करता है।

लागू करें : यह सरणी के रूप में प्रदान किए गए संदर्भ और पैरामीटर के साथ फ़ंक्शन को निष्पादित करता है ।

Comments

सरल और विनम्र!

— हबीब परवाद

Answer 9

यहाँ एक अच्छा लेख है जो बीच के अंतर को स्पष्ट करता है bind(), apply()और call(), इसे नीचे संक्षेप में प्रस्तुत करता है।

• bind()हमें आसानी से स्थापित करने के लिए अनुमति देता है जो विशिष्ट वस्तु के लिए बाध्य होंगे इस जब एक समारोह या विधि शुरू हो जाती है।

  // This data variable is a global variable​
  var data = [
      {name:"Samantha", age:12},
      {name:"Alexis", age:14}
  ]
  var user = {
      // local data variable​
      data    :[
          {name:"T. Woods", age:37},
          {name:"P. Mickelson", age:43}
      ],
      showData:function (event) {
          var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1​
          console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
      }
  }
  
  // Assign the showData method of the user object to a variable​
  var showDataVar = user.showData;
  showDataVar (); // Samantha 12 (from the global data array, not from the local data array)​
  /*
  This happens because showDataVar () is executed as a global function and use of this inside 
  showDataVar () is bound to the global scope, which is the window object in browsers.
  */
  
  // Bind the showData method to the user object​
  var showDataVar = user.showData.bind (user);
  // Now the we get the value from the user object because the this keyword is bound to the user object​
  showDataVar (); // P. Mickelson 43​

• bind() हमें उधार तरीकों की अनुमति दें

  // Here we have a cars object that does not have a method to print its data to the console​
  var cars = {
      data:[
         {name:"Honda Accord", age:14},
         {name:"Tesla Model S", age:2}
     ]
  }
  
  // We can borrow the showData () method from the user object we defined in the last example.​
  // Here we bind the user.showData method to the cars object we just created.​
  cars.showData = user.showData.bind (cars);
  cars.showData (); // Honda Accord 14​

  इस उदाहरण के साथ एक समस्या यह है कि हम ऑब्जेक्ट showDataपर एक नई विधि जोड़ रहे हैं carsऔर हम ऐसा नहीं करना चाहते हैं कि केवल एक विधि उधार लें क्योंकि कारों के ऑब्जेक्ट में पहले से ही एक संपत्ति या विधि का नाम हो सकता है showData। हम इसे गलती से नहीं लिखना चाहते हैं। हम के बारे में हमारी चर्चा में देखेंगे के रूप में Applyऔर Callनीचे, यह एक तरीका है या तो का उपयोग कर उधार लेने के लिए सबसे अच्छा है Applyया Callविधि।

• bind() हमें एक समारोह करी करने की अनुमति दें

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

  function greet (gender, age, name) {
      // if a male, use Mr., else use Ms.​
      var salutation = gender === "male" ? "Mr. " : "Ms. ";
      if (age > 25) {
          return "Hello, " + salutation + name + ".";
      }else {
          return "Hey, " + name + ".";
      }
   }

  हम bind()इस greetफ़ंक्शन को करीने के लिए उपयोग कर सकते हैं

  // So we are passing null because we are not using the "this" keyword in our greet function.
  var greetAnAdultMale = greet.bind (null, "male", 45);
  
  greetAnAdultMale ("John Hartlove"); // "Hello, Mr. John Hartlove."
  
  var greetAYoungster = greet.bind (null, "", 16);
  greetAYoungster ("Alex"); // "Hey, Alex."​
  greetAYoungster ("Emma Waterloo"); // "Hey, Emma Waterloo."

• apply()या इस मान call()को सेट करने के लिए

  apply, callऔरbind तरीकों सब जब एक विधि लागू यह मान सेट करने के लिए उपयोग किया जाता है, और वे हमारा JavaScript कोड में उपयोग के प्रत्यक्ष नियंत्रण और बहुमुखी प्रतिभा की अनुमति के लिए थोड़ा अलग तरीके से करते हैं।

  applyऔर callतरीकों लगभग समान जब सिवाय इसके कि आप करने के लिए समारोह पैरामीटर पास इस मान सेट कर रहे हैं apply ()के रूप में एक सरणी , आप करने के लिए है, जबकि मानकों की सूची अलग-अलग करने के लिए उन्हें पारित करने के लिए call ()विधि।

  यहाँ एक उदाहरण का उपयोग करने के लिए है callया applyस्थापित करने के लिए इस कॉलबैक फ़ंक्शन में।

  // Define an object with some properties and a method​
  // We will later pass the method as a callback function to another function​
  var clientData = {
      id: 094545,
      fullName: "Not Set",
      // setUserName is a method on the clientData object​
      setUserName: function (firstName, lastName)  {
          // this refers to the fullName property in this object​
          this.fullName = firstName + " " + lastName;
      }
  };
  
  function getUserInput (firstName, lastName, callback, callbackObj) {
       // The use of the Apply method below will set the "this" value to callbackObj​
       callback.apply (callbackObj, [firstName, lastName]);
  }
  
  // The clientData object will be used by the Apply method to set the "this" value​
  getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
  // the fullName property on the clientData was correctly set​
  console.log (clientData.fullName); // Barack Obama

• उधार कार्य के साथ applyयाcall

  • उधार लेने के तरीके

    आइए एक array-likeऑब्जेक्ट बनाएं और हमारे एरे-जैसी ऑब्जेक्ट पर काम करने के लिए कुछ ऐरे तरीकों को उधार लें।

    // An array-like object: note the non-negative integers used as keys​
    var anArrayLikeObj = {0:"Martin", 1:78, 2:67, 3:["Letta", "Marieta", "Pauline"], length:4 };
    
     // Make a quick copy and save the results in a real array:
     // First parameter sets the "this" value​
     var newArray = Array.prototype.slice.call (anArrayLikeObj, 0);
     console.log (newArray); // ["Martin", 78, 67, Array[3]]​
    
     // Search for "Martin" in the array-like object​
     console.log (Array.prototype.indexOf.call (anArrayLikeObj, "Martin") === -1 ? false : true); // true​

    एक और सामान्य मामला यह है कि argumentsनिम्नलिखित के रूप में सरणी में कनवर्ट करें

      // We do not define the function with any parameters, yet we can get all the arguments passed to it​
     function doSomething () {
        var args = Array.prototype.slice.call (arguments);
        console.log (args);
     }
    
     doSomething ("Water", "Salt", "Glue"); // ["Water", "Salt", "Glue"]

  • अन्य तरीकों से उधार लें

    var gameController = {
         scores  :[20, 34, 55, 46, 77],
         avgScore:null,
         players :[
              {name:"Tommy", playerID:987, age:23},
              {name:"Pau", playerID:87, age:33}
         ]
     }
     var appController = {
         scores  :[900, 845, 809, 950],
         avgScore:null,
         avg     :function () {
                 var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
                      return prev + cur;
             });
             this.avgScore = sumOfScores / this.scores.length;
         }
       }
       // Note that we are using the apply () method, so the 2nd argument has to be an array​
       appController.avg.apply (gameController);
       console.log (gameController.avgScore); // 46.4​
       // appController.avgScore is still null; it was not updated, only gameController.avgScore was updated​
       console.log (appController.avgScore); // null​

• वेरिएबल-एरिटी फ़ंक्शन apply()को निष्पादित करने के लिए उपयोग करें

Math.maxचर-arity समारोह का एक उदाहरण है,

// We can pass any number of arguments to the Math.max () method​
console.log (Math.max (23, 11, 34, 56)); // 56

लेकिन क्या होगा अगर हमारे पास पास होने के लिए संख्याओं की एक सरणी है Math.max? हम ऐसा नहीं कर सकते:

var allNumbers = [23, 11, 34, 56];
// We cannot pass an array of numbers to the the Math.max method like this​
console.log (Math.max (allNumbers)); // NaN

यह वह जगह है जहाँ apply ()विधि हमें वैरेडिक कार्यों को निष्पादित करने में मदद करती है । उपरोक्त के बजाय, हमें apply (इस प्रकार संख्याओं का उपयोग करना होगा ) इस प्रकार:

var allNumbers = [23, 11, 34, 56];
// Using the apply () method, we can pass the array of numbers:
console.log (Math.max.apply (null, allNumbers)); // 56

Answer 10

कॉल / लागू निष्पादित कार्य तुरंत:

func.call(context, arguments);
func.apply(context, [argument1,argument2,..]);

बाइंड फ़ंक्शन को तुरंत निष्पादित नहीं करता है, लेकिन लिपटे हुए लागू फ़ंक्शन को देता है (बाद में निष्पादन के लिए):

function bind(func, context) {
    return function() {
        return func.apply(context, arguments);
    };
}

Answer 11

वाक्य - विन्यास

• कॉल (यह आर्ग, arg1, arg2, ...)
• लागू करें (यह आर्ग, argsArray)
• बाइंड (ThisArg [, arg1 [, arg2 [, ...]]]]

यहाँ

• यह आर्ग वस्तु है
• argArray एक सरणी ऑब्जेक्ट है
• arg1, arg2, arg3, ... अतिरिक्त तर्क हैं

function printBye(message1, message2){
    console.log(message1 + " " + this.name + " "+ message2);
}

var par01 = { name:"John" };
var msgArray = ["Bye", "Never come again..."];

printBye.call(par01, "Bye", "Never come again...");
//Bye John Never come again...

printBye.call(par01, msgArray);
//Bye,Never come again... John undefined

//so call() doesn't work with array and better with comma seperated parameters 

//printBye.apply(par01, "Bye", "Never come again...");//Error

printBye.apply(par01, msgArray);
//Bye John Never come again...

var func1 = printBye.bind(par01, "Bye", "Never come again...");
func1();//Bye John Never come again...

var func2 = printBye.bind(par01, msgArray);
func2();//Bye,Never come again... John undefined
//so bind() doesn't work with array and better with comma seperated parameters

Answer 12

कॉल, अप्लाई और बिंद के बीच मूल अंतर हैं:

यदि आप चाहते हैं कि चित्र में बाद में आपके निष्पादन का संदर्भ आ जाए तो बिंद का उपयोग किया जाएगा।

उदाहरण के लिए:

var car = { 
  registrationNumber: "007",
  brand: "Mercedes",

  displayDetails: function(ownerName){
    console.log(ownerName + ' this is your car ' + '' + this.registrationNumber + " " + this.brand);
  }
}
car.displayDetails('Nishant'); // **Nishant this is your car 007 Mercedes**

मान लीजिए कि मैं इस विधि का उपयोग किसी अन्य चर में करना चाहता हूं

var car1 = car.displayDetails('Nishant');
car1(); // undefined

कुछ अन्य चर में कार के संदर्भ का उपयोग करने के लिए आपको उपयोग करना चाहिए

var car1 = car.displayDetails.bind(car, 'Nishant');
car1(); // Nishant this is your car 007 Mercedes

आइए बाँध फ़ंक्शन के अधिक व्यापक उपयोग के बारे में बात करें

var func = function() {
 console.log(this)
}.bind(1);

func();
// Number: 1

क्यों? क्योंकि अब func नंबर 1 के साथ बंधी है, अगर हम उस मामले में bind का उपयोग नहीं करते हैं तो यह ग्लोबल ऑब्जेक्ट की ओर इशारा करेगा।

var func = function() {
 console.log(this)
}.bind({});

func();
// Object

कॉल, अप्लाई का उपयोग तब किया जाता है जब आप उसी समय स्टेटमेंट को निष्पादित करना चाहते हैं।

var Name = { 
    work: "SSE",
    age: "25"
}

function displayDetails(ownerName) {
    console.log(ownerName + ", this is your name: " + 'age' + this.age + " " + 'work' + this.work);
}
displayDetails.call(Name, 'Nishant')
// Nishant, this is your name: age25 workSSE

In apply we pass the array
displayDetails.call(Name, ['Nishant'])
// Nishant, this is your name: age25 workSSE

Answer 13

कॉल अप्लाई और बाइंड। और वे कैसे अलग हैं।

किसी भी दैनिक शब्दावली का उपयोग करके कॉल करना सीखें और आवेदन करें।

आपके पास तीन ऑटोमोबाइल हैं your_scooter , your_car and your_jetजो एक ही तंत्र (विधि) से शुरू होते हैं। हमने automobileएक विधि के साथ एक ऑब्जेक्ट बनाया push_button_engineStart।

var your_scooter, your_car, your_jet;
var automobile = {
        push_button_engineStart: function (runtime){
        console.log(this.name + "'s" + ' engine_started, buckle up for the ride for ' + runtime + " minutes");
    }
}

जब कॉल किया जाता है और उपयोग किया जाता है तो समझें। मान लीजिए कि आप एक इंजीनियर हैं और आपके पास है your_scooter, your_carऔर your_jetजो एक push_button_engine_start के साथ नहीं आया था और आप एक तीसरी पार्टी का उपयोग करना चाहते हैंpush_button_engineStart ।

यदि आप कोड की निम्न पंक्तियाँ चलाते हैं, तो वे एक त्रुटि देंगे। क्यों?

//your_scooter.push_button_engineStart();
//your_car.push_button_engineStart();
//your_jet.push_button_engineStart();


automobile.push_button_engineStart.apply(your_scooter,[20]);
automobile.push_button_engineStart.call(your_jet,10);
automobile.push_button_engineStart.call(your_car,40);

तो उपरोक्त उदाहरण सफलतापूर्वक आपके_कूटर, your_car, your_jet ऑटोमोबाइल ऑब्जेक्ट से एक सुविधा देता है।

आइए गहराई से गोता लगाएँ यहाँ हम कोड की उपरोक्त रेखा को विभाजित करेंगे। automobile.push_button_engineStartउपयोग की जाने वाली विधि को प्राप्त करने में हमारी मदद कर रहा है।

इसके अलावा हम डॉट नोटेशन का उपयोग करके आवेदन या कॉल का उपयोग करते हैं। automobile.push_button_engineStart.apply()

अब लागू करें और कॉल दो मापदंडों को स्वीकार करते हैं।

1. प्रसंग
2. बहस

इसलिए यहां हमने कोड की अंतिम पंक्ति में संदर्भ सेट किया है।

automobile.push_button_engineStart.apply(your_scooter,[20])

कॉल और अप्लाई के बीच अंतर सिर्फ इतना है कि एक एरे के रूप में पैरामीटर स्वीकार करें जबकि कॉल केवल एक अल्पविराम द्वारा अलग किए गए तर्कों की सूची को स्वीकार कर सकता है।

जेएस बिंद समारोह क्या है?

एक बाइंड फंक्शन मूल रूप से होता है जो किसी चीज के संदर्भ को बांधता है और फिर बाद में स्टेज पर निष्पादन के लिए एक वैरिएबल में स्टोर करता है।

चलो हमारे पिछले उदाहरण को और बेहतर बनाते हैं। पहले हमने ऑटोमोबाइल ऑब्जेक्ट से संबंधित एक विधि का उपयोग किया और इसे लैस करने के लिए उपयोग किया your_car, your_jet and your_scooter। अब हम कल्पना करते हैं कि हम push_button_engineStartअपने ऑटोमोबाइल्स को व्यक्तिगत रूप से शुरू करने के लिए अलग से एक अलग रूप देना चाहते हैं जिसे हम चाहते हैं कि निष्पादन के किसी भी बाद के चरण में।

var scooty_engineStart = automobile.push_button_engineStart.bind(your_scooter);
var car_engineStart = automobile.push_button_engineStart.bind(your_car);
var jet_engineStart = automobile.push_button_engineStart.bind(your_jet);


setTimeout(scooty_engineStart,5000,30);
setTimeout(car_engineStart,10000,40);
setTimeout(jet_engineStart,15000,5);

अभी भी संतुष्ट नहीं हैं?

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

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

var test_function = automobile.push_button_engineStart.apply(your_scooter);

Answer 14

कॉल: कॉल फ़ंक्शन को आमंत्रित करता है और आपको एक-एक करके तर्क पारित करने की अनुमति देता है

लागू करें: फ़ंक्शन लागू करता है और आपको एक सरणी के रूप में तर्क पारित करने की अनुमति देता है

बिंद: बिंद एक नया फ़ंक्शन देता है, जिससे आप इस सरणी और किसी भी तर्क में पास हो सकते हैं।

var person1 = {firstName: 'Raju', lastName: 'king'};
var person2 = {firstName: 'chandu', lastName: 'shekar'};

function greet(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
function greet2(greeting) {
        console.log( 'Hello ' + this.firstName + ' ' + this.lastName);
    }


greet.call(person1, 'Hello'); // Hello Raju king
greet.call(person2, 'Hello'); // Hello chandu shekar



greet.apply(person1, ['Hello']); // Hello Raju king
greet.apply(person2, ['Hello']); // Hello chandu shekar

var greetRaju = greet2.bind(person1);
var greetChandu = greet2.bind(person2);

greetRaju(); // Hello Raju king
greetChandu(); // Hello chandu shekar

Answer 15

कॉल (): - यहाँ हम फ़ंक्शन आर्ग्युमेंट्स को व्यक्तिगत रूप से पास करते हैं, एरे फॉर्मेट में नहीं

var obj = {name: "Raushan"};

var greeting = function(a,b,c) {
    return "Welcome "+ this.name + " to "+ a + " " + b + " in " + c;
};

console.log(greeting.call(obj, "USA", "INDIA", "ASIA"));

apply (): - यहाँ हम एक अरै फॉर्मेट में फंक्शन आर्ग्युमेंट पास करते हैं

var obj = {name: "Raushan"};

var cal = function(a,b,c) {
    return this.name +" you got " + a+b+c;
};

var arr =[1,2,3];  // array format for function arguments
console.log(cal.apply(obj, arr)); 

बाँध (): -

       var obj = {name: "Raushan"};

       var cal = function(a,b,c) {
            return this.name +" you got " + a+b+c;
       };

       var calc = cal.bind(obj);
       console.log(calc(2,3,4));

Answer 16

जावास्क्रिप्ट कॉल ()

const person = {
    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.call(anotherPerson,1,2)

जावास्क्रिप्ट लागू ()

    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.apply(anotherPerson,[1,2])

** कॉल और अप्लाई फंक्शन डिफरेंस कॉल डिफरेंट लॉजिक है लेकिन अप्लाई एरे जैसे: [1,2,3] **

जावास्क्रिप्ट बाइंड ()

    name: "Lokamn",
    dob: 12,
    anotherPerson: {
        name: "Pappu",
        dob: 12,
        print2: function () {
            console.log(this)
        }
    }
}

var bindFunction = person.anotherPerson.print2.bind(person)
 bindFunction()

Answer 17

कल्पना कीजिए, बाँध उपलब्ध नहीं है। आप आसानी से इसका निर्माण कर सकते हैं:

var someFunction=...
var objToBind=....

var bindHelper =  function (someFunction, objToBind) {
    return function() {
        someFunction.apply( objToBind, arguments );
    };  
}

bindHelper(arguments);

Answer 18

    function sayHello() {
            //alert(this.message);
            return this.message;
    }
    var obj = {
            message: "Hello"
    };

    function x(country) {
            var z = sayHello.bind(obj);
            setTimeout(y = function(w) {
//'this' reference not lost
                    return z() + ' ' + country + ' ' + w;
            }, 1000);
            return y;
    }
    var t = x('India')('World');
    document.getElementById("demo").innerHTML = t;

Answer 19

इन सभी तरीकों के पीछे मुख्य अवधारणा है फंक्शन ब्यूरो ।

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

1. कॉल तुरंत फ़ंक्शन को आमंत्रित करता है और आपको एक-एक करके तर्कों में पारित करने की अनुमति देता है
2. फ़ंक्शन को तुरंत लागू करें और आपको एक सरणी के रूप में तर्क में पारित करने की अनुमति देता है ।
3. बिंद एक नया फ़ंक्शन देता है, और आप किसी भी समय किसी फ़ंक्शन को आमंत्रित करके उसे कॉल / कॉल कर सकते हैं।

नीचे इस सभी तरीकों का एक उदाहरण है

let name =  {
    firstname : "Arham",
    lastname : "Chowdhury",
}
printFullName =  function(hometown,company){
    console.log(this.firstname + " " + this.lastname +", " + hometown + ", " + company)
}

कॉल

पहला तर्क जैसे कॉल विधि के अंदर का नाम हमेशा (इस) चर का संदर्भ होता है और बाद वाला फ़ंक्शन चर होगा

printFullName.call(name,"Mumbai","Taufa");     //Arham Chowdhury, Mumbai, Taufa

लागू

लागू विधि कॉल विधि के रूप में एक ही है कि अंतर केवल यही है, फ़ंक्शन तर्क Array सूची में पारित किए जाते हैं

printFullName.apply(name, ["Mumbai","Taufa"]);     //Arham Chowdhury, Mumbai, Taufa

BIND

बाइंड मेथड कॉल को छोड़कर एक जैसा है, बाइंड एक फ़ंक्शन देता है जिसे बाद में इसे इनवाइट करके इस्तेमाल किया जा सकता है (क्योंकि यह ऐसा नहीं है)

let printMyNAme = printFullName.bind(name,"Mumbai","Taufa");

printMyNAme();      //Arham Chowdhury, Mumbai, Taufa

PrintMyNAme () फ़ंक्शन है जो फ़ंक्शन को आमंत्रित करता है

नीचे jsfiddle के लिए लिंक है

https://codepen.io/Arham11/pen/vYNqExp

Answer 20

मुझे लगता है कि उनमें से एक ही स्थान हैं: वे सभी एक फ़ंक्शन के इस मान को बदल सकते हैं। उनमें से मतभेद हैं: बाइंड फ़ंक्शन एक नया फ़ंक्शन परिणामस्वरूप देगा; कॉल और लागू करने के तरीके तुरंत फ़ंक्शन को निष्पादित करेंगे, लेकिन लागू एक सरणी को परम के रूप में स्वीकार कर सकते हैं, और यह सरणी को अलग कर देगा। और इसके अलावा, बाइंड फ़ंक्शन करी हो सकता है।

Answer 21

बाइंड फ़ंक्शन का उपयोग तब किया जाना चाहिए जब हम किसी विशेष संदर्भ के लिए एक फ़ंक्शन असाइन करना चाहते हैं जैसे।

var demo = {
           getValue : function(){ 
             console.log('demo object get value       function') 
            }
           setValue : function(){  
              setTimeout(this.getValue.bind(this),1000)           
           }
 }

ऊपर के उदाहरण में अगर हम Demo.setValue () फ़ंक्शन को कॉल करते हैं और इस .getValue फ़ंक्शन को सीधे पास करते हैं, तो यह सीधे डेमो.setValue फ़ंक्शन को कॉल नहीं करता है क्योंकि यह setTimeout में विंडो ऑब्जेक्ट को संदर्भित करता है इसलिए हमें इस .getValue के लिए डेमो ऑब्जेक्ट संदर्भ पास करने की आवश्यकता है बाइंड का उपयोग कर कार्य करते हैं। इसका मतलब है कि हम केवल डेमो ऑब्जेक्ट के संदर्भ में फ़ंक्शन पास कर रहे हैं, एक्टुलली कॉलिंग फ़ंक्शन नहीं।

आशा है आप समझेंगे ।

अधिक जानकारी के लिए कृपया जावास्क्रिप्ट बाइंड फ़ंक्शन को विस्तार से जानें