Комплетан водич са примерима

ЈаваСцрипт је језик са више парадигми који вам омогућава да пишете програме који прате функционалне, објектно оријентисане и императивне стилове програмирања.

Да би подржао објектно оријентисане обрасце, ЈаваСцрипт има класе. Пошто је њихово разумевање кључно, овај чланак је водич о томе шта су ЈаваСцрипт класе и како их користити.

Шта су класе у ЈаваСцрипт-у?

У објектно оријентисаном програмирању моделујемо системе као групе објеката који међусобно делују. Да би функционисали, објекти чувају податке у својствима и извршавају радње дефинисане као њихове методе. Класа дефинише која својства и методе носе објекти истог типа. Према томе, класе су нацрти за објекте.

Терминологије које се користе у настави

Да бисмо били сигурни да смо на истој страници, ево описа класа са кључним терминима које ћемо користити у овом чланку. Ако сте већ упознати са објектно оријентисаним програмирањем, можете прескочити на следећи одељак.

❇ Класа је нацрт за објекат. Пружа шаблон из којег се могу направити објекти тог типа. Креирање објекта из шаблона који даје класа назива се инстанција.

❇ Члан разреда је све што припада разреду. Постоје две врсте чланова класе – методе и својства.

❇ Својство је члан класе чија је примарна сврха чување вредности. То могу бити једноставне вредности као што су бројеви и стрингови. Они такође могу бити сложени објекти и низови.

❇ Нека својства су доступна само унутар класе и прикладно су названа приватним својствима. Неки су доступни и унутар и ван разреда. Таква својства се називају јавна својства.

❇ Метод је функција дефинисана унутар класе. Дакле, припада класи и има приступ јавним и приватним својствима. Као и својства, имамо и јавне методе и приватне методе.

❇ Постоје неке методе које обезбеђују интерфејс за код изван класе за интеракцију са својствима унутар класе. Постоје две групе метода које то раде: геттери и сеттери. Геттери добијају вредности својстава класе, док постављачи постављају вредности својстава класе.

❇ Неки чланови су статични. То значи да су доступни само у класи и не могу им се приступити на инстанцама класе.

Насупрот томе, неки чланови класе нису статични, што значи да им се може приступити само на инстанцама класе. Морате инстанцирати класу да бисте могли да приступите нестатичном члану.

Када инстанцирате класу, позива се посебна метода за подешавање својстава за инстанцу. Овај метод се зове функција конструктора.

Инстанцирање класе је објашњено

Користимо нову кључну реч и име класе за инстанцирање класе у ЈаваСцрипт-у. На пример, хајде да инстанцирамо класу Арраи.

const myArr = new Array()

Креирање класа у ЈаваСцрипт-у

Овај одељак ће расправљати о стварању класе која имплементира све концепте које смо покрили у Одељак за терминологију. То ћемо урадити у низу примера, где се сваки пример надовезује на претходни.

Проглашавање празне класе

Да бисмо прогласили класу у ЈаваСцрипт-у, користимо кључну реч цласс и класи дајемо име. Затим дефинишемо тело класе. Тело је затворено у витичасте заграде и садржи све чланове разреда.

Ево примера декларације класе са празним телом:

class Dog {

}

Сада можете инстанцирати класу на следећи начин и одштампати је.

const pet = new Dog;
console.log(pet);

Стварање јавне својине

Јавна својства су дефинисана идентификатором и опционом вредношћу.

class Dog {
    name = "Roy";
    age;
}

Овде смо дефинисали име са вредношћу низа и узраст без вредности.

const pet = new Dog();

console.log(pet.name);
console.log(pet.age);

Дефинисање јавних метода

Можемо додати методе нашој класи унутар њеног тела. Дефинишемо метод на исти начин на који бисмо дефинисали функцију. Међутим, изостављамо кључну реч функције.

class Dog {
    name = "Roy";
    age;

    walk () {
        console.log("Walking");
    }
}

