জাভাস্ক্রিপ্ট কল () এবং প্রয়োগ () বনাম বাঁধা ()?

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()জাভাস্ক্রিপ্ট ১.৮.৫ - ইসমা -২2২, ৫ ম সংস্করণে অন্য দুটি ইতিমধ্যে বিদ্যমান থাকার পরে যুক্ত করা হয়েছিল। যদিও call()এবং apply()জাভাস্ক্রিপ্ট 1.3 থেকে প্রায় হয়েছে - ECMA-262 3 য় সংস্করণের। এস -ও- তে তাদের মতো প্রশ্ন রয়েছে: কল-এবং-প্রয়োগ-এর মধ্যে-পার্থক্য । আমি কেবল অনুমান করছি যদিও আমি নিজেই ভাবছিলাম।

— না,

আপনার কি এই পদ্ধতিগুলি (কল, প্রয়োগ, বাঁধাই) দরকার? এটি ছাড়া

— মাহি

লিঙ্কটি চেকআউট করুন - techyaura-blogs.blogspot.com/2020/05/…

— টেকইউরা

Answer 1

আমি এই তুলনাটি ফাংশন অবজেক্টস, ফাংশন কল call/applyএবং bindকিছুক্ষণ আগে তৈরি করেছি:

.bindআপনাকে ভবিষ্যতে ফাংশনটি সম্পাদন করার অনুমতি দেওয়ার সময় আপনাকে এখনইthis মানটি সেট করতে দেয় কারণ এটি একটি নতুন ফাংশন অবজেক্টকে ফিরিয়ে দেয়।

Answer 2

.bind()আপনি যখন সেই ফাংশনটি পরে কোনও নির্দিষ্ট প্রসঙ্গের সাথে ডেকে আনতে চান তখন ব্যবহার করুন , ইভেন্টগুলিতে দরকারী। ব্যবহার করুন .call()বা .apply()যখন আপনি তত্ক্ষণাত ফাংশনটি শুরু করতে চান এবং প্রসঙ্গটি সংশোধন করতে চান।

কল করুন / প্রয়োগ করুন সাথে সাথে ফাংশনটি কল করুন, যেখানে bindকোনও ফাংশন প্রদান করে যা পরে কার্যকর করা হলে আসল ফাংশনটি কল করার জন্য সঠিক প্রসঙ্গ সেট করে। এইভাবে আপনি অ্যাসিঙ্ক কলব্যাক এবং ইভেন্টগুলিতে প্রসঙ্গ বজায় রাখতে পারেন।

আমি এটি অনেক কিছু করি:

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.
};

আমি নোড.জেএসে এ্যাসিঙ্ক কলব্যাকগুলির জন্য এটির ব্যাপকভাবে ব্যবহার করি যার জন্য আমি একটি সদস্য পদ্ধতিটি পাস করতে চাই, তবে এখনও প্রসঙ্গটি এ্যাসিঙ্ক ক্রিয়াকলাপটি শুরু হওয়া উদাহরণ হতে চাই।

বাঁধনের একটি সহজ, নির্বোধ বাস্তবায়ন এরকম হবে:

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

এটিতে আরও রয়েছে (অন্যান্য আর্গগুলি পাস করার মতো) তবে আপনি এটি সম্পর্কে আরও পড়তে পারেন এবং এমডিএন-তে আসল বাস্তবায়নটি দেখতে পারেন ।

আশাকরি এটা সাহায্য করবে.

Comments

@ রোয়নিমির যে সঠিক, আপনি পরে "আবদ্ধ" ফাংশনটি ব্যবহার করতে পারেন, এবং প্রসঙ্গটি বজায় রাখা হবে।

— চাদ

ঠিক সেটাই bindপ্রত্যাবর্তন করে।

— চাদ

@ রায়নিমির আমার উত্তর সম্পাদনা করেছেন

— চাদ

ফাংশন বলার আগে আর্গুমেন্টে পাস করে আপনি পার্টিয়ালের জন্য বাইন্ডও ব্যবহার করতে পারেন।

— অ্যান্ড্রু কির্কগার্ড

