Jest wiele sposobów na tworzenie obiektów w JS. Każdy ma jakieś wady i zalety. Należy wybrać taki, który nam się najbardziej podoba, i który akurat przy konkretnym zastosowaniu jest najwygodniejszy. W tym artykule pokażę, jak tworzyć w JS obiekty z wykorzystaniem mechanizmu prototypowania.

Język obiektowy bez klas

No tak! Ledwo zacząłeś widzieć korzyści płynące z tworzenia klas i operowaniu na obiektach, a tu Ci ktoś mówi, że nie ma klas w JS:). Ano nie ma. Są za to prototypy. I tak naprawdę to zasada jest bardzo podobna. Zobaczmy kod, bo tak zawsze łatwiej:

view source
print?
1.function MyObject() { } // 1
2.MyObject.prototype.sayHi = function() // 2
3.{
4.    alert("Witaj świecie"); // 3
5.};
6. 
7.var oMyObj = new MyObject(); // 4
8.oMyObj.sayHi() // 5

1. Tworzymy pustą funkcję. Jako,  że w JS wszystko jest obiektem, to funkcja też jest obiektem. Nazwiemy takie "cuś" konstruktorem.
2. Do prototypu obiektu o nazwie MyObject dodajemy metodę `sayHi()', ...
3. ... która po prostu wyświetla "witaj świecie"
4. Tworzymy nowy obiekt. Zauważ, że używamy słówka (fachowo - operatora) `new'. W tym momencie do zmiennej oMyObj zostaje przypisany obiekt stworzony wg wytycznych zawartych w prototypie MyObject. Czyli posiada pusty konstruktor (patrz [1]) oraz metodę `sayHi()' [2]. Konstruktor zostaje wywoływany przy tworzeniu obiektu. Metodę, możemy wyołać sami, co też robimy w [5].
5. Wywołujemy metodę sayHi().

Po wykonaniu tego skryptu w przeglądarce powinnien pojawić się alert z napisem "witaj świecie".

Właściwości prototypu obiektu

Obiekt może mieć właściwości i metody (w uproszczeniu: zmienne = właściwości, funkcje = metody). W językach posiadających klasy właściwości są przypisywane do klasy. W JS można to zrobić na wiele sposobów (porównaj artykuły o dodawaniu metod do istniejących obiektów oraz o rozszerzaniu prototypu obiektu). Stwórzmy zatem taką właściwość, którą będą posiadać wszystkie obiekty tworzone wg prototypu obiektu MyObject:

view source
print?
1.function MyObject() {}
2.MyObject.prototype.sentence = 'Witaj świecie'; // 1
3.MyObject.prototype.sayHi = function()
4.{
5.    alert(this.sentence); // 2
6.};
7.var oMyObj = new MyObject();
8.oMyObj.sayHi();

Nic się nie zmieniło w wyniku, porównując z poprzenim przypadkiem. Jednak w kodzie widzimy dwie zmiamy:

1. Do prototypu obiektu MyObject dodajemy właściwość `sentence' i przypisujemy jej wartość "Witaj świecie".
2. W alercie nie wstawiamy już na sztywno ciągu znaków, a odnosimy się do właściwości `sentence'. Używamy tu operator `this'. Można to przetłumaczyć tak: "jestem obiektem stworzonym wg prototypu `MyObject'. `this' to ja sam. Poszukaj zatem mojej właściwości o nazwie `sentece'". W językach, w których są klasy [np. PHP] także występuje operator $this.

Skoro już wyrzuciliśmy powitalny tekst do zmiennej, to spróbujmy go zmienić :). Najlepiej za pomocą konstruktora. Co on taki pusty ma być :)

Sparametryzowanie konstruktora

view source
print?
01.function MyObject( msg ) // 1
02.{
03.    if (msg) // 2
04.    {
05.        this.sentence = msg; // 3
06.    }
07.}
08. 
09.MyObject.prototype.sentence = 'Witaj świecie'; // 4
10.MyObject.prototype.sayHi = function()
11.{
12.    alert(this.sentence); // 5
13.};
14. 
15.var oMyObj_one = new MyObject(); // 6
16.var oMyObj_two = new MyObject("A ja nie będę taki jak inni"); // 7
17.var oMyObj_three = new MyObject(); // 6
18. 
19.oMyObj_three.sentence = 'Za to ja to już w ogóle jest krejzol'; // 8
20.oMyObj_one.sayHi(); // 9
21.oMyObj_two.sayHi(); // 9
22.oMyObj_three.sayHi(); // 9

Się nam kodu narobiło :). Spokojnie, nie jest tak źle jakby się mogło wydawać. Po kolei:

1. Nasz konstruktor posiada teraz parametr. Czyli tworząc nowy obiekt możemy podać mu jakąś wartość.
2. Ten warunek można przetłumaczyć na: "Jeśli `msg' ma jakąś wartość". Czyli jeśli wywołamy ten konstrukotr bez parametrów (patrz [6]) to nie wejdzie do tego ifa. Czytaj więcej o fasy values.
3. Jeśli podaliśmy jakiś ciąg jako parametr (patrz [7]) to do właściwości `sentence' tego konkretnego obiektu zostanie przypisana nowa wartość i ...
4. ... nadpisze ona domyślną wartość pola `sentece'.
5. W metodzie `sayHi()' wyświetlone zosatnie zdanie podane do konstruktora, lub domyślna wartość jeśli do konstruktora nie podano zdania.
6. Tworzymy obiekty bez parametrów. Czyli w polach `sentece' tych obiektów występuje wartość domyślna.
7. Tworzymy obiekt podając konkretną wartość do konstruktora. W tym obiekcie w polu `sentence' jest wartość "A ja nie będę taki jak inni".
8. Nadpisujemy "ręcznie" wartość właściwości `sentence'.
9. Wywołujemy metodę `sayHi()' wszystkich trzech obiektów.

Ja rzadko używam tego sposobu tworzenia obiektów w JS, mimo, że jest on najbardziej klasopodobny. Staram się raczej wykorzystywać wzorzec modułu.

Pełen kod z dodatkowym bonusem:

Jak sądzisz, co zrobi kod z framentu oznacznonego BONUS? 

Jeśli nie rozumiesz o co chodzi z takim kodem:

To warto przeczytać artykuł o zasięgu zmiennych w JS. Szczególnie część o "Rozsądnym zastosowaniu".