this در تابع (Function this)
کلیدواژه «this» یعنی «این شیء فعلی». در جاوااسکریپت، this بسته به «نوع فراخوانی» تغییر می کند. پس همیشه اول ببین تابع چطور اجرا شده است.
this به تنهایی
وقتی this تنها باشد، به شیء سراسری اشاره می کند. در مرورگر، همان window است.
let x = this;
در حالت «strict»، وقتی تنها باشد، باز هم سراسری است.
"use strict";
let x = this;
this در تابع (پیش فرض)
داخل تابعِ معمولی، پیش فرض this همان شیء سراسری است.
function myFunction() {
return this;
}
this در تابع (strict)
در «strict mode»، اتصال پیش فرض غیرفعال است. بنابراین this برابر undefined می شود.
"use strict";
function myFunction() {
return this;
}
this در رویدادها
در رویدادهای HTML، this همان المنتی است که رویداد گرفته است.
<button onclick="this.style.display='none'">
Click to Remove Me!
</button>
ترتیب تقدم this
برای تشخیص this این ترتیب را در نظر بگیر:
- bind() اولویت دارد و this را می بندد.
- apply() یا call() شیء this را تعیین می کند.
- متد شیء، this را برابر همان شیء می کند.
- تابعِ بدون مالک، this را سراسری می کند.
گام های تمرینی
- یک تابع معمولی بساز و this را چاپ کن.
- همان تابع را با "use strict" آزمایش کن.
- یک دکمه بساز و this رویداد را ببین.
جمع بندی سریع
- this یعنی «مالک فعلی کد».
- تابع معمولی، this را سراسری می گیرد.
- در strict، this داخل تابع undefined است.
- در رویداد، this همان المنت است.
- bind / call / apply مالک را عوض می کنند.
نکته: برای دیدن تفاوت ها، صفحه فراخوانی تابع را هم ببین. همچنین برای کنترل this با bind/call/apply به تابع call/apply/bind سر بزن.
برای درک بهتر «this در تابع»، از همین عبارت به عنوان جست وجو در this در تابع هم استفاده کن.