Uvod do Javascript OOP

Aj napriek rozsirenosti Javascriptu, je slabe povedomie o jeho OOP schopnostiach. V porovnani s inymi objekto orientovanymi jazykmi je tu mnoho rozdielov a preto je cielom kritiky, neporozumenia a nekonecnych debat.

Javascript nema k dispozicii class (ak nehovorime o ES6), namiesto toho pouziva prototype-based programovanie.

Trieda

Triedy Javascript definuje rovnako ako funkcie. V nasledujucom priklade si ukazeme ako definovat triedu Osoba:

function Osoba() { }

Objekt (instancia triedy)

Pre vytvorenie novej instancie triedy pouzivame klucove slovo new. Vytvorme si 2 instancie osoba1 a osoba2, triedy Osoba:

var osoba1 = new Osoba();
var osoba2 = new Osoba();

Konstruktor

Konstruktor je vyvolany v momente vytvorenia instancie. Kedze funkcia, ktora definuje triedu sluzi zaroven aj ako konstruktor, nieje nutne definovat konstruktor samostatne.

Konstruktor sluzi pre nastavenie vlastnosti objektu a pre vyvolanie metod, ktore predpripravia objekt.

function Osoba(meno) {
    this.meno = meno;
}

var osoba1 = new Osoba('Jan');

console.log('Meno osoby je ' + osoba1.meno);

K vlastnostiam objektu vo vnutri triedy pristupujeme cez this, ktory odkazuje na aktualny objekt. Z vonku pristupujeme cez nazovInstancie.vlastnost.

Metody

Pre metody plati rovnaky pristup ako pre vlastnosti, s tym rozdielom, ze su definovane ako funkcie a vyvolavane pridanim zatvoriek (). Metody definujeme cez vlastnost objektu prototype.

function Osoba(meno) {
    this.meno = meno;
}

Osoba.prototype.pozdrav = function() {
    console.log('Ahoj volam sa ' + this.meno);
};

var osoba1 = new Osoba('Jan');

osoba1.pozdrav();

Kedze metody definujeme priradenim funkcie vlastnosti, nezabudnite na konci dat bodkociarku ;.

Nepriradujte premenne cez prototype

Predvolene hodnoty vlastnosti definujte cez konstruktor. Ak definujete vlastnost, ktora nieje primitivnym typom (ako polia a objekty), cez prototype, spravanie vlastnosti bude ine, ako by ste ocakvali:

function Osoba(meno) {
    this.meno = meno;
}

Osoba.prototype.predmety = ['kniha', 'kompas', 'kluc'];

Osoba.prototype.ukazPredmety = function() {
    console.log(this.meno, this.predmety);
};

var osoba1 = new Osoba('Jan');
var osoba2 = new Osoba('Adam');

osoba1.ukazPredmety(); // Jan ["kniha", "kompas", "kluc"] 
osoba2.ukazPredmety(); // Adam ["kniha", "kompas", "kluc"] 

osoba1.predmety.push('mec');

osoba1.ukazPredmety(); // Jan ["kniha", "kompas", "kluc", "mec"] 
osoba2.ukazPredmety(); // Adam ["kniha", "kompas", "kluc", "mec"] 

Dedenie

// definovanie triedy Osoba
function Osoba() {}

Osoba.prototype.povedzAhoj = function() {
    console.log('ahoj');
};

// definovanie triedy Student
function Student() {
    // Vyvolanie rodicovskeho konstruktora
    Osoba.call(this);
}

// dedenie
Student.prototype = Object.create(Osoba.prototype);

// prepiseme metodu povedzAhoj
Student.prototype.povedzAhoj = function() {
    console.log('ahoj, som student');
};

var student = new Student();
student.povedzAhoj(); // ahoj, som student

// overenie dedicnosti
console.log(student instanceof Osoba); // true
console.log(student instanceof Student); // true