Zabawa w klasy.


1. Wstęp

Jak już w wspominaliśmy w artykule 1.01 Parser kanałów Atom w JavaScript nie istnieje pojęcie klasy, choć istnieją obiekty. Jak zatem powoływać do życia i pracować z obiektami, kiedy nie ma klas. Otóż, jest na to sposób. Z pomocą przychodzi nam zwykła funkcja, której zlecamy rolę konstruktora i ewentualnie funkcja pełniącą rolę prototypu. Konstruktor wykorzystywany jest do tworzenia obiektu, natomiast prototyp (którego wartością początkową jest właściwość: konstruktor) umożliwia dodawanie metod i właściwości, dostępnych dla wszystkich obiektów. Oczywiście, możemy to robić w konstruktorze, wtedy jednak metody i właściwości są za każdym razem kopiowane do nowotworzonego obiektu, co stanowi zwykłe marnotrawstwo pamięci.

Wszystko to prawda, ale nie do końca - w JavaScript istnieje więcej sposobów tworzenia obiektów, np. wykorzystując literał. Cztery najczęściej stosowane to:

  • Tworzenie obiektu za pomocą konstruktora
  • Tworzenie obiektu za pomocą konstruktora z wykorzystaniem prototypu
  • Tworzenie obiektu za pomocą literału z wykorzystaniem JSON
  • Tworzenie obiektu za pomocą wzorca fabryki obiektów

Sposoby te przedstawia poniższy skrypt. Są one na tyle proste, że nie wymagają omówienia.

Listing 1. Tworzenie obiektów w JavaScript.

<script type="text/javascript">
// 1 sposob - za pomoca konstruktora
function Konstruktor_1() {
    this.Metoda_1 = function() {
        document.write("Obiekt utworzony za pomoca konstruktora");
    };
}
// Tworzenie obiektu i wywolanie jego metody
var Obiekt_1 = new Konstruktor_1();
Obiekt_1.Metoda_1();

// 2 sposob - za pomoca konstruktora z wykorzystaniem prototypu
function Konstruktor_2() {
};
Konstruktor_2.prototype.Prototyp_1 = function() {
    document.write("<br />Obiekt utworzony za pomoca konstruktora z wykorzystaniem prototypu");
};
// Tworzenie obiektu i wywolanie jego prototypu
var Obiekt_2 = new Konstruktor_2();
Obiekt_2.Prototyp_1();

// 3 sposob - za pomoca literalu z wykorzystaniem JSON
// Tworzenie obiektu i wywolanie jego metody
var Obiekt_3 = {
    Metoda_1: function() {
        document.write("<br />Obiekt  utworzony za pomoca literalu z wykorzystaniem JSON");
    }
};
Obiekt_3.Metoda_1();

// 4 sposob - za pomoca wzorca fabryki obiektow
function UtworzObiekt()
{
    var NowyObiekt = {};
    // var NowyObiekt = new Object;
    NowyObiekt.Metoda_1 = function() {
        document.write("<br />Obiekt  utworzony za pomoca wzorca fabryki obiektow");
    };
    return NowyObiekt;
};
// Tworzenie obiektu i wywolanie jego metody
var Obiekt_4 = UtworzObiekt();
Obiekt_4.Metoda_1();
</script>

Przykład. Wynik działania skryptu z Listingu 1.

Zapis var NowyObiekt = {}; jest równoważny z var NowyObiekt = new Object;. Pierwszy z nich działa szybciej.

2. Metody i właściwości obiektów

Po utworzeniu obiektów chcielibyśmy mieć nieograniczony dostęp do ich metod i właściwości. Poniższy skrypt nie ma wprawdzie żadnego zastosowania praktycznego, przedstawia jednak w jaki sposób wywoływać metody obiektów, przekazywać im argumenty, uzyskiwać dostęp do właściwości obiektów i zmieniać wartości tych właściwości.

Listing 2. Dostęp do metod i właściwości obiektów w JavaScript.

<script type="text/javascript">
// 1 sposob - za pomoca konstruktora
function Konstruktor_01(Argument_01) {
    this.Wlasciwosc_01 = Argument_01;
    this.Metoda_01 = function() {
        document.write(this.Wlasciwosc_01 + "<br />");
    };
    this.Metoda_02 = function(Argument_02) {
        this.Wlasciwosc_02 = Argument_02;
        document.write(this.Wlasciwosc_02 + "<br />");
    };
    this.Metoda_03 = function() {
        document.write(this.Wlasciwosc_02 + "<br />");
    };
    this.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora - Tekst 3A";
    this.Metoda_04 = function() {
        document.write(this.Wlasciwosc_03 + "<br />");
    };
}
// Tworzenie oraz dostęp do metod i wlasciwosci obiektu
var Obiekt_01 = new Konstruktor_01("Obiekt utworzony za pomocą konstruktora - Tekst 1A");
Obiekt_01.Metoda_01();
Obiekt_01.Wlasciwosc_01 = "Obiekt utworzony za pomocą konstruktora - Tekst 1A zmieniony na 1B";
Obiekt_01.Metoda_01();
Obiekt_01.Metoda_02("Obiekt utworzony za pomocą konstruktora - Tekst 2A");
Obiekt_01.Wlasciwosc_02 = "Obiekt utworzony za pomocą konstruktora - Tekst 2A zmieniony na 2B";
Obiekt_01.Metoda_03();
Obiekt_01.Metoda_04();
Obiekt_01.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora - Tekst 3A zmieniony na 3B";
Obiekt_01.Metoda_04();

