class

class - опис класу у JavaScript.

Синтаксис:

class NameClass{ }

Параметри:

NameClass - назва класу.

Опис:

class - описує клас для створення екземпляра класу за допомогою new.

Клас у програмуванні це опис методів і властивостей об'єкта.

Класи у JavaScript появилися у ECMAScript 6 (ES6), і являються по факту такими ж функціями конструкторами (об'єктами). У JavaScript класи забезпечують набагато більш простий і зрозумілий синтаксис для створення і наслідування об'єктів.

class Test{ //оголошений клас }

У класі також оголошуються властивості класу. Оголошення властивості класу можливо як у описі класу так і у конструкторі класу у форматі: this.назва_властивості.

class Test{ name='test'; } class Test{ constructor(){ this.name='test'; } }

Оголошенні властивості class є публічними. Якщо необхідно щоб властивість була приватною використовується символ #.

class Test{ #text='test'; }

Так як приватні властивості появилася значно пізніше у class, використовували так звані "умовно приватні" властивості і методи. Їх суть полягає що програмісти "домовилися" що "умовна приватна властивість/метод" буде з назвою яка починається з символа _, наприклад: _name. І якщо назва властивості класу починається з символа _, то вона є приватною, і її "не потрібно" зміннювати.

З використанням приватної властивості класу і лише сетера можна отримати захищену властивість, яка буде доступна лише для читання.

class Test{ //"умовно приватна властивість" _sizes=0; constructor(size){ if(size)this._sizes=size; } get sizes(){ return this._sizes; } } var ob=new Test(2); //намагаємося змінити захищену властивість ob.sizes=9; console.log(ob.sizes); //2 //зміннюємо "умовно приватну" властивість ob._sizes=10; console.log(ob._sizes); //10 console.log(ob.sizes); //10

З появою приватних властивостей класу можна бути впевненим що дану властивість не змінять зовні класу.

class Test{ //приватна властивість #sizes=0; constructor(size){ if(size)this.#sizes=size; } get sizes(){ return this.#sizes; } } var ob=new Test(2); //намагаємося змінити захищену властивість ob.sizes=9; console.log(ob.sizes); //2 //SyntaxError: "Private field '#sizes' must be declared in an enclosing class" console.log(ob.#sizes);

constructor

constructor це спеціальний метод який виконується при ініціалізації об'єкта, тобто створені об'єктного екземпляра за допомогою new.

class Test{ constructor(){ console.log("ініціалізації об'єктного екземпляра class"); } } var ob=new Test();

Конструктор приймає параметри при створені об'єктного екземпляра class. Зазвичай у конструкторі встановлюються початкові значення об'єкта, налаштування.

class Test{ constructor(name){ this.name=name; } } var ob=new Test('js'); alert( ob.name );

extends

extends - підключає батьківський клас. Це дозволяє успадкувати усі властивості і методи від іншого класу.

Батьківський клас повинен бути оголошений першим.

class A{ constructor(text){ this.text=text; } } class B extends A{ toText(){ return this.text; } } var ob=new B("test"); alert( ob.toText() ); class myArray extends Array{ toJSON(){ return JSON.stringify( Array.from(this) ); } } var mas = new myArray(1, 2, 3, "чотири", [2,2]); alert( mas.toJSON() );

static

static - вказує що метод є статичним. Статичний метод це метод який можна визвати лише без створення екземпляра класу. Якщо визвати на екземплярі класу то виникне помилка.

class MyClass{ constructor(text){ this.text=text; } static toText(){ return "тест"; } } var ob=new MyClass("test"); alert( MyClass.toText() ); alert( ob.toText() ); //TypeError toText is no a function

super

super - вказує на батьківський метод:

class A{ toText(){ return "test"; } } class B extends A{ text(){ return super.toText(); } } var ob = new B(); alert( ob.text() );

get і set

У JavaScript в описі класу можна звертатися до властивості об'єкту за допомогою гетера і сетера.

Для того щоб можна було задати властивість об'єкту за допомогою сетера вказується set перед функцією, а щоб отримати за допомогою гетера вказується get.

class myClass{ constructor(s){ this.name=s; } //сетер set text(s){ this.name=s; } //гетер get text(){ return this.name; } } var ob = new myClass("js"); alert( ob.text ); //"js" ob.text="JavaScript";

Приклад створення класу:

class MyClass{ constructor (text){ this.text = text; } } var ob=new MyClass("test"); alert(ob.text); alert(typeof ob); // "object"

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

function MyClass(text){ this.text = text; } var ob=new MyClass("test"); alert( ob.text ); alert(typeof ob); // "object"

Конструктор класу та методи класу виконуються у суворому режимі "use strict", навіть якщо суворий режим не включений.

Для перевірки чи являється об'єкт екземпляром вказаного класу використовується instanceof.

class і Object.prototype

Класи у JavaScript є надбудовою над протитипним наслідуванням. Класи мають більш кращий синтаксис.

Об'єкт за допомогою class:

class Test{ constructor(name){ this.name=name; } getName(){ return this.name; } } var ob = new Test('js class'); console.log( ob.getName() ); // "js class" console.log( ob instanceof Test); // true

Об'єкт за допомогою прототипу:

function Test(name){ this.name=name; } Test.prototype.getName= function(){ return this.name; } var ob = new Test('js prototype'); console.log( ob.getName() ); // "js prototype" console.log( ob instanceof Test); // true

Приклад:

class myClass{ constructor(s){ this.name=s; this.date= new Date(); } } var ob= new myClass("Київ"); alert( ob.name ); class Person{ constructor(name, dn){ this.name=name; this.dn=new Date(dn); } // визначаємо вік get vik(){ var d = new Date(); var v = d.getFullYear()-this.dn.getFullYear(); if(d.getMonth() - this.dn.getMonth()<0)v=v-1; else if(d.getMonth() - this.dn.getMonth()==0){ if(d.getDay()-this.dn.getDay()<0) v=v-1;} return v; } toString(){ return this.name+" "+this.dn; } } var p = new Person("Марія", "1996-01-26"); p.tel="+30961234567" alert( p.vik );