کلمه‌کلیدی this | آموزش جاوااسکریپت به زبان ساده

پس اینطوری می‌تونیم به پراپرتی‌های آبجکت window که همون متغیرهای گلوبال اسکوپ هستن دسترسی داشته باشیم:

توی این کد، اجراکنندهٔ تابع getName که توی خط آخر صدا زده شده، آبجکت سراسری هست. پس this توی این تابع به آبجکت سراسری اشاره می‌کنه. و بنابراین this.name توی خط ۴ به متغیری اشاره می‌کنه توی آبجکت سراسری تعریف شده که مقدار اون David هست.

خب بیاین یه جور دیگه تابع getName رو صدا بزنیم جوری که صاحبش عوض بشه:

آبجکت obj یک پراپرتی داره به اسم print که مقدار اون برابر با تابع getName اول کد هست. وقتی توی خط آخر پراپرتی print رو مثل یک تابع صدا می‌زنیم، در اصل تابع getName داره صدا زده میشه، با این تفاوت که اجرا کنندهٔ این تابع، آبجکت obj هست و بنابراین مقدار this، آبجکت obj در نظر گرفته میشه. چون تابع getName توسط obj و از داخل اون داره فراخوانی میشه.

همونطور که گفته شد، مهم نیست یک تابع کجا تعریف شده. مهم اینه که کجا داره ازش استفاده میشه. بنابراین خروجی خط ۱۲ برابر با John هست که توی obj تعریف شده.

حالا کد زیر رو در نظر بگیرید:

۱. توی خط ۱۰ مقدار متد getName از آبجکت person رو ریختیم توی متغیری به اسم myGetName. دقت کنین که هنوز این متد رو صدا نزدیم (توی خط ۱۰ پرانتزهای تابع رو حذف کردیم که اجرا نشه). پس اون رو می‌تونیم مثل یک تابع هر جای برنامه صدا بزنیم.

۲. توی خط ۱۲ که صاحب این قسمت همون آبجکت سراسری هست، تابع myGetName رو فراخونی می‌کنیم. پس خروجی، مقدار متغیر name از آبجکت سراسری (خط ۱) هست.

۳. اما خروجی خط ۱۳ چطور؟ اینجا getName داره از درون آبجکت ‌person صدا زده میشه. پس this به nameی اشاره می‌کنه که توی آبجکت person هست یعنی John.

مقدار this توی توابع با use strict

توی توابع با حالت سخت‌گیرانه، مقدار this دیگه آبجکت سراسری نیست. بلکه undefined خواهد بود:

مقدار this بیرون از توابع

مقدار this وقتی بیرون از توابع استفاده بشه، به آبجکت سراسری یا Global Object اشاره می‌کنه:

مقدار this در Arrow Functions

یکی از نکات مهمی که باید در نظر داشته باشیم اینه که مقدار this توی توابع معمولی با مقدار اون توی Arrow Function فرق می‌کنه. همونطور که گفتیم مقدار this توی توابع معمولی به آبجکتی اشاره می‌کنه که داره اون تابع رو اجرا می‌کنه. اما توی Arrow Function ها مقدار this به صاحب (اسکوپ) آبجکتی اشاره می‌کنه که ‌‌Arrow Function توی اون تعریف شده. بدون در نظر گرفتن اینکه تابع به چه صورت داره استفاده میشه:

توی مثال بالا printName توی آبجکت person تعریف شده. آبجکت ‌person کجا تعریف شده؟ آبجکت سراسری. پس this.name توی متد printName به مقدار name خط ۱ (John) که یک متغیر سراسری هست اشاره می‌کنه.

در واقع وقتی توی این توابع this رو صدا می‌زنیم، انگار اون this توی یک تابع نیست. پس باید ببینیم در صورت وجود نداشتن این تابع، this چه مقداری داشت.
 

مقدار this در توابع Constructor

کد زیر رو در نظر بگیرید. تابع Person یک Constructor Function هست که از اون با کلمه‌کلیدی new یک آبجکت ساختیم:

هنگام ساخته شدن نمونه از تابع سازنده:

۱. ابتدا یک آبجکت خالی ساخته میشه به اسم this

۲. درون این آبجکت، با this.name یک پراپرتی به اسم name با مقدار ورودی که به تابع پاس داده شده قراره می‌گیره

۳. نهایتاً آبجکت this برای ما return میشه.

برای مثال چیزهایی شبیه به این اتفاق می‌افته:

function Person(name) {
  var this = {}
  this.name = name;

  return this;
}

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

چطوری یک this ثابت و پایدار داشته باشیم؟

گفتیم که تا قبل از اجرای کد، نمی‌تونیم مقدار this رو تشخیص بدیم. تابع زیر رو در نظر بگیرید:

function getName() {
  return this.name;
}

اینجا this خط ۲ مقدارش قابل تشخیص نیست. چون هنوز نمی‌دونیم توسط کدوم قسمت می‌خواد اجرا بشه. اما شرایطی هست که دلمون می‌خواد صراحتاً مشخص کنیم this به کجا اشاره کنه و دیگه دغدغهٔ این رو نداشته باشیم که این تابع کجا و به چه صورت داره صدا زده میشه.

ما با استفاده از متدهای call و apply می‌تونیم صراحتاً مشخص کنیم که مقدار this توی توابع به چه آبجکتی اشاره کنه

همه توابع توی خودشون متدهای call و apply رو دارن. اولین ورودی که این متدها می‌گیرن همون آبجکتی هست که می‌خوایم this به اون اشاره کنه:

funcName.call(obj);
funcName.apply(obj);

کد زیر رو درنظر بگیرید:

وقتی تابع getName رو مثل خط‌های ۹ و ۱۰ فراخونی می‌کنیم، این تابع در شرایطی اجرا میشه که this توی اون داره به آبجکت person اشاره می‌کنه.

برای آشنایی بیشتر با این متدها، سوال ۲۷ و ۲۸ سوالات مصاحبه جاوااسکریپت رو ببینید:

همچنین یک متد دیگه داریم به اسم bind که کار مشابهی انجام میده که از پست زیر با اون می‌تونین به صورت مفصل آشنا بشین:

خب دوستان با مهمترین نکته‌ها از کلمه‌کلیدی this آشنا شدیم. در شرایطی که خیلی‌ها اون رو یک افسانه و یک چیز پر رمز و راز می‌دونن، دیدیم که با در نظر داشتن چند قانون، چقدر راحت می‌تونیم مقدار اون رو تشخیص بدیم.

امیدوارم از این قسمت استفاده کرده باشید روزتون خوش 😉✌️