ارث‌بری کلاس
ارث‌بری یعنی کلاس تازه بخشی از کار کلاس قبلی را بگیرد و یک چیز به آن اضافه کند. TeaOrder از Order می‌آید. نوشیدنی و اندازه را نگه می‌دارد، extra را اضافه می‌کند و خطش tea / regular / mint است.
این صفحهٔ کوکی نیست
کوکی‌ها روی theme / dark تمام شدند و متن را در مرورگر نگه می‌داشتند. اینجا شیءها در حافظه ساخته می‌شوند. به صفحهٔ کلاس‌ها برمی‌گردیم: constructor شیء تازه را آماده می‌کند، this همان شیء است، و متد متعلق به کلاس است.
پدر فیلدهای مشترک را دارد
Order نوشیدنی و اندازه را می‌گیرد. متد label خط دو‌بخشی مشترک را می‌سازد. هر فرزند می‌تواند همین متد را به کار ببرد، مگر اینکه رفتار دیگری لازم داشته باشد.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
لاگ tea / regular است. order instanceof Order برابر true است. متد روی Order.prototype است، نه اینکه در هر سفارش جداگانه کپی شده باشد.
فرزند اول super را صدا می‌زند
extends Order فرزند را به پدر وصل می‌کند. در سازندهٔ فرزند، super(drink, size) باید پیش از this.extra = extra بیاید. super بخش پدری همین TeaOrder تازه را آماده می‌کند.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
لاگ‌ها tea و بعد mint هستند. اگر this.extra را پیش از super بگذاری، سازنده ReferenceError می‌دهد: فرزند تا وقتی سازندهٔ پدر اجرا نشده this قابل استفاده ندارد.
بازنویسی کن، بعد از پدر کمک بگیر
فرزند می‌تواند label را عوض کند. super.label() نسخهٔ پدر را صدا می‌زند تا فرزند دوباره کار نوشیدنی و اندازه را ننویسد. فقط extra را اضافه می‌کند.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
لاگ tea / regular / mint است. شیء فرزند هم instanceof Order است و هم instanceof TeaOrder. این استفادهٔ دوباره از رفتار است، نه کپی کردن شیء پدر.
یک خانوادهٔ کوچک
Order پدر است و TeaOrder فرزند. پدر چیزی را اداره می‌کند که همهٔ سفارش‌ها لازم دارند؛ فرزند چیزی را که فقط سفارش چای لازم دارد. فقط برای عوض کردن نام یک مقدار کلاس فرزند نساز.
خط صفحه
صفحه یک TeaOrder می‌سازد و label بازنویسی‌شدهٔ آن را صدا می‌زند.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
خط tea / regular / mint است. theme / dark خط صفحهٔ کوکی بود. tea / regular خط پدر بود، پیش از آنکه فرزند extra را اضافه کند.
پشت پیشخوان
- Order("tea", "regular") بساز. label برابر tea / regular است.
- TeaOrder("tea", "regular", "mint") بساز. drink برابر tea و extra برابر mint است.
- super را پیش از this.extra بگذار. بعد فرزند this قابل استفاده دارد.
- label را بازنویسی کن و super.label() را صدا بزن. خط کامل tea / regular / mint است.
- صفحه را بخوان. خط tea / regular / mint است.
جاهایی که اشتباه می‌شود
ارث‌بری رفتار را شریک می‌کند؛ نه اینکه هر ویژگی را خصوصی کند یا برای هر چیز کوچکی فرزند لازم باشد.
- استفاده از this پیش از super در سازندهٔ فرزند
- دوباره نوشتن همهٔ برچسب پدر به‌جای super.label()
- فراموش کردن اینکه شیء فرزند instanceof پدر هم هست
- صدا زدن کلاس پدر مثل تابع عادی به‌جای extends و super
- خواندن خط به‌شکل theme / dark
این‌ها را نگه دار
extends، TeaOrder را به Order وصل می‌کند- سازندهٔ فرزند پیش از this باید
super(...)را صدا بزند - متد بازنویسی‌شده می‌تواند
super.label()را صدا بزند و فقط جزئیات خودش را اضافه کند - TeaOrder هم نمونهٔ TeaOrder است و هم Order
- خط صفحه tea / regular / mint است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود