javascriptMethods and thisمتد و this در جاوااسکریپت
متد و this در جاوااسکریپت را با محاسبهٔ سبد خرید یاد بگیرید؛ نقش شیوهٔ فراخوانی، جداکردن متد از شیء و حفظ اتصال با bind را بررسی کنید.
مفهوم به زبان ساده
وقتی یک ویژگی شیء، مقدار تابع داشته باشد، میتوان آن را بهعنوان متد فراخوانی کرد. در فراخوانی معمولی به شکل cart.total()، تابع با cart بهعنوان this اجرا میشود. بنابراین همان رفتار میتواند دادهٔ شیئی را بخواند که از طریق آن فراخوانی شده است. this نام دیگری برای متغیر cart نیست و معنایش فقط از محل نوشتن تابع تعیین نمیشود.
مثال، قیمت و تعداد را در یک سبد نگه میدارد و متد total حاصل ضرب آنها را میدهد. وقتی متد را در detached میگذاریم، خود تابع حفظ میشود، اما اتصال همیشگی به cart ایجاد نمیشود. فراخوانی مستقل در حالت strict، this را undefined میگیرد و دسترسی به ویژگی آن خطا میدهد. نمونه خطای مورد انتظار را برای مشاهدهٔ نتیجه میگیرد.
bind تابع تازهای میسازد که this آن به مقدار دادهشده متصل است؛ تابع اصلی را ویرایش نمیکند. این روش هنگام تحویل متد به callback میتواند مفید باشد. تابع پیکانی this مستقل ندارد و از محیط تعریفش میگیرد؛ پس جایگزین خودکار متد معمولی نیست. برای تمرین، quantity را پیش از اجرای نسخهٔ متصل تغییر دهید و ببینید مقدار فعلی سبد خوانده میشود؛ bind نسخهٔ ثابتی از همهٔ ویژگیها ذخیره نکرده است.
کجا به کار میآید؟
- گروهبندی رفتار محاسبه با دادهٔ همان شیء
- حفظ this هنگام تحویل یک متد به بخش دیگر برنامه
از تعریف تا یک مثال واقعی
'use strict';
const cart = {
quantity: 2,
unitPrice: 80000,
total() { return this.quantity * this.unitPrice; }
};
console.log(cart.total());
const detached = cart.total;
try { detached(); }
catch (error) { console.log(error instanceof TypeError); }
const connected = cart.total.bind(cart);
console.log(connected());
160000 true 160000
این مثال چطور کار میکند؟
cart.total() دادههای cart را از طریق this میخواند.
انتساب به detached فقط تابع را منتقل میکند؛ فراخوانی مستقل، cart را گیرنده نمیگیرد.
bind نسخهای متصل به cart میسازد و محاسبه دوباره ۱۶۰۰۰۰ میشود.
اشتباه رایج
ظاهر یک تابع درون شیء، اتصال دائمی this را تضمین نمیکند. جداکردن متد و دادن آن به callback میتواند شیوهٔ فراخوانی را تغییر دهد.
این را به خاطر بسپارید
برای فهم this در تابع معمولی، شیوهٔ فراخوانی را دنبال کنید؛ فقط محل تعریف را نگاه نکنید.