This در جاوا اسکریپت – توضیح و کاربرد + مثال

کلمه کلیدی This در جاوا اسکریپت برای ارجاع به «شی» (Object) استفاده می‌شود و کاربردهای بسیار قابل‌توجه دیگری نیز دارد. از آنجا که توابع در جاوا اسکریپت اساساً نوعی اشیا به‌حساب می‌آیند، مانند اشیا کاربر می‌تواند آن‌ها را به متغیرهایی اختصاص دهد، به توابع دیگر منتقل کند و بسیاری از عملیات دیگر را روی آن‌ها انجام دهد. توابع در جاوا اسکریپت خواص مختص به خودشان را دارند که در این میان، This یکی از آن‌ها است. در این مطلب آموزشی از مجله فرادرس قرار بر این است که اطلاعات کاملی از This در جاوا اسکریپت ارائه شود تا کاربران بتوانند به خوبی آن را درک کنند و در کدهای خود آن را به کار ببرند.

This در جاوا اسکریپت چیست؟

به طور کلی می‌توان گفت که This در زبان برنامه نویسی جاوا اسکریپت به شیئی اشاره می‌کند که تابع یک ویژگی از آن است. به زبان ساده می‌توان گفت که This به شیئی که در حال حاضر تابع را فراخوانی می‌کند ارجاع می‌دهد. کلمه کلیدی This در زبان برنامه نویسی جاوا اسکریپت در مقایسه با زبان‌های دیگر کمی متفاوت عمل می‌کند.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

مقدار This در جاوا اسکریپت بیشتر با نحوه فراخوانی تابع بازگردانده می‌شود. همچنین برای کلمه کلیدی This در زبان جاوا اسکریپت، نمی‌توان آن را با انتساب تنظیم کرد و هر دفعه که تابع فراخوانی می‌شود مقدار آن ممکن است متفاوت باشد. این کلمه کلیدی بسته به نحوه استفاده از آن به اشیاء مختلف اشاره خواهد کرد.

برای درک بهتر این کلمه کلیدی در همان ابتدا، اینجا مثالی بیان خواهد شد. فرض بر این است شیئی به نام counter وجود دارد که این شی حاوی متد next()‎ خواهد بود. وقتی متدnext()‎فراخوانی می‌شود، می‌توان به این شی دسترسی داشت. قطعه کد این مثال به‌صورت زیر است.

1let counter = {
2  count: 0,
3  next: function () {
4    return ++this.count;
5  },
6};
7
8counter.next();

در درون تابع next()‎، کلمه کلیدی This به شی counterارجاع می‌دهد. فراخوانی متد زیر این موضوع را بیان می‌کند.

1counter.next();

در اینجا تابع next()‎، ویژگی شی counterبه‌حساب می‌آید. بنابراین، در داخل تابع next()‎، کلمه کلیدی This به شی counterارجاع می‌دهد.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

سینتکس This در جاوا اسکریپت

کلمه کلیدی This در زبان جاوا اسکریپت به صورت زیر نوشته خواهد شد:

1this

ارزش مقدار This در جاوا اسکریپت به این بستگی دارد که در چه زمینه‌ای ظاهر خواهد شد. This ممکن است که در زمینه‌های زیر ظاهر شود:

• تابع
• کلاس
• زمینه سراسری

در ادامه این مقاله ظاهر شدن This در هرکدام یک از موارد فهرست فوق مورد بررسی واقع خواهند شد. همچنین شایان ذکر است که نحوه ظاهر شدن در هرکدام از موارد فوق می‌تواند در دو حالت رخ دهد. یکی از آن‌ها حالت دقیق است و دیگری حالت غیر دقیق، از این دو حالت به نام‌های حالت سخت و غیر سخت نیز نام‌برده می‌شود.

This در زمینه سراسری

در زمینه اجرای سراسری یعنی زمانی که کلمه کلیدی This خارج از توابع یا کلاس باشد یا به عبارت دیگر زمانی که This در داخل بلوک‌ها یا «توابع پیکان» (Arrow Functions) تعریف شده در محدوده جهانی یا سراسری باشد، مقداری که کلمه کلیدی This بازمی‌گردند به این بستگی دارد که زمینه اجرایی آن چه باشد. زمانی که کلمه کلیدی This در بالای اسکریپت یا قطعه کد ظاهر شود، در هر حالتی This به زمینه سراسری اشاره خواهد داشت (یعنی اگر به صورت GlobalThis ظاهر شود) و جاوا اسکریپت به صورت کلی با آن مانند اشیای سراسری برخورد می‌کند.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

