Przydatne triki w JavaScript #1

JavaScript w wersji 1.8 to kawałek bardzo fajnych i użytecznych funkcji oraz konstrukcji. Niestety, nim wszystkie przeglądarki zaczną obsługiwać tę wersję języka, minie spory kawałek czasu. Powszechnie używana wersja 1.5 na szczęście także potrafi pokazać pazurki.

(5).plus(1).minus(2) = 4

Jedną z zalet JS jest możliwość używania podobnych, dzięki łatwej implementacji tzw. chainingu, czyli łączenia łańcuchów kodu. Jak coś podobnego zrobić?

Zaczynamy od interpretacji działania takiej linijki kodu. Wszystko zaczyna się od liczby 5 zapisanej w nawiasie. Jest to dla nas sygnał, że liczba 5 musi być obiektem, ponieważ inaczej niemożliwe byłoby wykonywanie nań żadnych funkcji. Jakiego typu obiektem jest ta liczba możemy sprawdzić dzięki typeof.

alert(typeof 5);

Powyższa linijka zwróci nam dumnie brzmiące słowo number. Nie trzeba dużej bystrości by stwierdzić, że do czynienia mamy z obiektem reprezentującym liczbę.

Próba wywołania na tym obiekcie funkcji plus() bądź minus() kończy się jednak niepowodzeniem – JS nie potrafi odnaleźć takich funkcji, które byłyby użyte w kontekście obiektu number. Ergo, nie posiada on takich metod/funkcji. JavaScript jest jednak na tyle elastyczny, że udostępnia stosowne narzędzia, które pomagają nam uzupełnić obiekt o jakie tylko zapragniemy funkcje. Jest to właściwość prototype, używana tak:

obiekt.prototype.nazwa_nowej_funkcji = function() {};

Po tym zabiegu obiekt będzie posiadał w swoim asortymencie funkcję o nazwie nazwa_nowej_funkcji:

obiekt.nazwa_nowej_funkcji();

Pora teraz wykorzystać to w kontekście obiektu number. Zaimplementujmy więc funkcję plus:

number.prototype.plus = function(i) { return parseInt(this+i); };

Przetestujmy teraz co nieco:

var liczba = (5).plus(5); alert(liczba);

Nie działa… Przyczyna jest prosta – istnieje tylko obiekt Number, a nie number. Wszystko przez typeof, które zwraca nazwy typów obiektów pisane małymi literami. Poprawmy więc, co trzeba:

Number.prototype.plus = function(i) { return parseInt(this+i); };

Teraz podany przykład działa w najlepsze.

Czas na dodanie funkcji minus:

Number.prototype.minus = function(i) { return parseInt(this-i); };

I przetestowanie przykładu z nagłówka:

var liczba = (5).plus(1).minus(2); alert(liczba);

Powinna pojawić się liczba 4.

Zastanówmy się teraz spokojnie jak to wszystko działa. Otóż najpierw JS szuka wewnątrz obiektu Number funkcji plus. Gdy się to stanie, funkcja plus wykonuje się, zwracając liczbę będącą równowartością sumy this i liczby podanej w argumencie funkcji (jeden). Jako że 5 to liczba, jak i obiekt, na którym wykonujemy funkcję plus, this odnosi się właśnie do jego wartości (5). Funkcja minus wykonywana jest podobnie – tyle że w this, zamiast pięć, mamy teraz sześć, bo minus() odnosi się do obiektu, w kontekście którego jest wykonywana (to, co jest przed kropką oddzielającą funkcję minus od reszty, gwoli ścisłości).

dodaj(2)(3)

Coś takiego jest dość proste do zrobienia, wystarczy trochę pomyśleć. Przecież aby można było podstawić drugi nawias (3) do dodaj(2), dodaj(2) musi być funkcją. Tylko funkcje można uruchamiać w takim zapisie: nazwafunkcji(argument). dodaj(2) musi być więc funkcją, co znaczy nie więcej, jak to, że musi zwracać w swoim ciele … inną funkcję. Coś w ten deseń:

function funkcja() { return function() {}; }

Funkcja, zwracająca anonimową funkcję. Zastosujmy to teraz do naszego przykładu:

function dodaj() { return function(){}; }

No dobra, ale co dalej? Jak widać, funkcja dodaj musi przyjąć jako argument dowolną liczbę, a potem, podstawić ją do funkcji, którą zwraca, by tam dodać ją do argumentu, który przyjmuje z kolei zwracana, anonimowa funkcja.

function dodaj(i) { return function(i2) { return parseInt(i+i2); }; }

parseInt sprawia, że niezależnie jakie wartości byśmy podstawili, JS postara się zawsze powstałą sumę przekonwertować na obiekt typu Number.