بررسی متد 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;amp;#x27;use strict&amp;amp;amp;amp;amp;amp;amp;amp;amp;#x27; در جاوااسکریپتکار با توابع یا Functions در جاوااسکریپتمقایسه توابع Declarations و Expressions در جاوااسکریپتبررسی Callback Function در جاوااسکریپتتفاوت عملگرهای Spread و Rest در جاوااسکریپتپارامتر پیشفرض(Default Parameter) در جاوااسکریپتبررسی arguments در توابع جاوااسکریپتبررسی پروتوتایپ (Prototype) در جاوااسکریپتبررسی Arrow Functions در جاوااسکریپتبررسی Functions Calling Other Functions در جاوااسکریپتبررسی آرایه (Array) در جاوااسکریپتبررسی اشیاء یا آبجکت (objects) در جاوااسکریپتبررسی حلقه‌ها (Loops) در جاوااسکریپتبررسی انتخابگرها (Selectors) در جاوااسکریپتبررسی innerHTML در جاوااسکریپتبررسی DOM در جاوااسکریپت، آموزش متد querySelectorبررسی نحوه عملکرد جاوا اسکریپت در پشت صحنهبررسی مفهوم Execution Context در جاوااسکریپت - پشت‌ پرده جاوااسکریپت (بخش اول)بررسی مفهوم Execution Context در جاوااسکریپت - پشت‌ پرده جاوااسکریپت (بخش دوم)تعریف API (Application Programming Interface) به زبان ساده!دِستراکچرینگ (Destructuring) در جاوااسکریپت یعنی چه؟بررسی عملگر (...) Spread در جاوااسکریپتبررسی پارامترهای Rest در جاوااسکریپتاتصال کوتاه (Short Circuiting) با عملگرهای منطقی AND (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;) و OR (||) در جاوااسکریپتاتصال کوتاه (Short Circuiting) با عملگر منطقی Nullish coalescing (??) در جاوااسکریپتحلقه for ... of در جاوااسکریپتبررسی Enhanced Object literals در جاوااسکریپبررسی Optional Chaining (_.) در جاوااسکریپتبررسی کاربرد Map و Set در جاوااسکریپت (مقدماتی)بررسی کاربرد Map و Set در جاوااسکریپت (پیشرفته)پارامتر پیشفرض (default parameter) در جاوااسکریپتمنظور از first class function در جاوااسکریپتبررسی متد apply در جاوااسکرتبررسی متد call در جاوااسکریپتتفاوت متدهای call و apply در جاوااسکریپت