আপনি কেবল বাঁধাই সংশোধন করছেন, আসলেই কোনও পার্থক্য নেই। যে কোনও উপায়ে আপনি কেবল এমন একটি ক্লোপে মুড়িয়ে দিচ্ছেন যা প্রসঙ্গটি ধারণ করে এমন একটি স্কোপ ভেরিয়েবলের অ্যাক্সেস রয়েছে। আপনার কোডটি মূলত আমি পোস্ট করা পলিফিল।

— চাদ

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

সিমপ্লেস্ট ফর্মে উত্তর দিন

• কল ক্রিয়াকলাপটি আহ্বান করে এবং আপনাকে একে একে যুক্তিগুলিতে পাস করার অনুমতি দেয়।
• প্রয়োগ ফাংশনটি আহ্বান করে এবং আপনাকে অ্যারে হিসাবে আর্গুমেন্টে পাস করতে দেয়।
• বাইন্ড একটি নতুন ফাংশন ফিরিয়ে দেয়, আপনাকে এই অ্যারে এবং কোনও সংখ্যক আর্গুমেন্টে পাস করার অনুমতি দেয়।

---

বনাম কল বনাম বান্ধ উদাহরণ প্রয়োগ করুন

কল

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

প্রতিটি ব্যবহার করার সময়

কল এবং প্রয়োগ করা খুব সুন্দর বিনিময়যোগ্য। একটি অ্যারে বা কমা দ্বারা পৃথক যুক্তিগুলির তালিকা পাঠানো সহজ কিনা তা ঠিক করুন।

আমি সবসময় মনে করি কোনটি কোনটি স্মরণ করে কল কমা (বিচ্ছিন্ন তালিকা) এবং অ্যাপ্লিকেশন অ্যারের জন্য is

বাইন্ড কিছুটা আলাদা। এটি একটি নতুন ফাংশন প্রদান করে। কল এবং প্রয়োগ বর্তমান ফাংশনটি তাত্ক্ষণিকভাবে কার্যকর করুন।

বাইন্ড অনেক কিছুর জন্য দুর্দান্ত। আমরা উপরের উদাহরণের মতো কার্যাবলী কারি করতে এটি ব্যবহার করতে পারি। আমরা একটি সাধারণ হ্যালো ফাংশন নিতে পারি এবং এটিকে হ্যালোজোন বা হ্যালোকেলিতে পরিণত করতে পারি। আমরা এটি অনক্লিকের মতো ইভেন্টের জন্যও ব্যবহার করতে পারি যেখানে তাদের কখন বরখাস্ত করা হবে তা আমরা জানি না তবে আমরা কী প্রসঙ্গে চাই তা আমরা জানি।

তথ্যসূত্র: codeplanet.io

Comments

দুর্দান্ত উত্তর, এটি যদি আমার প্রশ্ন পোস্ট হয় তবে আমি আপনাকে টিক চিহ্ন দিই।

— আমেরেলিকা

ইন callএবং apply, এটি কি অনুসরণ করে যে আপনার যদি thisপদ্ধতিটির অভ্যন্তর না থাকে তবে আপনি প্রথম যুক্তিটি একটি হিসাবে নির্ধারণ করবেন null?

— ড্যারিল সান্টোস

এমডিএন অনুসারে @ ড্যারিলস্যান্টোস: এটিআরগ Oচ্ছিক। কোনও ফাংশনে কল করার জন্য এর মান সরবরাহ করা হয়েছে। নোট করুন যে এটি পদ্ধতি দ্বারা দেখা প্রকৃত মান হতে পারে না: পদ্ধতিটি যদি অ-কঠোর মোডে ফাংশন হয় তবে নাল এবং অপরিজ্ঞাতটি বিশ্বব্যাপী অবজেক্টের সাথে প্রতিস্থাপন করা হবে এবং আদিম মানগুলিকে বস্তুতে রূপান্তরিত করা হবে। সুতরাং আপনি যদি ফাংশন এ এটি ব্যবহার না করে তবে কিছু যায় আসে না।

— অমিত শাহ

কল = = কমা, প্রয়োগ == অ্যারে ছিল একটি দুর্দান্ত ছোট মুখস্ত করার কৌশল

— ড্রলফ

