JavaScript виконання коду JavaScript підключення зовнішнього файлу JavaScript console.log JavaScript змінні і константи JavaScript типи даних JavaScript операції зі змінними JavaScript перетворення даних JavaScript масиви JavaScript умовні конструкції JavaScript цикли JavaScript функції JavaScript область видимості змінних JavaScript замикання і функції IIFE JavaScript Паттерн Модуль JavaScript рекурсивні функції JavaScript перевизначення функцій JavaScript hoisting JavaScript передача параметрів за значенням і за посиланням JavaScript стрілочні функції JavaScript ООП Object JavaScript ООП вкладені об'єкти і масиви в об'єктах JavaScript ООП перевірка наявності і перебір методів і властивостей JavaScript ООП об'єкти у функціях JavaScript ООП конструктори об'єктів JavaScript ООП розширення об'єктів. prototype JavaScript ООП інкапсуляція JavaScript ООП Функція як об'єкт. Методи call і apply JavaScript ООП спадкування JavaScript ООП Ключове слово this JavaScript ООП Object destructuring JavaScript ООП класи JavaScript ООП Date. Робота з датами JavaScript Об'єкт Math. математичні операції JavaScript Об'єкт Array. Робота з масивами JavaScript ООП об'єкт Number JavaScript String JavaScript String Об'єкт RegExp. Регулярні вирази JavaScript String Регулярні вирази в методах String JavaScript String Синтаксис регулярних виразів JavaScript Робота з браузером і BOM JavaScript діалогові вікна JavaScript Історія браузера. об'єкт history JavaScript об'єкт location JavaScript об'єкт navigator JavaScript таймери JavaScript DOM Введення JavaScript DOM Об'єкт document. Пошук елементів JavaScript DOM Властивості об'єкта document JavaScript DOM Об'єкт Node. Навігація по DOM JavaScript DOM Створення, додавання і видалення елементів веб-сторінки JavaScript DOM Об'єкт Element. управління елементами JavaScript DOM Зміна стилю елементів JavaScript події. Введення в обробку подій. JavaScript події обробники JavaScript події. об'єкт Event JavaScript події. поширення подій JavaScript події миші JavaScript події клавіатури JavaScript FORMS. Форми і їх елементи JavaScript FORMS. Кнопки JavaScript FORMS. текстові поля JavaScript FORMS. Прапорці та перемикачі JavaScript FORMS. Список select JavaScript JSON JavaScript зберігання даних. cookie JavaScript зберігання даних. Web Storage JavaScript Collection. Ітератори JavaScript Collection. Генератори JavaScript Collection. Множина Set JavaScript Collection. Map JavaScript Collection. WeakSet і WeakMap JavaScript AJAX. XMLHttpRequest JavaScript AJAX. Відправка даних JavaScript AJAX. Promise в Ajax-запитах

JavaScript ООП класи


класи

З запровадженням стандарту ES2015 (ES6) в JavaScript з'явився новий спосіб визначення об'єктів - за допомогою класів. Клас представляє опис об'єкта, його стану і поведінки, а об'єкт є конкретним втіленням чи примірником класу.

Для визначення класу використовується ключове слово class :

class Person{
}

Після слова class йде назва класу (в даному випадку клас називається Person ), і потім в фігурних дужках визначається тіло класу.

Також можна визначити анонімний клас і привласнити його змінній:

let Person = class{}

Після цього ми можемо створити об'єкти класу за допомогою конструктора: Також можна визначити анонімний клас і привласнити його змінній:

class Person{}
 
let tom = new Person();
let bob = new Person();

Для створення об'єкта за допомогою конструктора спочатку ставиться ключове слово new . Потім власне йде виклик конструктора - по суті виклик функції по імені класу. За замовчуванням класи мають один конструктор без параметрів. Тому в даному випадку при виклику конструктора в нього не передається ніяких аргументів.

Також ми можемо визначити в класі свої конструктори. Також клас може містити властивості і методи:

class Person{

    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    display(){
        console.log(this.name, this.age);
    }

}
 
let tom = new Person("Tom", 34);

tom.display();          // Tom 34
console.log(tom.name);  // Tom

Конструктор визначається за допомогою методу з ім'ям constructor . По суті це звичайний метод, який може приймати параметри. Основна мета конструктора - форматувати об'єкт початковими даними. І в даному випадку в конструктор передаються два значення - для імені і віку користувача.

Для зберігання стану в класі визначаються властивості. Для їх визначення використовується ключове слово this . В даному випадку в класі є дві властивості: name і age .

Поведінку класу визначають методи. В даному випадку визначено метод display() , який виводить значення властивостей на консоль.

Оскільки ми визначили конструктор, який приймає два параметри, то відповідно ми можемо передати в конструктор два значення для ініціалізації об'єкта: new Person("Tom", 34) .


спадкування

Одні класи можуть успадковуватися від інших. Спадкування дозволяє скоротити обсяг коду в класах-спадкоємців. Наприклад, визначимо наступні класи:

class Person{

    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    display(){
        console.log(this.name, this.age);
    }

}


class Employee extends Person{

    constructor(name, age, company){
        super(name, age);
        this.company = company;
    }

    display(){
        super.display();
        console.log("Employee in", this.company);
    }

    work(){
        console.log(this.name, "is hard working");
    }

}
 
let tom = new Person("Tom", 34);
let bob = new Employee("Bob", 36, "Google");

tom.display();
bob.display();
bob.work();

Для спадкування одного класу від іншого у визначенні класу застосовується оператор extends , після якого йде назва базового класу. Тобто в даному випадку клас Employee успадковується від класу Person . Клас Person ще називається базовим класом, класом-батьком, суперкласом, а клас Employee - класом-спадкоємцем, підкласом, похідним класом.

Похідний клас, як і базовий, може визначати конструктори, властивості, методи. Разом з тим за допомогою слова super похідний клас може посилатися на функціонал, визначений у базовому. Наприклад, в конструкторі Employee можна вручну не встановлювати властивості name і age , а за допомогою виразу super(name, age);   викликати конструктор базового класу і тим самим передати роботу по установці цих властивостей базового класу.

Подібним чином у методі display в класі Employee через виклик super.display() можна звернутися до реалізації методу display класу Person .

Консольний результат програми:

Tom 34
Bob 36
Employee in Google
Bob is hard working


статичні методи

Статичні методи викликаються для всього класу в цілому, а не для окремого об'єкта. Для їх визначення застосовується оператор static . наприклад:

class Person{

    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    static nameToUpper(person){
        return person.name.toUpperCase();
    }

    display(){
        console.log(this.name, this.age);
    }

}

let tom = new Person("Tom Soyer", 34);

let personName = Person.nameToUpper(tom);

console.log(personName);                   // TOM SOYER

В даному випадку визначено статичний метод nameToUpper() . Як параметр він приймає об'єкт Person і переводить його ім'я у верхній регістр. Оскільки статичний метод відноситься класу в цілому, а не до об'єкта, то ми НЕ можемо використовувати в ньому ключове слово this і через нього звертатися до властивостей об'єкта.


Наш партнер:
beta test mp3 playlist downloader