У горњем примеру дефинисали смо метод ходања. Свака инстанца класе Анимал ће имати тај метод.

const pet = new Dog();
pet.walk();

Приступ својствима из метода

У ЈаваСцрипт-у генерално приступамо својствима објекта помоћу оператора тачке. На пример, ако имамо објекат са именом персон и желимо да приступимо својству наме, урадили бисмо то на следећи начин.

person.name

Међутим, ако желимо да приступимо својству унутар објекта, користимо кључну реч тхис уместо имена објекта. Ево примера:

this.name

Ова кључна реч упућује на објекат. Дакле, ако желимо да приступимо својствима класе из метода класе, користили бисмо ову синтаксу.<проперти_наме>.

Стварање приватне својине

Претпоставимо да желимо да својства имена и старости које смо раније дефинисали буду приватна. Редефинисали бисмо класу на следећи начин:

class Dog {
    #name = "Roy";
    #age;

    walk () {
        console.log("Walking");
    }
}

Као што видите, приватна својства су наведена помоћу знакова фунте. Ако бисте покушали да им приступите, наишли бисте на грешке.

const dog = new Dog();

dog.#name

Креирање Геттер и Сеттер метода

Сада су својства имена и старости класе приватна. Стога им се може приступити само методама унутар класе.

Ако желимо да омогућимо коду изван класе да приступи овим својствима, дефинишемо геттере и сетере. Урадимо то за својство наме.

class Dog {
    #name = "Roy";
    #age;

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    walk () {
        console.log("Walking");
    }
}

Са класом дефинисаном изнад, можете поставити име и приказати га помоћу кода испод:

const pet = new Dog();

// Setting the name
pet.name = "Rex";

// Getting the name
console.log(pet.name);

Креирање приватних метода

Као приватна својства, приватне методе имају префикс са знаком фунте. Стога би декларисање приватне методе изгледало овако:

class Dog {
    #name = "Roy";
    #age;

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

Ако покушате да приступите овим методама изван класе, то не би функционисало.

const pet = new Dog();
pet.#increaseAge();

Креирање методе конструктора

Такође можете дефинисати метод конструктора. Овај метод ће аутоматски бити позван сваки пут када инстанцирате нову класу. Метода конструктора се може користити за иницијализацију својстава. У овом примеру ћемо иницијализовати старост и име на све аргументе које корисник пружи током инстанцирања.

class Dog {
    #name;
    #age;

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

Када инстанцирамо нашу класу, можемо дати име и старост.

const pet = new Dog('Roy', 3);
console.log(pet.name);

Креирање статичких својстава и метода

Као што је поменуто, статичким члановима се може приступити без претходног инстанцирања класе. У доњем примеру ћемо креирати статичко својство и метод.

class Dog {
    #name;
    #age;
    static genus = "Canis";

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

    static bark() {
        console.log("Woof");
    }

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

Сада можете приступити статичком својству и методу без инстанцирања.

console.log(Dog.genus);
Dog.bark();

Наслеђе

Класе могу наследити својства од других класа. Класа која наслеђује чланове друге класе назива се суперкласа, док је класа од које наслеђује чланове основна класа или поткласа.

Да бисмо направили суперкласу у ЈаваСцрипт-у, користимо кључну реч ектендс. Ево примера где наслеђујемо од класе Дог.

class Rottweiler extends Dog {
    constructor (name, age) {
        super(name, age);
        this.breed = 'rottweiler';
    }
}

Као што видите, класа је углавном иста као и раније. Међутим, унутар конструктора смо назвали супер функцију. Кључна реч супер упућује на конструктор основне класе. Стога смо позвали конструктор основне класе унутар наше суперкласе, преносећи име и старост.

const myPet = new Rottweiler();
console.log(myPet);

Закључак

У овом чланку смо покрили часове. Покрили смо шта су они, чланове које могу да имају и различите класификације чланова. Затим смо све ово илустровали примерима.

Затим, можда ћете желети да прочитате питања за интервју за објектно оријентисано програмирање.