var person1 = {firstName: 'Jon', lastName: 'Kuperman'}; function say(greeting) { console.log(greeting + ' ' + this.firstName + ' ' + this.lastName); } say.apply(person1, ['Hello']); // Hello Jon Kupermanপুরোপুরি সূক্ষ্মভাবে কাজ করে এবং ভিএম 128: 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);লক্ষ্য করুন।

— ভ্যালেরিভাসিন

@ ইনভিএস আমি আপনার মন্তব্য বুঝতে পারি না - কেন আলাদা কিছু নেই?

— জানতিমন

কল এবং আবেদনের মধ্যে পার্থক্য। কলটিতে আপনি কমা দ্বারা পৃথক স্ট্রিং হিসাবে আর্গুমেন্টগুলি পাস করেন, প্রয়োগের সময় আপনি অ্যারের আকারে আর্গুমেন্টগুলি পাস করতে পারেন। বাকি সব একই

— আশীষ যাদব

কমা পৃথক স্ট্রিং ?? শুধু আর্গুমেন্ট পাস হিসাবে কমা দিয়ে পৃথক করা !!

— সুধনসু চৌধুরী

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যেহেতু ফাংশন executes applyআশা অ্যারের মধ্যে পরামিতি

Comments

খুব ভালভাবে ব্যাখ্যা!

— ক্যাটালিনবার্টা

জন্য +1 "সরল কথায়, bindফাংশন তৈরি করে, callএবং applyযেহেতু ফাংশন executes applyঅ্যারের মধ্যে পরামিতি আশা"

— জোশ Buchea

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() আমাদের একটি ফাংশন কারি করতে অনুমতি দিন

  আংশিক ফাংশন অ্যাপ্লিকেশন নামে পরিচিত ফাংশন কারিইং হ'ল একটি ফাংশনের ব্যবহার (যা এক বা একাধিক যুক্তি গ্রহণ করে) যা ইতিমধ্যে সেট করা কিছু আর্গুমেন্টের সাথে একটি নতুন ফাংশন দেয় returns

  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 পদ্ধতি সব যখন একটি পদ্ধতি আবাহন এই মান সেট ব্যবহার করা হয়, এবং তারা আমাদের জাভাস্ক্রিপ্ট কোড ব্যবহারের সরাসরি নিয়ন্ত্রণ এবং বহুমুখিতা করার অনুমতি কিছুটা ভিন্ন উপায়ে এটা করতে।

  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 ()পদ্ধতি আমাদের সম্পাদনা করতে সহায়তা variadic ফাংশন । উপরের পরিবর্তে, আমাদের 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

বাক্য গঠন

• কল করুন (thisArg, আরজি 1, আরগ 2, ...)
• প্রয়োগ করুন (এটিআরজি, আরগস অ্যারে)
• বাঁধুন (thisArg [, আরগ 1 [, আরগ 2 [, ...]]])

এখানে

• thisArg হ'ল অবজেক্ট
• 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

কেন? কারণ এখন ফানকটি নম্বর 1 এর সাথে আবদ্ধ, যদি আমরা সেই ক্ষেত্রে বাইন্ড ব্যবহার না করি তবে এটি গ্লোবাল অবজেক্টের দিকে নির্দেশ করবে।

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);

সুতরাং উপরের উদাহরণটি সফলভাবে আপনার_স্কুটার, আপনার_কার, আপনার_জেটকে অটোমোবাইল অবজেক্ট থেকে একটি বৈশিষ্ট্য দেয়।

আসুন আরও গভীর ডুব দিন এখানে আমরা কোডের উপরের লাইনটি বিভক্ত করব। 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);

তবুও সন্তুষ্ট নন?

টিয়ারড্রপ হিসাবে এটি পরিষ্কার করা যাক। পরীক্ষার সময়। আমরা কল করতে ফিরে আসব এবং ফাংশন অ্যাপ্লিকেশন প্রয়োগ করব এবং একটি ফাংশনটির মান একটি রেফারেন্স হিসাবে সংরক্ষণ করার চেষ্টা করব।