// 2 sposob - za pomoca konstruktora z wykorzystaniem prototypu
function Konstruktor_02(Argument_01) {
    this.Wlasciwosc_01 = Argument_01;
    // this.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 3A";
};
Konstruktor_02.prototype.Prototyp_1 = function() {
    this.Metoda_01 = function() {
        document.write(this.Wlasciwosc_01 + "<br />");
    };
    this.Metoda_02 = function(Argument_02) {
        this.Wlasciwosc_02 = Argument_02;
        document.write(this.Wlasciwosc_02 + "<br />");
    };
    this.Metoda_03 = function() {
        document.write(this.Wlasciwosc_02 + "<br />");
    };
    this.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 3A";
    this.Metoda_04 = function() {
        document.write(this.Wlasciwosc_03 + "<br />");
    };
};
// Tworzenie oraz dostęp do metod i wlasciwosci obiektu
var Obiekt_02 = new Konstruktor_02("Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 1A");
Obiekt_02.Prototyp_1();
Obiekt_02.Metoda_01();
Obiekt_02.Wlasciwosc_01 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 1A zmieniony na 1B";
Obiekt_02.Metoda_01();
Obiekt_02.Metoda_02("Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 2");
Obiekt_02.Wlasciwosc_02 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 2A zmieniony na 2B";
Obiekt_02.Metoda_03();
Obiekt_02.Metoda_04();
Obiekt_02.Wlasciwosc_03 = "Obiekt utworzony za pomocą konstruktora z wykorzystaniem prototypu - Tekst 3A zmieniony na 3B";
Obiekt_02.Metoda_04();

// 3 sposob - za pomoca literalu z wykorzystaniem JSON
var Obiekt_03 = {
    Metoda_01: function(Argument_01) {
        this.Wlasciwosc_02 = Argument_01;
        document.write(this.Wlasciwosc_01 + "<br />");
    },
    Metoda_02: function() {
        document.write(this.Wlasciwosc_01 + "<br />");
    },
    Metoda_03: function() {
        document.write(this.Wlasciwosc_02 + "<br />");
    },
    Wlasciwosc_03: "Obiekt  utworzony za pomocą literału z wykorzystaniem JSON - Tekst 3A",
    Metoda_04: function() {
        document.write(this.Wlasciwosc_03 + "<br />");
    }
};
// Tworzenie oraz dostęp do metod i wlasciwosci obiektu
Obiekt_03.Wlasciwosc_01 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 1A";
Obiekt_03.Metoda_01();
Obiekt_03.Wlasciwosc_01 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 1A zmieniony na 1B";
Obiekt_03.Metoda_02();
Obiekt_03.Wlasciwosc_02 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 2A";
Obiekt_03.Metoda_03();
Obiekt_03.Wlasciwosc_02 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 2A zmieniony na 2B";
Obiekt_03.Metoda_03();
Obiekt_03.Metoda_04();
Obiekt_03.Wlasciwosc_03 = "Obiekt utworzony za pomocą literału z wykorzystaniem JSON - Tekst 3A zmieniony na 3B";
Obiekt_03.Metoda_04();

// 4 sposob - za pomoca wzorca fabryki obiektow
function UtworzObiekt_01()
{
    var NowyObiekt = {};
    NowyObiekt.Metoda_01 = function() {
        document.write(this.Wlasciwosc_01 + "<br />");
    };
    NowyObiekt.Metoda_02 = function(Argument_01) {
        NowyObiekt.Wlasciwosc_02 = Argument_01;
        // lub
        // this.Wlasciwosc_02 = Argument_01;
        document.write(this.Wlasciwosc_02 + "<br />");
    };
    NowyObiekt.Metoda_03 = function() {
        document.write(this.Wlasciwosc_02 + "<br />");
    };
    NowyObiekt.Wlasciwosc_03 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 3A";
    NowyObiekt.Metoda_04 = function() {
        document.write(this.Wlasciwosc_03 + "<br />");
    };
    return NowyObiekt;
};
// Tworzenie oraz dostęp do metod i wlasciwosci obiektu
var Obiekt_04 = UtworzObiekt_01();
Obiekt_04.Wlasciwosc_01 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 1A";
Obiekt_04.Metoda_01();
Obiekt_04.Wlasciwosc_01 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 1A zmieniony na 1B";
Obiekt_04.Metoda_01();
Obiekt_04.Metoda_02("Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 2A");
Obiekt_04.Wlasciwosc_02 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 2A zmieniony na 2B";
Obiekt_04.Metoda_03();
Obiekt_04.Metoda_04();
Obiekt_04.Wlasciwosc_03 = "Obiekt utworzony za pomocą wzorca fabryki obiektów - Tekst 3A zmieniony na 3B";
Obiekt_04.Metoda_04();
</script>

Przykład. Wynik działania skryptu z Listingu 2.

3. Obiekty w obiektach

Rozdział w przygotowaniu...

4. Dziedziczenie

Rozdział w przygotowaniu...

Ireneusz Sekuła, JavaScript dla zielonych