در حال بارگذاری...

متدهای آبجکت

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

بعد از کلید و فهرست

درس ویژگی‌ها فیلد را آورد، یکی را برداشت، با in پرسید، داخل آبجکت تو در تو رفت و با Object.keys نام‌ها را گرفت. آنجا تابعی اجرا نشد. اینجا مقدارِ یک ویژگی خودش تابع است و از روی همان آبجکت صدا زده می‌شود.

پنج حرکت با متد

📊 ذخیره، صدا زدن، کوتاه‌نویسی، this، آرگومان

حرکت نحو چه به دست می‌آید
ذخیره greet: function () { return "Hi"; } تابعی که روی آبجکت نشسته
صدا زدن product.greet() تابع اجرا می‌شود و نتیجه‌اش را می‌گیرید
کوتاه‌نویسی label() { return this.name; } همان جنس تابع، با املای کوتاه‌تر
this this.name داخل متد آبجکتی که قبل از نقطه بود
آرگومان cart.add(3) ورودی اضافه فقط برای همین صدا زدن

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

گذاشتن تابع روی آبجکت

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);

مقدار می‌تواند تابع باشد

name رشته نگه می‌دارد. greet تابع نگه می‌دارد. حاصل typeof product.greet برابر "function" است. هنوز چیزی اجرا نشده، پس Hi را نمی‌بینید. اسم لیوان کنار همان تابع سر جایش است.

صدا زدن متد با پرانتز

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());

پرانتز دکمهٔ اجراست

product.greet() وارد تابع می‌شود. کنسول Hi را چاپ می‌کند. پرانتز را بردارید و به خودِ تابع نگاه می‌کنید، نه به چیزی که برمی‌گرداند. نقطه می‌گوید این صدا زدن مال کدام آبجکت است.

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

javascript 
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());

کوتاه‌نویسی فقط املای جمع‌وجورتر است

داخل آکولاد، label() { ... } تابع را روی کلید label می‌گذارد. جنسش با greet: function () { ... } یکی است؛ فقط تایپ کمتر می‌خواهد. product.label() اجراش می‌کند. بدنه this.name را می‌خواند و کنسول Mug را نشان می‌دهد.

خواندن فیلدهای هم‌خانه با this

javascript 
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());

در فراخوانی ساده، this همان آبجکتِ قبل از نقطه است

معنی product.tag() این است: tag را اجرا کن و بگذار this همان product باشد. آن‌وقت this.name و this.price فیلدهای خودِ لیوان‌اند. کنسول Mug — 8 را چاپ می‌کند. name برهنه داخل متد جست‌وجوی دیگری است و خودِ ویژگی نیست. اگر شکل صدا زدن دیگر object.method() نباشد، this ممکن است جای دیگری برود — آن درس بعدی است. این صفحه فقط فراخوانی ساده را نگه می‌دارد.

دادن آرگومان به متد

javascript 
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));

متد برای همین صدا زدن ورودی می‌گیرد

add منتظر extra است. cart.add(3) عدد 3 را می‌دهد، به count اضافه می‌کند و جمع تازه را برمی‌گرداند. کنسول 5 را چاپ می‌کند. سبد همان count به‌روز را نگه می‌دارد. آرگومان مالِ همین فراخوانی است و فقط اگر خودتان ذخیره‌اش کنید ویژگی می‌شود.

حرکتی را بردارید که به کار می‌آید

تابع باید روی آبجکت زندگی کند؟ ذخیره‌اش کنید، شکل بلند یا کوتاه. نتیجه را می‌خواهید؟ با () صدا بزنید. فیلدهای خودِ آبجکت را می‌خواهید؟ از راه this بخوانید. عددی فقط برای همین اجرا لازم است؟ آرگومان بدهید. Object.keys در درس قبل نام‌ها را فهرست کرد. درس بعد کنار this می‌ماند، وقتی شکل صدا زدن عوض شود.

برچسب متد را روی صفحه بگذارید

برای کالا name و price و tag بگذارید. حاصل product.tag() را داخل یک پاراگراف بنویسید.

دموی صفحه — برچسب متد

html 
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>

پاراگراف Mug — 8 را نشان می‌دهد. tag این رشته را از فیلدهای خودِ کالا ساخته. فقط name یا price را عوض کنید، تازه کنید، و خط جدید را بخوانید. درس بعد: کلمهٔ this — وقتی صدا زدن دیگر به شکل سادهٔ object.method() نیست، this به کجا اشاره می‌کند.

گام‌های تمرین

  1. تابعی را روی greet بگذارید و typeof همان ویژگی را چاپ کنید.
  2. product.greet() را صدا بزنید و Hi را بخوانید.
  3. label را با کوتاه‌نویسی بنویسید و product.label() را چاپ کنید.
  4. tag را طوری بسازید که this.name و this.price یک رشته شوند.
  5. count را از ۲ شروع کنید، add(3) را صدا بزنید و 5 را بخوانید.
  6. در دموی HTML فقط name یا price را عوض کنید، تازه کنید، پاراگراف را بخوانید.

لغزش‌های پرتکرار

  • product.greet را بدون () چاپ کنید و منتظر Hi بمانید
  • کوتاه‌نویسی label() {} را ویژگیِ رشته‌ای حساب کنید
  • داخل متد به‌جای this.name فقط name برهنه بنویسید
  • خیال کنید cart.add(3) مقدار count را روی ۲ نگه می‌دارد
  • وقتی می‌خواستید متد را صدا بزنید سراغ Object.keys بروید
  • تابع پیکانی را جای متد این صفحه بگذارید — درس بعد this را وقتی شکل صدا زدن عوض می‌شود دنبال می‌کند

جمع‌بندی

  • متد تابعی است که به‌صورت ویژگی ذخیره شده
  • object.method() اجراش می‌کند و مقدار برگشتی را می‌دهد
  • کوتاه‌نویسی name() {} همان جنس تابع را ذخیره می‌کند
  • در فراخوانی ساده، this آبجکتِ قبل از نقطه است
  • پارامتر، آرگومانِ همان صدا زدن را می‌گیرد
  • رشتهٔ متد می‌تواند یک خط از صفحه را پر کند
  • بعدی: کلمهٔ this، وقتی صدا زدن object.method() نیست

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 35 از 37
Javascript آموزش