কল এবং প্রয়োগের সাথে সাথে নীচের পরীক্ষাটি ব্যর্থ হয়েছে কারণ তাত্ক্ষণিকভাবে আহ্বান জানানো হয়েছে, অতএব, আমরা কখনই কোনও চলকটিতে একটি রেফারেন্স সঞ্চয় করার পর্যায়ে পৌঁছাতে পারি না যেখানে বাইন্ড ফাংশন শোটি চুরি করে is

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"));

প্রয়োগ (): - এখানে আমরা একটি অ্যারে ফর্ম্যাটে ফাংশন আর্গুমেন্টগুলি পাস করি

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

এই সমস্ত পদ্ধতির পিছনে মূল ধারণাটি হ'ল ফাংশন বুড়ো ।

ফাংশন orrowণ গ্রহণের মাধ্যমে সেই পদ্ধতির অনুলিপি তৈরি না করে এবং দুটি পৃথক স্থানে এটি বজায় না রেখে আমাদের একটি ভিন্ন অবজেক্টের এক অবজেক্টের পদ্ধতি ব্যবহার করতে দেয়। এটি ব্যবহারের মাধ্যমে সম্পন্ন হয়। কল (),। প্রয়োগ (), বা। বাঁধুন (), যার সমস্তটি আমরা ধার নিয়েছি সেই পদ্ধতিতে স্পষ্টভাবে এটি সেট করার জন্য বিদ্যমান

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

প্রযোজ্য

প্রয়োগ পদ্ধতি কল পদ্ধতি হিসাবে একই, কেবলমাত্র পার্থক্য হ'ল অ্যারে তালিকায় ফাংশন আর্গুমেন্টগুলি পাস করা হয়

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

বাঁধাই করা

বাঁধাই পদ্ধতিটি কল হিসাবে একই, বাইন্ডটি একটি ফাংশন প্রদান করে যা পরে অনুরোধ করে ব্যবহার করা যেতে পারে (এটি অবিলম্বে কল করবে না)

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

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

printMyNAme () হ'ল ফাংশন যা ফাংশনকে ডাকে

নীচে jsfiddle জন্য লিঙ্কটি আছে

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

Answer 20

আমার মনে হয় এগুলির একই স্থানগুলি: এঁরা সকলেই একটি ফাংশনের এই মানটি পরিবর্তন করতে পারেন them তাদের মধ্যে পার্থক্যগুলি: বাইন্ড ফাংশন ফলস্বরূপ একটি নতুন ফাংশন ফিরিয়ে দেবে; কল এবং প্রয়োগের পদ্ধতিগুলি তত্ক্ষণাত ফাংশনটি সম্পাদন করবে তবে প্রয়োগটি অ্যারেটিকে প্যারাম হিসাবে স্বীকৃতি দিতে পারে এবং এটি অ্যারেটিকে পৃথক করে দেয় nd এবং এছাড়াও, বাইন্ড ফাংশনটি কারিঙ হতে পারে।

Answer 21

উদাহরণস্বরূপ যখন আমরা নির্দিষ্ট প্রসঙ্গে একটি ফাংশন নির্ধারণ করতে চাই তখন বাইন্ড ফাংশনটি ব্যবহার করা উচিত।

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

উপরের উদাহরণে আমরা যদি ডেমো.সেটভ্যালু () ফাংশনটি কল করি এবং এটি.এটিভ্যালু ফাংশনটি সরাসরি পাস করি তবে এটি ডেমো.সেটওয়ালু ফাংশনটি সরাসরি কল করে না কারণ সেটটাইমআউটে এটি উইন্ডো অবজেক্টকে বোঝায় তাই আমাদের এই ডেটো অবজেক্টটি প্রাসঙ্গিকভাবে পাস করতে হবে। বাইন্ড ব্যবহার করে ফাংশন। এর অর্থ আমরা কেবলমাত্র ডেমো অবজেক্টের প্রসঙ্গে ফাংশনটি পাস করি যা কার্যত কলিং ফাংশন নয়।

আশা করি আপনি বুঝতে পেরেছেন।

আরও তথ্যের জন্য দয়া করে জাভাস্ক্রিপ্ট বাইন্ড ফাংশনটি বিস্তারিতভাবে জানুন refer