Un ghid complet cu exemple

JavaScript este un limbaj cu mai multe paradigme care vă permite să scrieți programe care urmează stiluri de programare funcționale, orientate pe obiecte și imperative.

Pentru a suporta modele orientate pe obiecte, JavaScript are clase. Deoarece înțelegerea lor este crucială, acest articol este un ghid despre ce sunt clasele JavaScript și cum să le folosești.

Ce sunt clasele în JavaScript?

În programarea orientată pe obiecte, modelăm sistemele ca grupuri de obiecte care interacționează între ele. Pentru a funcționa, obiectele stochează date în proprietăți și efectuează acțiuni definite ca metodele lor. O clasă definește ce proprietăți și metode sunt purtate de obiectele de același tip. Prin urmare, clasele sunt planuri pentru obiecte.

Terminologii utilizate în clase

Pentru a ne asigura că suntem pe aceeași pagină, iată o descriere a claselor cu termenii cheie pe care le vom folosi în acest articol. Dacă sunteți deja familiarizat cu programarea orientată pe obiecte, puteți sări la secțiunea următoare.

❇️ O clasă este un plan pentru un obiect. Acesta oferă un șablon din care pot fi realizate obiecte de acest tip. Crearea unui obiect din șablonul furnizat de clasă se numește instanțiere.

❇️ Un membru al clasei este orice aparține clasei. Există două tipuri de membri ai clasei – metode și proprietăți.

❇️ O proprietate este un membru al clasei al cărui scop principal este stocarea valorilor. Acestea pot fi valori simple, cum ar fi numere și șiruri. Ar putea fi, de asemenea, obiecte și matrice complexe.

❇️ Unele proprietăți sunt accesibile numai în cadrul clasei și sunt denumite în mod adecvat proprietăți private. Unele sunt accesibile atât în ​​cadrul clasei, cât și în afara acesteia. Astfel de proprietăți sunt numite proprietăți publice.

  Cum să remediați opțiunea „Permiteți comenzi rapide nesigure” în gri pe iPhone sau iPad

❇️ O metodă este o funcție definită în interiorul unei clase. Prin urmare, aparține clasei și are acces la proprietăți publice și private. La fel ca și proprietățile, avem și metode publice și metode private.

❇️ Există unele metode pentru a oferi o interfață pentru codul din afara clasei pentru a interacționa cu proprietățile din interiorul clasei. Există două grupuri de metode care fac acest lucru: getters și setters. Getters primesc valori pentru proprietățile clasei, în timp ce setterii stabilesc valorile proprietăților clasei.

❇️ Unii membri sunt statici. Aceasta înseamnă că sunt accesibile numai în clasă și nu pot fi accesate în instanțe de clasă.

În schimb, unii membri ai clasei nu sunt statici, ceea ce înseamnă că pot fi accesați doar pe instanțe de clasă. Trebuie să instanțiați clasa înainte de a putea accesa un membru nestatic.

Când instanțiați o clasă, este apelată o metodă specială pentru a configura proprietăți pentru instanță. Această metodă se numește funcție de constructor.

Instanțierea unei clase explicate

Folosim noul cuvânt cheie și numele clasei pentru a instanția o clasă în JavaScript. De exemplu, să instanțiem clasa Array.

const myArr = new Array()

Crearea de clase în JavaScript

Această secțiune va discuta despre crearea unei clase care implementează toate conceptele pe care le-am acoperit în Sectiunea Terminologie. Vom face acest lucru într-o serie de exemple, în care fiecare exemplu se bazează pe cele precedente.

Declararea unei clase goale

Pentru a declara o clasă în JavaScript, folosim cuvântul cheie class și dăm clasei un nume. În continuare, definim corpul clasei. Corpul este închis în acolade și ține toți membrii clasei.

Iată un exemplu de declarație de clasă cu un corp gol:

class Dog {

}

Acum, puteți instanția clasa după cum urmează și o puteți imprima.

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

Crearea proprietati publice

Proprietățile publice sunt definite cu un identificator și o valoare opțională.

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

Aici, am definit numele cu o valoare șir și vârsta fără valoare.

