Различия

Показаны различия между двумя версиями страницы.

--- klasi [2023/11/21 19:36]
tro
+++ klasi [2023/11/21 19:43] (текущий)
tro
@@ Строка 192: / Строка 192: @@
 console.log(mango.email); // mango@supermail.com
 </code>
+===== Наслідування класів =====
+**extends** дозволяє реалізувати наслідування класів, коли один клас (дочірній, похідний) наслідує властивості й методи іншого класу (батьківського).
+<code>
+class Parent {}
+class Child extends Parent {
+  // ...
+}
+</code>
+===== Конструктор дочірнього класу =====
+super(args) — це псевдонім конструктора батьківського класу.
+<code>
+class User {
+  #email;
+  constructor(email) {
+    this.#email = email;
+  }
+  get email() {
+    return this.#email;
+  }
+  set email(newEmail) {
+    this.#email = newEmail;
+  }
+}
+class ContentEditor extends User {
+  constructor({ email, posts }) {
+    super(email); // Виклик конструктора батьківського класу User
+    this.posts = posts;
+  }
+}
+const editor = new ContentEditor({
+	email: "mango@mail.com",
+	posts: []
+});
+console.log(editor); // { #email: "mango@mail.com", posts: [] }
+console.log(editor.email); // "mango@mail.com"
+</code>
+===== Методи дочірнього класу =====
+Дочірній клас може використовувати методи та властивості батьківського класу. Крім цього, у дочірньому класі можна оголошувати методи, які будуть доступні тільки його екземплярам.
+<code>
+// Уявімо, що вище є оголошення класу User
+class ContentEditor extends User {
+  constructor({ email, posts }) {
+    super(email);
+    this.posts = posts;
+  }
+  addPost(post) {
+    this.posts.push(post);
+  }
+}
+const editor = new ContentEditor({
+	email: "mango@mail.com",
+	posts: []
+});
+console.log(editor); // { #email: "mango@mail.com", posts: [], addPost: f }
+editor.addPost("post-1");
+editor.addPost("post-2");
+console.log(editor.posts); // ['post-1', 'post-2']
+</code>
+У прикладі бачимо, що ContentEditor успадковує клас User.
+  * User — це базовий клас, який має приватну властивість #email.
+  * ContentEditor розширює клас User і має власну властивість posts. Клас ContentEditor також має метод addPost, який дозволяє додавати нові повідомлення до posts.