Успадкування у джаваскрипт

Dev IT JavaScript задротство 881

Джаваскрипт мова прототипна, можна прив'язати все до всього) Тому і варіантів успадкування безліч!

Позичаємо метод у 1-го об'єкта 2-му:

const obj1 = {
  name: 'Vasia',
  age: 12,
  getName() {
    return this.name;
  }
};

const obj2 = {
  name: 'Petia',
  age: 14
};

obj2.getName = obj1.getName;

Створити пустий об'єкт і помістити в нього дані з іншого об'єкта (і властивості, і методи):

const obj3 = {};
obj3.__proto__ = obj1;

Створити новий об'єкт на базі іншого:

const obj4 = Object.create(obj1);

Створити функцію-конструктор, потім додати 2 методи і на її базі стоврити дочірню функцію-конструктор з такими ж методами:

function Parent(name, age) {
  this.name = name;
  this.age = age;
  this.color = 'red';
}

Parent.prototype.getName = function () {
  return this.name;
}

Parent.prototype.getAge = function () {
  return this.age;
}

function Child(name, age, address) {
  Parent.call(this, name, age);
  this.address = address;
  this.color = 'blue';
}

Child.prototype = Parent.prototype;

А це вже найвищий рівень задротства))) Успадкування методів та властивостей за допомогою створення екземпляра об'єкта і вже з нього створення нової функції:

function Grandson(){
  this.color = 'yellow';
}
const grandson = new Grandson(); // екземпляр

Grandson.prototype = child; // успадковуємо методи і властивості за допомогою екземпляру об'єкта
const oldson = new Grandson('Онук', 8, 'Львів'); // екземпляр нового об'єкта

Сучасний варіант успадковування, за допомогою ключового слова extends:

class A{
  constructor(name, age, city){
  this.name = name;
  this.age = age;
  this.city = city;
}
  getName(){
    return this.name;
  }
  getAge(){
    return this.age;
  }
  getCity(){
    return this.city;
  }
}

У джаваскрипт class це не є оремий тип, це та сама функція-конструктор!

class B extends A{
  constructor(name, age, city, education){
  super(name, age, city); 
  this.education = education;
}
  getEducation(){
    return this.education;
  }
}

Успадкування за допомогою деструктуризації (розбиваємо об'єкт на змінні та функції та збираємо новий об'єкт):

const {name, age, getName} = obj1; // створюємо змінні з даними від об'єкта obj1
const objDestruct = {name, age, getName}; // новий об'єкт з даними obj1