chevron-left chevron-right

[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.

Klasa 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. Metody 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();

  2. Metody 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');
}

  3. Metody 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');
}

Klasa 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();

Podsumowanie

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.