بررسی متد bind در جاوااسکریپت

درود دوستان. همونطور که می‌دونیم مقدار کلمه کلیدی this توی توابع حالت مشخصی نداره و تا زمانی که تابع فراخونی نشه نمی‌تونیم مقدار اون رو تشخیص بدیم. برای مثال کد زیر رو در نظر بگیرید:

const name = &quotMario&quot

const user = {
  name: &quotEmily&quot,
  hello() {
     return &quotHello &quot + this.name;
  }
}

توی متد hello ما از this استفاده کردیم. مقدار this اینجا قابل تشخیص نیست. چون هنوز نمی‌دونیم این متد چطوری و کجا داره فراخونی میشه. این متد رو میشه به حالت‌های مختلفی فراخونی کرد. روش اول به این صورت هست (خط ۱۰):

const name = &quotMario&quot

const user = {
  name: &quotEmily&quot,
  hello() {
    return &quotHello &quot + this.name;
  }
}

 user.hello(); // Hello Emily

اینجا متد hello توسط خود آبجکت user فراخونی میشه. توی این حالت this به خود آبجکت user اشاره می‌کنه و بنابراین this.name برابر با Emily هست.

نوع دیگه‌ای از فراخونی متد hello به این صورت هست (خط ۱۰):

const name = &quotMario&quot

const user = {
  name: &quotEmily&quot,
  hello() {
    alert(&quotHello &quot + this.name);
  }
}

 const helloToMario = user.hello;
 helloToMario(); // Hello Mario

اینجا ابتدا خود متد hello رو ریختیم توی یک متغیر. الان مقدار متغیر helloToMario یک تابع هست که هنوز فراخونی نشده. توی خط ۱۱ داریم این تابع رو صدا می‌زنیم. نکته اینجاست که چون داریم این تابع رو توی حوزه سراسری صدا می‌زنیم، اجراکننده‌ی اون حوزه سراسری در نظر گرفته میشه و بنابراین مقدار this همین حوزه درنظر گرفته میشه. پس برای this.name، اون name که توی حوزه سراسری هست در نظر گرفته میشه که خروجی Hello Mario خواهد بود.

خب چکار کنیم this توی یک تابع، یک مقدار خاص و قابل تشخیص داشته باشه؟ متد .bind()!

متد `()bind.` چیه؟ ?

متد bind تابعی درست می‌کنه که مقدار this توی اون به یک آبجکت مشخص و تعیین‌شده‌ای اشاره می‌کنه. مهم نیست این تابع کجا و به چه صورت داره صدا زده میشه؛ این تابع همیشه به اون thisـی اشاره می‌کنه که ما براش تعیین کردیم.

نحوه استفاده از این متد به صورت زیر هست:

funcName.bind(obj);

اینجا funcName اسم تابع ما هست که می‌خوایم bind روی اون اعمال بشه. و obj آبجکتی هست که قراره this توی تابع به این اشاره کنه. خروجی متد bind یک تابع هست؛ تابعی که بعداً می‌تونیم توی شرایط مختلف اون رو استفاده کنیم.

کد زیر رو در نظر بگیرید:

function sayHello() {
  return &quotHello &quot + this.name;
}

می‌خوایم با متد bind کاری کنیم که this به آبجکت دلخواه ما اشاره کنه:

const mario = { name: &quotMario&quot }

const hiMario = sayHello.bind(mario);

الان مقدار متغیر hiMario یک تابع هست. تابعی که مقدار this توی اون همیشه به آبجکت mario اشاره می‌کنه. با این شرایط مهم نیست که تابع hiMario کجا و به چه صورت صدا زده میشه. خروجی اون همیشه Hello Mario خواهد بود:

cosnt name = &quotAlex&quot

function sayHello() {
  return &quotHello &quot + this.name;
}

const mario = { name: &quotMario&quot }
 const hiMario = sayHello.bind(mario);

const user = {
  name: &quotEmily&quot,
   hello: hiMario
}


alert(hiMario());    // Hello Mario
alert(user.hello()); // Hello Mario

const hiAlex = hiMario;
alert(hiAlex());     // Hello Mario

پاس دادن آرگومان به تابع مورد نظر

اگه تابع مد نظر ما نیاز به آرگومان داشته باشه می‌تونیم موقع فراخونی تابع به اون آرگومان پاس بدیم:

function sayHello(type) {
  alert(`Hello ${this.name}! You're ${type}!`);
}

const mario = { name: &quotMario&quot }

const hiMarioAwesome = sayHello.bind(mario);

 hiMarioAwesome(&quotFunny&quot); // Hello Mario! You're Funny!

که این کار رو می‌تونیم توی خود متد bind هم انجام بدیم. اونها رو به این صورت پاس می‌دیم:

funcName.bind(obj, arg1, arg2, ..., argN);

برای مثال:

function sayHello(type) {
  alert(`Hello ${this.name}! You're ${type}!`);
}

const mario = { name: &quotMario&quot }

 const hiMarioAwesome = sayHello.bind(mario, &quotAwesome&quot); //Hello Mario! You're Awesome!

hiMarioAwesome();

همونطور که می‌بینیم، دیگه لازم نیست هنگام فراخونی تابع آرگومانی پاس بدیم. هر آرگومانی که به تابع پاس بدیم، به عنوان آرگومان‌های بعدی پاس داده میشه به تابع:

function funcName(param1, param2, param3, param4) {
  alert(`${param1}, ${param2}, ${param3}, ${param4}`);
}

const myFunc = funcName.bind({}, &quotarg1&quot, &quotarg2&quot);

myFunc(&quotarg3&quot, &quotarg4&quot); // arg1, arg2, arg3, arg4

خب دوستان این پست هم به پایان رسید. امیدوارم استفاده کرده باشین. روزتون خوش ?✌️

منبع:

developer.mozilla.org

همچنین بخوانید:

اسکوپ (scope) در جاوااسکریپت چیست؟

هویستینگ (Hoisting) در جاوااسکریپت چیست؟

بررسی (let - var - const) در جاوااسکریپت

تفاوت دو مساوی (==) و سه مساوی (===) در جاوااسکریپت

بررسی متدهای تعامل با کاربر در جاوااسکریپت : alert , prompt, confirm

استفاده از عبارت &amp;amp;amp;amp;amp;amp;amp;amp;#x27;use strict&amp;amp;amp;amp;amp;amp;amp;amp;#x27; در جاوااسکریپت

کار با توابع یا Functions در جاوااسکریپت

مقایسه توابع Declarations و Expressions در جاوااسکریپت