const pet = new Dog();

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

Definirea metodelor publice

Putem adăuga metode la clasa noastră în interiorul corpului său. Definim o metodă în același mod în care am defini o funcție. Cu toate acestea, omitem cuvântul cheie function.

class Dog {
    name = "Roy";
    age;

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

În exemplul de mai sus, am definit metoda de mers. Fiecare instanță a clasei Animal va avea această metodă.

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

Accesarea proprietăților din Metode

În JavaScript, în general, accesăm proprietățile unui obiect folosind operatorul punct. De exemplu, dacă am avea un obiect numit persoană și am dori să accesăm proprietatea nume, am face asta după cum urmează.

person.name

Totuși, dacă dorim să accesăm o proprietate din interiorul obiectului, folosim cuvântul cheie this în loc de numele obiectului. Iată un exemplu:

this.name

Acest cuvânt cheie face referire la obiect. Deci, dacă am dori să accesăm proprietățile clasei din cadrul metodelor de clasă, am folosi această sintaxă..

  Cum să utilizați Instrumentul Editor în Google Foto pentru web

Crearea proprietăților private

Să presupunem că dorim ca proprietățile de nume și vârstă pe care le-am definit mai devreme să fie private. Am redefini clasa după cum urmează:

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

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

După cum puteți vedea, proprietățile private sunt specificate folosind semne de lire sterline. Dacă încercați să le accesați, veți întâlni erori.

const dog = new Dog();

dog.#name

Crearea metodelor Getter și Setter

Acum, numele și proprietățile de vârstă ale clasei sunt private. Prin urmare, ele pot fi accesate numai prin metode din interiorul clasei.

Dacă vrem să activăm codul din afara clasei pentru a accesa aceste proprietăți, definim getters și setters. Să facem asta pentru proprietatea nume.

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

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

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

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

Cu clasa definită mai sus, puteți seta numele și îl puteți afișa folosind codul de mai jos:

const pet = new Dog();

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

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

Crearea de metode private

Ca și proprietățile private, metodele private sunt prefixate cu semnul lire sterline. Prin urmare, declararea unei metode private ar arăta astfel:

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");
    }
}

Dacă ați încerca să accesați aceste metode din afara clasei, nu ar funcționa.

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

Crearea unei metode de constructor

De asemenea, puteți defini metoda constructorului. Această metodă va fi apelată automat ori de câte ori instanțiați o nouă clasă. Metoda constructorului poate fi folosită pentru a inițializa proprietăți. În acest exemplu, vom inițializa vârsta și numele pe orice argument pe care utilizatorul le oferă în timpul instanțierii.

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");
    }
}

Când instanțiem clasa noastră, putem furniza un nume și o vârstă.

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

Crearea proprietăților și metodelor statice

După cum sa menționat, membrii statici pot fi accesați fără a instanția mai întâi clasa. În exemplul de mai jos, vom crea o proprietate statică și o metodă.

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");
    }
}

Acum, puteți accesa proprietatea statică și metoda fără instanțiere.

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

Moştenire

Clasele pot moșteni proprietăți de la alte clase. O clasă care moștenește membri dintr-o altă clasă se numește superclasă, în timp ce clasa de la care moștenește membri este clasa de bază sau subclasa.

  Cum să remediați opțiunea „Permiteți comenzi rapide nesigure” în gri pe iPhone sau iPad

Pentru a crea o superclasă în JavaScript, folosim cuvântul cheie extins. Iată un exemplu în care moștenim din clasa Dog.

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

După cum puteți vedea, clasa este în mare parte aceeași ca înainte. Cu toate acestea, în interiorul constructorului, am numit funcția super. Cuvântul cheie super face referire la constructorul clasei de bază. Prin urmare, am numit constructorul clasei de bază în interiorul superclasei noastre, trecând în nume și vârstă.

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

Concluzie

În acest articol, am acoperit cursurile. Am acoperit ceea ce sunt, membrii pe care îi pot deține și diferitele clasificări pentru membri. Apoi, am ilustrat toate acestea cu exemple.

Apoi, poate doriți să citiți întrebările interviului de programare orientată pe obiecte.