آبجکت‌ها - قسمت 2 | متدها

درود! توی این قسمت کوتاه می‌خوایم با یک ویژگی دیگه از آبجکت‌های جاوااسکریپت آشنا بشیم: متد یا Method

توی این قسمت یاد می‌گیریم که:

• متد چیه؟
• چطوری متد بسازیم؟
• کلمه‌کلیدی this چیه؟
• استفاده از Arrow Functions برای متدها

متد (Method) چیه؟ 🤔

توی قسمت قبل با پراپرتی‌ها آشنا شدیم و گفتیم که مقدار پراپرتی‌ها می‌تونه از هر نوعی باشه.

به پراپرتی‌ای که مقدار اون یک تابع باشه می‌گیم متد.

متد توی آبجکت به صورت زیر تعریف میشه:

const user = {
  sayHello: function () {
    alert("Hello");
  },
}

همونطور که می‌بینیم یک پراپرتی داریم که مقدار اون یک تابع هست. می‌تونیم به شکل خلاصه‌تر متدها رو به صورت زیر بنویسیم:

const user = {
  sayHello() {
    // do ...
  },
}

چطوری به متدها دسترسی داشته باشیم؟ 🤔

توی قسمت قبل گفتیم که برای دسترسی به پراپرتی‌ها از فرمت زیر استفاده می‌کنیم:

object.propertyName

متدها هم به همین صورت قابل دسترسی هستن. اما به این دلیل که متدها در حقیقت تابع هستن، توی قسمت توابع یاد گرفتیم که برای فراخونی اونها باید از پرانتزهای باز و بسته استفاده کنیم:

object.methodName();

برای مثال:

const user = {
  sayHello() {
    alert("Hello");
  },
}

>> user.sayHello();

درست مثل توابع، متدها می‌تونن ورودی و خروجی داشته باشن:

const user = {
  welcome(<<name>>) {
    return "Welcome " + name;
  },
}

alert(user.welcome("Mario"));

کلمه‌کلیدی this توی متدها

همه توابع توی خودشون یک کلمه‌کلیدی دارن به اسم this:

function x() {
>>   this;
}

فرض کنیم آبجکتی داریم به صورت زیر:

const user = {
  name: "Mario",
  welcome() {
    // How to access name?
  }
}

توی متد welcome چطوری می‌تونیم به بقیه اعضای آبجکت مثلاً پراپرتی name دسترسی داشته باشیم؟ با استفاده از کلمه‌کلیدی this:

const user = {
  name: "Mario",
  welcome() {
    alert(<<this.name>>);
  }
}

user.welcome();

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

const user = {
  name: "Mario",
  welcome() {
    console.log(this);

    return this;
  }
}

alert(user.welcome() === user);

با اجرای کد بالا، علاوه‌بر اینکه کد خط ۱۰ به ما true برمی‌گردونه، توی کنسول مرورگر می‌بینیم که آبجکت user برای ما نمایش داده میشه. پس this همون آبجکت user هست و بنابراین می‌تونیم با اون به متدها و پراپرتی‌های دیگه دسترسی داشته باشیم:

const user = {
  name: "Mario",
  getName() {
    return <<this.name>>;
  },
  welcome() {
    return <<this.getName()>>;
  },
}

alert(user.welcome()); // Mario

استفاده از Arrow Functions برای متدها

ما برای ساختن متدها می‌تونیم از Arrow Function ها هم استفاده کنیم:

const user = {
  sayHello: () => {
    alert("Hello");
  }
}

user.sayHello();

بهتره فقط زمانی از Arrow Function ها استفاده کنیم که توی تابع از کلمه‌کلیدی this استفاده نمی‌کنیم. چون مقدار this توی این توابع دیگه آبجکتِ مدنظر ما نیست.

خب دوستان با متدها و کلمه‌کلیدی this آشنا شدیم و تا اینجا مباحث و مفاهیم اصلی مرتبط با آبجکت‌ها رو تونستیم یاد بگیریم. موضوع آبجکت‌ها توی ادامه آموزش زیاد به کارمون میان. روزتون خوش 😉🖐