Клас в JavaScript

JavaScript клас и как да го използвате ефективно.

JavaScript класът е план за създаване на „обекти“. Класът капсулира данни и функции, които манипулират данни.

За разлика от други езици за програмиране като Java и C#, JavaScript класовете са синтактична захар над прототипното наследство. С други думи, ES6 класовете са само специални „функции“.

Преразгледани класове преди ES6

Преди ES6 JavaScript нямаше концепция за класове. За да имитирате клас, често използвате „модела конструктор/прототип“, както е показано в следния пример:

function Person(name) {
    this.name = name;
}

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

var john = new Person("John Doe");
console.log(john.getName());

Изход:

John Doe

Как работи.

Първо създайте Person като функция конструктор, която има име на свойството, наречено name. getName() функцията е присвоена на prototype, така че да може да се споделя от всички екземпляри от типа Person.

След това създайте нов екземпляр от типа Person, като използвате оператора new. Следователно обектът john е екземпляр на Person и Object чрез прототипно наследяване.

Следните изрази използват оператора instanceof, за да проверят дали john е екземпляр от типа Person и Object:

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

ES6 клас декларация

ES6 въведе нов синтаксис за деклариране на клас, както е показано в този пример:

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

Този клас Person се държи като типа Person в предишния пример. Въпреки това, вместо да използва шаблон на конструктор/прототип, той използва ключовата дума class.

В класа Person constructor() е мястото, където можете да инициализирате свойствата на екземпляр. JavaScript автоматично извиква метода constructor(), когато инстанциирате обект от класа.

Следното създава нов Person обект, който автоматично ще извика constructor() на класа Person:

let john = new Person("John Doe");
Code language: JavaScript (javascript)

getName() се нарича метод от класа Person. Подобно на функция конструктор, можете да извиквате методите на клас, като използвате следния синтаксис:

objectName.methodName(args)
Code language: CSS (css)

Например:

let name = john.getName();
console.log(name); // "John Doe"
Code language: JavaScript (javascript)

За да проверите факта, че класовете са специални функции, можете да използвате оператора typeof, за да проверите типа на класа Person.

console.log(typeof Person); // function
Code language: JavaScript (javascript)

Връща function както се очаква.

Обектът john an също е екземпляр на типовете Person и Object:

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

Клас срещу потребителски тип

Въпреки приликите между клас и потребителски тип, дефиниран чрез функция конструктор, има някои важни разлики.

Първо, декларациите на класове не се „повдигат“ като декларациите на функции.

Например, ако поставите следния код над секцията за декларация на клас Person, ще получите ReferenceError.

let john = new Person("John Doe");
Code language: JavaScript (javascript)

грешка:

Uncaught ReferenceError: Person is not defined
Code language: JavaScript (javascript)

Второ, целият код в даден клас се изпълнява автоматично в строг режим. И не можете да промените това поведение.

Трето, методите на класа са „неизброими“. Ако използвате шаблон на конструктор/прототип, трябва да използвате метода Object.defineProperty(), за да направите свойство неизброимо.

И накрая, извикването на конструктора на класа без оператора new an ще доведе до грешка, както е показано в следващия пример.

let john = Person("John Doe");
Code language: JavaScript (javascript)