استفاده از this در جاوااسکریپت - آزمون چهار گزینه ای

 من برات سوالاتی طراحی کردم که به کمک اون می‌تونی بفهمی چقدر روی این موضوع تسلط داری. در عین حال، با جواب دادن به این سوالات، کلی نکته جدید هم یاد می‌گیری.

this keyword چیست و چرا مهمه؟

خب، قبل از اینکه بریم سراغ آزمون، بیا یکم در مورد this keyword صحبت کنیم. این کلمه یکی از اون مفاهیم پایه‌ای و در عین حال گیج‌کننده‌ست که اگه خوب یادش نگیری، ممکنه خیلی اذیتت کنه.

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

برای اینکه بهتر متوجه بشی، باید بدونی که در حالت پیش‌فرض و در یک تابع معمولی، مقدار this به شیء سراسری (global object) اشاره می‌کنه.

در مرورگرها، این شیء همون window هست و در نود جی‌اس (Node.js) معمولاً global. البته این قضیه چند تا استثنا و نکته داره که در ادامه بهش می‌پردازیم.

نکات و موارد استفاده کلیدی

وقتی در مورد this keyword در توابع معمولی حرف می‌زنیم، چند تا نکته مهم وجود داره که باید حواست بهشون باشه. من چند تا از مهم‌ترین‌ها رو برات اینجا آوردم:

• فراخوانی ساده تابع: اگه یک تابع رو به صورت عادی فراخوانی کنی، مقدار this در اون تابع به شیء سراسری اشاره می‌کنه.
• حالت سخت‌گیرانه (Strict Mode): اگه از 'use strict'; استفاده کنی، مقدار this در یک تابع معمولی که به صورت آزاد فراخوانی شده، برابر با undefined خواهد بود.
• توابع داخل شیء: وقتی یک تابع به عنوان متد یک شیء تعریف می‌شه و اون رو فراخوانی می‌کنی، مقدار this به همون شیء والد اشاره می‌کنه.
• استفاده از bind, call و apply: می‌تونی با استفاده از متدهایی مثل .call()، .apply() و .bind() به صورت دستی مقدار this رو برای یک تابع مشخص کنی.

چند نمونه از سوالات آزمون

در این آزمون سوالاتی رو طرح کردم که مهارت و تسلط تو رو درباره this keyword در جاوااسکریپت می‌سنجه و همزمان اطلاعات خوبی در مورد این موضوع به دست می‌آوری. برای مثال، چند تا از سوالات می‌تونه شبیه به اینها باشه:

1. 
   function showThis() {
       console.log(this);
   }
   showThis();
   

   خروجی این کد چیست؟

2. 
   'use strict';
   function showThisStrict() {
       console.log(this);
   }
   showThisStrict();
   

   خروجی این کد در حالت سخت‌گیرانه چیست؟

3. 
   const user = {
       name: 'Mahdi',
       sayHello: function() {
           console.log(this.name);
       }
   };
   const helloFunc = user.sayHello;
   helloFunc();
   

   خروجی این کد چیه و چرا؟

با شرکت در این آزمون، دقیقاً می‌فهمی که در شرایط مختلف، مقدار this چگونه تغییر می‌کنه و چه تأثیری روی کد تو داره. به این ترتیب، می‌تونی جلوی خطاهای احتمالی رو بگیری و کدهای بهتری بنویسی.

مقایسه توابع معمولی و Arrow Functions

یکی از تفاوت‌های اصلی بین توابع معمولی و Arrow Functions، نحوه عملکرد this در اونهاست. در حالی که مقدار this در توابع معمولی پویاست و به نحوه فراخوانی تابع بستگی داره، در Arrow Functions مقدار this لغوی (lexical) است و از محیط اطرافش به ارث می‌بره.

این تفاوت مهم باعث می‌شه که در انتخاب نوع تابع برای کارهامون، دقت بیشتری داشته باشیم. این آزمون به تو کمک می‌کنه که این تفاوت‌ها رو بهتر درک کنی و بدونی هر کدوم رو کجا و چطور باید استفاده کنی.

پس وقت رو تلف نکن. با کلیک روی دکمه شروع، وارد این آزمون شو و دانش خودت رو در مورد this keyword در جاوااسکریپت محک بزن.