ООП в JavaScript

Привет, читатель) Сегодня поговорим про ООП в JS. Статья будет полезна как новичкам, так и миддлам.

Классы

Классы - это шаблоны для объектов. Они являются основой таких языков, как C++, Java, C#, TypeScript и др. Когда вы через класс создаёте объект, то у него задаются те же методы и св-ва, как и класса. Все св-ва закидываются в конструктор (аргументы конструктора нужны для кастомных св-в), всё остальное - это методы класса.

Пример:

class Class {
  constructor(customProp) {
    this.customProp = customProp;
    this.prop = null;
 }
  classMethod(){
      return `I'm a method!`
   }
}

Теперь создадим объект с помощью класса:

let obj = new Class(`Custom prop!`);
obj.customProp // `Custom prop!`
obj.prop // null
obj.classMethod() // `I'm a method!`

Наследование

Мы можем наследовать один класс от другого сколько угодно раз. Новый класс будет брать св-ва и методы старого класса. Для того чтобы унаследовать класс, мы используем слово extends:

class A {
constructor(a) { this.a = a}
method(){ return 5 }
};
class B extends A {
method() { return 6 }
};
let obj = new B(3);
obj.a; // 3
obj.method() // 6

Как мы видим методы будут переписываться заново. Чтобы этого избежать, можно использовать похожее название в дочернем классе, например $method или _method.

Статические методы

Здесь всё просто — static методы будут привязаны к самому классу, а не к объекту.

class A { static method() { return 5 }}
let obj = new A();
A.method() // 5
obj.method() // Ошибка

Расширение конструктора

Чтобы не переписывать каждый раз св-ва класса, можно использовать super, а дальше писать новые св-ва

class A {
constructor(p1,p2){
this.p1 = 1; this.p2 = 2
}
}
class B extends A {
constructor(p1,p2,p3)
{super(p1, p2);
this.p3 = 3
}
}
b = new B();
for (let i of Object.keys(b)){
console.log(i)
}
// p1 p2 p3

Заключение

Надеюсь вы извлекли из статьи что-то полезное, спасибо за прочтение)