Code Carrots

Programowanie obiektowe

Obiekty, konstruktory, prototypy - część druga

Prowadzący: Michał Matulka

Prototyp

function Piesek() {
}

console.log(Piesek.prototype);

Własności w prototypach

Piesek.prototype.rasa = 'kundelek';
console.log(mojPiesek.rasa);

Dlaczego metody w prototypach?

Zadanie 2

1. Stwórz nowy konstruktor "UserView", którego argumentem będzie instancja User
2. W konstruktorze UserView wygeneruj element li, zawierający obrazek z awatarem użytkownika, oraz jego adres e-mail umieszczony jako link z protokołem "mailto:" (nadaj tym elementom jakieś ładne style :) ). Przypisz element dom oraz obiekt User jako własności tworzonego obiektu.
3. W prototypie UserView utwórz metodę refresh odświeżającą dane użytkownika w elemencie dom.

Właśnie utworzyliśmy namiastkę wzorca MVVM :)

Zadanie 3

Rozszerz standardową tablicę JavaScript o metodę sum(), która zwróci wynik dodawania wszystkich elementów tablicy.

Metoda .apply()

function Piesek(imiePieska, kolorObrozy) {
    this.imiePieska = imiePieska;
    this.kolorObrozy = kolorObrozy;
}

function Kotek() {
}

var mojKotek = new Kotek();
Piesek.apply(mojKotek, ['Azor', 'czerwona']);
console.log(mojKotek);

Metoda Object.create

function Zwierzatko(imieZwierzatka) {
    this.imieZwierzatka = imieZwierzatka;
}

Zwierzatko.prototype.jedz = function (coJesc) {
    console.log(this.imieZwierzatka + ' je ' + coJesc;
};

function Piesek(imieZwierzatka, kolorObrozy) {
    this.kolorObrozy = kolorObrozy;
    Zwierzatko.apply(this, [imieZwierzatka]);
}

Piesek.prototype = Object.create(Zwierzatko.prototype);
Piesek.prototype.constructor = Zwierzatko;

var azorek = new Piesek('Azor', 'czerwona');
azorek.jedz('miencho');

Zadanie 4

Utwórz konstruktor Admin, skorzystaj ze wzorca klasycznego dziedziczenia i spraw, aby wszystkie obiekty Admin dziedziczyły po User.