نکته: GlobalThis به طور کلی همان مفهوم شی سراسری را می‌رساند. این ویژگی برای همه مرورگرها و چارچوب نود جی اس صادق است، با این حال میزبان‌ها یا دستگاه‌های سمت مشتری می‌توانند مقدار متفاوت را برای GlobalThis ارائه دهند که با شی سراسری هیچ ارتباطی ندارد. مثال زیر در رابطه با کاربرد کلمه کلیدی This در زمینه سراسری یا گلوبال است:

1// In web browsers, the window object is also the global object:
2console.log(this === window); // true
3
4this.b = "MDN";
5console.log(window.b); // "MDN"
6console.log(b); // "MDN"

مثال زیر هم در رابطه با این موضوع است:

1console.log(this === window); // true

اگر خاصیتی به This در زمینه سراسری اختصاص یابد، جاوا اسکریپت همان‌طور که در مثال زیر نشان داده شده است، این ویژگی را به شی سراسری اضافه می‌کند:

1this.color= 'Red';
2console.log(window.color); // 'Red'

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

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

• «فراخوانی تابع» (Function invocation)
• «فراخوانی متد» (Method invocation)
• «فراخوان سازنده» (Constructor invocation)
• «فراخوانی غیرمستقیم» (Indirect invocation)

کلمه کلیدی This را می‌توان از هر چهار منظر مورد بررسی قرار داد که در ادامه این مطلب این کار انجام خواهد شد.

This در فراخوانی تابع

در داخل توابع جاوا اسکریپت، کلمه کلیدی This به نحوه فراخوانی تابع بستگی دارد. در این رابطه فرض بر این است که This نوعی پارامتر پنهان است که دقیق مانند پارامترهای اعلام شده در خود تابع عمل می‌کند. برای توابع معمولی، This در جاوا اسکریپت دقیق مانند شیئی است که تابع به آن دسترسی دارد. برای مثال اگر فراخوانی تابع به صورت obj.f()‎ باشد، در این صورت This به obj اشاره خواهد داشت. مثال زیر در رابطه با این موضوع خیلی مهم است.

1function getThis() {
2  return this;
3}
4
5const obj1 = { name: "obj1" };
6const obj2 = { name: "obj2" };
7
8obj1.getThis = getThis;
9obj2.getThis = getThis;
10
11console.log(obj1.getThis()); // { name: 'obj1', getThis: [Function: getThis] }
12console.log(obj2.getThis()); // { name: 'obj2', getThis: [Function: getThis] }

همچنین در حالت غیردقیق، وقتی تابع به صورت زیر فراخوانی می‌شود، This به شی سراسری ارجاع می‌دهد:

1function show() {
2   console.log(this === window); // true
3}
4
5show();

در مثال بالا زمانی که تابع show()‎ فراخوانی می‌شود، کلمه کلیدی This به شی سراسری اشاره می‌کند. در این مثال این شی Window یا پنجره مرورگر است که نوعی متغیری سراسری در مرورگرهای وب و نود جی اس خواهد بود. در رابطه با این مثال، فراخوانی تابع show()‎به صورت زیر است:

1window.show();

در حالت سخت یا غیردقیق، جاوا اسکریپت برای This تابعی را روی مقدار «تعریف نشده» (Undefined) تنظیم می‌کند. مثال زیر این موضوع را نشان می‌دهد:

1"use strict";
2
3function show() {
4    console.log(this === undefined);
5}
6
7show();

همان‌طور که مثال بالا قابل مشاهده است، برای فعال کردن حالت سخت، از دستور use strict در ابتدای کد جاوا اسکریپت استفاده می‌شود. همچنین کاربر می‌تواند این حالت سخت را فقط برای تابعی خاص اعمال کند که در این صورت دستور نام برده را فقط در بالای بدنه آن تابع قرار می‌دهد. همچنین باید به این نکته توجه داشت که حالت سخت از زمان «ECMAScript 5.1» در دسترس قرار گرفت. حالت سخت برای توابع معمولی و توابع تودرتو قابل عمال است. مثال زیر این موضوع را نشان می‌دهد.

1function show() {
2    "use strict";
3    console.log(this === undefined); // true
4
5    function display() {
6        console.log(this === undefined); // true
7    }
8    display();
9}
10
11show();

خروجی این مثال به صورت زیر است:

true
true