O co chodzi?

W Javascript programowanie obiektowe może być zrealizowane przy pomocy różnych składni. Poniżej opiszę cztery sposoby podejścia do tematu.

Należy pamiętać, że w JS nie ma klas, tak jak w innych językach. Możemy symulować klasy przy pomocy funkcji, ale generalnie wszystko jest obiektem.

1. Funkcja

Definiujemy klasę, następnie przy pomocy słowa kluczowego new tworzymy obiekt z atrybutem color = Blue. Wywołanie metody paint powoduje przemalowanie auta na czerwony.


function Car1(color) {
	this.color = color;
	this.paint = function() {
		this.color = 'Red';
	};
}
var Car = new Car1('Blue');
Car.paint();

2. JSON

JavaScript Object Notation jest krótszym sposobem tworzenia obiektów.
Zamiast:


var obj = new Object();
var arr = new Array();

piszemy:


var obj = {};
var arr = [];

Obiekt Car2 jest równocześnie klasą, dlatego od razu po zdefiniowaniu klasy/obiektu, mamy dostęp do wszystkich atrybutów i metod.
Takie podejście realizuje wzorzec projektowy Singleton.


var Car2 = {
	color : null,
	paint: function() {
		this.color = 'Red';
	}
}

W tym samym czasie może być tylko jedna instancja Car2, nawet jeśli przepiszemy ją do zmiennej Car20 nic to nie zmieni.


var Car20 = Car2;
Car2.color = 'Blue';
//Car2.color = 'Blue'
//Car20.color = 'Blue'

Car2.paint();

//Car2.color = 'Red'
//Car20.color = 'Red'

3. Singleton używając funkcji

Trzeci sposób jest kombinacją dwóch pierwszych. Definicja klasy jest podobna jak w pierwszym przykładzie, a sposób użycia dokładnie taki sam jak w drugim. 


var Car3 = new function() {
	this.color = null;
	this.paint = function() {
		this.color = 'Red';
	}
}
Car3.color = 'Blue';
Car3.paint();

4. Przestrzeń nazw

Ostatnia metoda to osadzenie klasy Car oraz metody paint w zdefiniowanej przez nas przestrzeni nazw Bodyshop.
Dzięki temu poruszamy się w jednej globalnej zmiennej Bodyshop, co mniej obciąża pamięć przeglądarki.
Dodatkowo każdy nowo tworzony obiekt odwołuje się w pamięci dokładnie do tej samej metody paint, a nie jej kolejnej kopii.
Jest to więc również realizacja wcześniej wspomnianego Singletona.


window.Bodyshop = {};
Bodyshop.Car = function init(color){
	this.color = color;
}
Bodyshop.Car.prototype.paint = function() {
	this.color = 'Red';
};
var Car4 = new Bodyshop.Car('Blue');
Car4.paint();

Podsumowanie

Osobiście często używam w aplikacjach drugiego z przedstawionych sposobów opartego o JSONa, szczególnie jeśli klasa zarządza zdarzeniami w obrębie jednego widoku.

Natomiast wiele bibliotek JS (jQuery, Prototype, Yahoo!) korzysta z rozwiązania opartego o przestrzeń nazw.

2 Comments
JSON, Javascript, OOP, Programowanie