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 це спеціальний метод який виконується при ініціалізації об'єкта, тобто створені об'єктного екземпляра за допомогою 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 - підключає батьківський клас. Це дозволяє успадкувати усі властивості і методи від іншого класу.
Батьківський клас повинен бути оголошений першим.
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 - вказує що метод є статичним. Статичний метод це метод який можна визвати лише без створення екземпляра класу. Якщо визвати на екземплярі класу то виникне помилка.
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 - вказує на батьківський метод:
class A{
toText(){
return "test";
}
}
class B extends A{
text(){
return super.toText();
}
}
var ob = new B();
alert( ob.text() );
У 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.
Класи у 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 );