Wszystkie wpisy, których autorem jest Norbert Bajzert

Jak tworzyć własne obiekty w JavaScript?

Javascript umożliwia tworzenie własnych obiektów. Początkowo może się wam wydawać, ze jest to nie za bardzo użyteczne (w końcu można większość rzeczy zrobić przy pomocy funkcji itp), ale gdy zaznajomicie się z obiektami na pewno zmienicie zdanie. Przede wszystkim obiekty dają nam ochronę danych. Dziwnie brzmi prawda? Na stronie nie raz tworzyłeś button. Każdy z nich ma np. metodęonclick, właściwość value itp. Nie ma żadnego konfliktu w skrypcie, mimo tego, że obiekty te mają metody i właściwości takie same jak ich „bracia”. Poza tym programowanie obiektowe jest najbardziej bliskie rzeczywistości. Zapraszam do lektury.

Tworzenie pojedynczego obiektu

Aby utworzyć nowy pojedynczy obiekt możemy skorzystamy z poniższej konstrukcji:

1
2
3
4
5
6
7
8
var obiekt_1 = {
    imie: "Marcin",
    wzrost: 184,
    wypisz : function() {
        alert(this.imie)
    }
}

Nasz obiekt już na starcie posiada dwie ustalone właściwości – imie i wzrost, oraz jedną metodę, która wypisuje jego imię. Metoda taka jest zwykłą funkcją utworzoną w konstrukcji obiektu. Dostęp do niej ma tylko ten obiekt. Dzięki temu realizujemy podstawową funkcję obiektowości – dostęp do właściwości i metod ma tylko dany obiekt.
Zwróć uwagę, że każda właściwość i metoda jest od następnej oddzielona przecinkiem (jest on wymagany).

Aby odwołać się do danego obiektu z jego wnętrza stosujemy instrukcję this. Dzięki temu możemy w łatwy sposób wywoływać z wnętrza inne metody danego obiektu lub korzystać z jego właściwości:

1
2
3
4
5
6
7
8
9
10
11
var obiekt_1 = {
    liczba: 100,
    kwadrat : function() {return this.liczba * this.liczba },
    wypisz : function() {
        alert(this.kwadrat())
    }
}
obiekt_1.liczba = 200;
obiekt_1.wypisz();

Gdy nasz obiekt już istnieje, możemy do niego dodawać nowe metody lub właściwości, tak samo jak to robimy normalnie dla obiektu window. Popatrz na kod:

1
2
3
4
5
6
7
8
x = 10;
//jest równoznaczne z
window.x = 10;
pisz = function() {...}
//jest równoznaczne z
window.pisz = function() {...}

Tak naprawdę deklarując zwykłe zmienne globalne i funkcje definiujemy po prostu właściwości i metody dla obiektu window. JS nie wymaga stosowania odwołania do window, więc praktycznie zawsze pomijamy to odwołanie.

Podobnie właściwości i metody możemy deklarować dla nowych obiektów:

1
2
3
4
5
6
7
8
9
10
11
12
13
var obiekt_1 = {
    imie: "Marcin",
    wzrost: 184,
    wypisz : function() {
        alert(this.imie)
    }
}
obiekt_1.waga = 73; //dodaliśmy nową właściwość
obiekt_1.wypisz = function() {alert('Wzrost: '+this.wzrost + ', waga: '+this.waga)} //dodaliśmy nową metodę
obiekt_1.wypisz();//zwróci Wzrost: 184, waga: 73

Opracowanie:  Norbert Bajzert

Źródło: http://kursjs.pl/kurs/obiekty.html