[JS] Obiektowe podejście do JavaScript. Jak stworzyć klasę?

Tematem dzisiejszego artykułu będzie tworzenie klas za pomocą języka JavaScript. Dla wielu może to brzmieć dziwnie z racji popularności biblioteki jQuery, gdzie używa się jej w sposób zupełnie bezklasowy.
Należy jednak uściślić, że w JS klasami są funkcje będące obiektami. Brzmi skomplikowanie?
Po przeczytaniu tego wpisu mam nadzieję, że wszystko będzie nieco jaśniejsze.

Klasy w JS można definiować na kilka różnych sposobów. Każdy z nich ma swoje zalety i wady.

Sekcja 1Klasa jako funkcja

Jest to najpopularniejszy sposób tworzenia klas, zbliżony wyglądem do tradycyjnych klas w językach obiektowych takich jak: PHP czy C++. Tworzenie klas jako funkcji można rozdzielić na 3 podejścia:

1. Sekcja 1.1Metody klasy są utworzone wewnątrz klasy

   Jest to bardzo popularny sposób definiowania klas. Dzięki temu uzyskujemy strukturę kodu charakterystyczną dla klasycznych klas w programowaniu obiektowym. Nowy obiekt klasy jest wywoływany za pomocą operatora new.

   1 2 3 4 5 6 7 8 9 10

   function Osoba(imie,wiek) { this.imie = imie; this.wiek = wiek; this.pokazInfo = function() { window.alert(this.imie+' ma '+this.wiek+' lat'); } }   var jacek = new Osoba('Jacek',39); jacek.pokazInfo();

   function Osoba(imie,wiek) { this.imie = imie; this.wiek = wiek; this.pokazInfo = function() { window.alert(this.imie+' ma '+this.wiek+' lat'); } } var jacek = new Osoba('Jacek',39); jacek.pokazInfo();

2. Sekcja 1.2Metody klasy są przypisane do zewnętrznych funkcji

   To podejście pozwala na zdefiniowanie funkcji na zewnątrz klasy. Dzięki temu różne klasy mogą korzystać z tych samych metod jeśli zaistnieje taka potrzeba. Jest to przykład antywzorca.

   1 2 3 4 5 6 7 8 9

   function Osoba(imie,wiek) { this.imie = imie; this.wiek = wiek; this.pokazInfo = getItemInfo; }   function getItemInfo() { window.alert(this.imie+' ma '+this.wiek+' lat'); }

   function Osoba(imie,wiek) { this.imie = imie; this.wiek = wiek; this.pokazInfo = getItemInfo; } function getItemInfo() { window.alert(this.imie+' ma '+this.wiek+' lat'); }

3. Sekcja 1.3Metody klasy są utworzone w prototypie klasy

   Przykład pierwszy pokazał, że można tworzyć klasy ze zdefiniowanymi metodami wewnątrz ciała obiektu. Jest to rozwiązanie wygodne, ale dość kosztowne jeśli chodzi o zarządzanie pamięcią. Dlatego pewnego rodzaju wyjściem może być korzystanie z prototypów klas.

   1 2 3 4 5 6 7 8

   function Osoba(imie,wiek) { this.imie = imie; this.wiek = wiek; }   Osoba.prototype.pokazInfo = function() { window.alert(this.imie+' ma '+this.wiek+' lat'); }

   function Osoba(imie,wiek) { this.imie = imie; this.wiek = wiek; } Osoba.prototype.pokazInfo = function() { window.alert(this.imie+' ma '+this.wiek+' lat'); }

Sekcja 2Klasa jako obiekt typu singleton

W tym przypadku tworzymy obiekt Javascript bezpośrednio. Funkcjonalność takiej klasy będzie identyczna z tymi zaprezentowanymi wcześniej. Jedyne co się zmieni to fakt, że klasa staje się też obiektem na którym można dokonywać działań i nie można tworzyć wielu obiektów z tej samej klasy. Dlatego jest mowa o wzorcu singleton. Który dba o to, aby nie było więcej niż jeden obiekt danej klasy jednocześnie.

1
2
3
4
5
6
7
8
9
10

var osoba = {
	imie: 'Jacek',
	wiek: 39,
	pokazInfo: function() {
		window.alert(this.imie+' ma '+this.wiek+' lat');
	}
}
 
osoba.imie = 'Placek';
osoba.pokazInfo();

Sekcja 3Podsumowanie

Dzięki stosowaniu klas uzyskujemy odpowiednią przejrzystość kodu, co gwarantuje, że wszystkie wystąpienia klas będą się zachowywały podobnie niezależnie od zmian w metodach klasy. Dodając do tego możliwości biblioteki jQuery i chociażby Canvas API można się pokusić o naprawdę interesujące efekty obiektowego programowania/skryptowania.

Mam nadzieję, że ten artykuł okaże się pomocny i pozwoli Ci rozwinąć swoje umiejętności w projektowaniu aplikacji internetowych.