Blogasek by Piotrek Reinmar Koszuliński

Opublikowane na licencji CC przez Trufflepig.

W poprzednim artykule o obiektach w JavaScriptcie poruszyłem kwestię ich tworzenia, dostępu do właściwości, kontekstu wywoływania metod oraz wspomniałem o kilku cechach. Czyste literały obiektów same w sobie są już w tym języku bardzo przydatne — przekonał się pewnie o tym każdy kto korzystał z jakiejś biblioteki typu MooTools czy Prototype. Pozwalają na przykład w dość wygodny sposób na podanie dowolnej liczby nazwanych argumentów funkcji:

new Ajax.Request('/your/url', {
	parameters: { id: 12, action: 'sth' },
	onSuccess: function (transport) {
		alert(transport.responseText);
	},
	evalJS: false
});

Pisałem ostatnio o tym, że w JavaScriptcie nie ma klas. Skąd więc w przykładzie słówko kluczowe new, które w typowym języku służy do tworzenia instancji obiektu na bazie jakiejś klasy? Otóż okazuje się, że w JavaScriptcie wprowadzono twór zwany konstruktorami obiektów.

Konstruktor obiektu

Zwyczajnie zaczyna się od definiowania klasy jakiegoś kotka, samochodu, czy figury geometrycznej. Nudy. Chciałem wymyślić coś bardziej konstruktywnego i spośród wszystkich dostępnych na moim biurku obiektów wybrałem butelkę po miodzie pitnym (pustą niestety). Myślę, że konstruktory dla napoju alkoholowego i butelki będą wystarczająco oryginalne :). Do dzieła:

var Alkohol = function (nazwa, ilosc_procentow, kolor) {
	this.nazwa = nazwa;
	this.ilosc_procentow = ilosc_procentow;
	this.kolor = kolor;
};
var ButelkaAlkoholu = function (alkohol, pojemnosc, rok_produkcji, kraj_produkcji) {
	this.alkohol = alkohol;    
	this.pojemnosc = pojemnosc;
	this.rok_produkcji = rok_produkcji;
	this.kraj_produkcji = kraj_produkcji;
};

Oj tak. JavaScript to dziwoląg. Miały być konstruktory obiektów, a tu znowu pojawiły się funkcje. Z drugiej strony pojawiło się też słowo kluczowe this, więc cały przykład przypomina dwa wycięte z definicji klas napisanych w normalnym języku konstruktory. Na szczęście obiekty tworzymy już normalnie:

var miod = new Alkohol('Miód pitny', 13, '#850');
var butelka_miodu = new ButelkaAlkoholu(miod, 750, 2009, 'Polska');
 
console.dir(miod); // -> screenshot poniżej
console.dir(butelka_miodu); // -> screenshot poniżej
 
butelka_miodu.alkohol.nazwa; // -> "Miód pitny"

Utworzyliśmy w ten sposób dwa obiekty, których struktura została wylistowana przy pomocy Firebuga i którą przedstawiłem na screenie.

W poprzedniej części artykułu pisałem o tym, że obiekt może mieć swoje metody (inaczej funkcje przypisane jako właściwości obiektu). Musi więc być sposób aby w konstruktorze obiektu zdefiniować takie metody. Dodajmy więc kilka linii do konstruktora ButelkaAlkohol:

var ButelkaAlkoholu = function (alkohol, pojemnosc, rok_produkcji, kraj_produkcji) {
	//...
	this.pelna = true;
	this.oproznij = function () {
		this.pelna = false;
	};
};
 
var butelka_miodu = new ButelkaAlkoholu(miod, 750, 2009, 'Polska');
butelka_miodu.pelna; // -> true
butelka_miodu.oproznij();
butelka_miodu.pelna; // -> false

Jak widać, aby utworzyć coś co możemy nazwać metodą, musimy przypisać funkcję do właściwości przyszłego obiektu. Uczulam znowu na działanie słowa this, o czym pisałem już poprzednim razem.

Alternatywna metoda tworzenia konstruktorów obiektów

Naszym celem jest utworzenie obiektu o zadanych przez nas wartościach właściwości. Pamiętając, że najprostszym sposobem na utworzenie obiektu jest skorzystanie z literału możemy dojść do następującej konstrukcji: stwórzmy funkcję zwracającją obiekt zapisany za pomocą literału:

var Alkohol2 = function (nazwa, ilosc_procentow, kolor) {
	var obj = {
		nazwa: nazwa,
		ilosc_procentow: ilosc_procentow,
		kolor: kolor,
		pelna: true,
		oproznij: function () { this.pelna = false; }
	};
 
	return obj;
};
 
var piwo = Alkohol2('piwo Tyskie', 5.6, '#FE3');
piwo; // -> Object nazwa=piwo Tyskie ilosc_procentow=5.6 kolor=#FE3

Tak więc skorzystaliśmy z funkcji w jej czysto funkcyjnym wymiarze. To jednak nie koniec. Dawno już nie było mowy o żadnym JavaScriptowym dziwactwie. Pora na następne. Otóż ten zapis również zadziała:

var piwo2 = new Alkohol2('piwo Tyskie', 5.6, '#FE3');
piwo2; // -> Object nazwa=piwo Tyskie ilosc_procentow=5.6 kolor=#FE3

Zonk.

Anegdota o użyciu new z funkcją

Kiedy dowiedziałem się o powyższym od razu zacząłem się zastanawiać jak w zasadzie JavaScript traktuje new w kontekście funkcji. Pierwsze co ciśnie się na palce, to modyfikacja przykładu z konstruktorem Alkohol2 tak by zwracał "nieobiekt":

var Cons = function () {
	return 5;
};
var obj = new Cons();
obj; // -> Object

Nic ciekawego — jakiś pusty obiekt otrzymaliśmy. Dodajmy więc właściwość (pierwszy sposób tworzenia konstruktorów):

var Cons = function () {
	this.a = 'a';
	return 5;
};
var obj = new Cons();
obj; // -> Object a=a

Ciekawe, choć do wytłumaczenia — return 5 jest pomijane. Połączmy teraz dwa sposoby tworzenia konstruktorów:

var Cons = function () {
	this.a = 'a';
	return { b: 'b' };
};
var obj = new Cons();
obj; // -> Object b=b

Uups. JavaScript pomija właściwości zadeklarowane przy użyciu słowa this. W ten sposób dochodzimy do algorytmu, którym kieruje się ten język (a przynajmniej Firefox — może komuś się chce zajrzeć do specyfikacji? :):

1. Jeśli zwracana przez funkcję wartość jest obiektem, to wyrażenie new Cons() zwraca ten obiekt.
2. W przeciwnym wypadku wyrażenie to zwraca obiekt z właściwościami ustalonymi przy pomocy słowa this.

Porównując obydwa sposoby pisania konstruktorów można dojść do wniosku, że lepsza jest ta druga, (ze zwracaniem gotowego obiektu), ponieważ działa na obydwa sposoby: new Cons() i Cons(). Osobiście uważam jednak, że ta metoda jest gorsza — dlaczego? O tym później w tej i w następnej części artykułu.

Elementy programowania obiektowego

Umiemy już tworzyć konstruktory obiektów, które można porównać do klas w zwyczajnym języku. Obiekty tworzone za ich pomocą posiadały do tej pory jednak tylko publiczne właściwości i metody. JavaScript nie udostępnia mechanizmu modyfikatorów dostępu, można jednak skorzystać z jego cech aby oprogramować w prosty sposób podobne konstrukcje.

Właściwości prywatne

var Cons = function () {
    var private = 'jestem prywatna';
    this.getPrivate = function () { return private; };
};
 
var obj = new Cons();
obj.getPrivate(); // -> "jestem prywatna"
obj.private; // -> undefined

Dlaczego to działa? Wszystko opiera się o kolejny dziwoląg, czyli JavaScriptowego scope'a, a także o closures (BTW. fajne tematy na kolejne artykuły). W skrócie — funkcja zadeklarowana w innej funkcji ma dostęp do zmiennych dostępnych w swoim "rodzicu". Do tego mechanizm domknięć powoduje, że funkcja getPrivate "zapamiętuje" środowisko, w którym została zadeklarowana.

Właściwości statyczne

var Cons = function () {
    this.nonstatic = 'nie jestem statyczna';
};
Cons.static = 'jestem statyczna';
 
Cons.static; // -> "jestem statyczna"
Cons.nonstatic; // -> undefined

Chyba nic nie trzeba wyjaśniać. Konstruktor Cons jak każda funkcja jest obiektem, więc można dodawać mu właściwości, co robimy w czwartej linii.

Dla jasności dodam, że w identyczny sposób tworzymy prywatne i statyczne metody obiektów i klas.

Dostęp z obiektu do konstruktora

Każdy obiekt posiada właściwość constructor, która daje dostęp do konstruktora (porównywalne do Javowego Object.getClass()):

var Cons = function () {
    this.sth = 'sth';
};
 
var obj = new Cons();
obj.constructor; // -> function()
obj.constructor.toString(); // -> "function () { this.sth = "sth"; }"

A teraz niespodzianka. Dlaczego drugi sposób tworzenia konstruktorów (przez literał obiektu) uważam za gorszy? O to jeden z powodów:

var Cons2 = function () {
    return { sth: 'sth' };
};
var obj2 = Cons2();
var obj3 = new Cons2();
 
obj2.constructor; // -> Object()
obj3.constructor; // -> Object()
obj2.constructor.toString(); // -> "function Object() { [native code] }"
obj3.constructor.toString(); // -> "function Object() { [native code] }"

Zdefiniowaliśmy konstruktor, który teoretycznie działa jak ten z poprzedniego przykładu (zwraca obiekt o tej samej właściwości). Okazuje się jednak, że kiedy spróbujemy dostać się do konstruktora tego obiektu, to nie jest nim funkcja Cons2, a zwykła, natywna Object. Dla porównania:

({}).constructor.toString(); // -> "function Object() { [native code] }"

Co dalej?

Umiemy już posługiwać się obiektami. Umiemy też tworzyć ich konstruktory. Pora więc na dziedziczenie. O tym za czas jakiś w następnej części :)

Opublikowane na licencji CC przez Roberta Thomsona.

Tytułem tym chciałem nawiązać do ubiegłotygodniowego wpisu Dlaczego frameworki CSS ssą?. Niech tradycją się stanie, że kiedy używam słowa "ssać" to chcę coś nieobiektywnie pojechać. Piszę "nieobiektywnie", żeby mnie ktoś znowu nie próbował przekonać, że wpis ten w mych oczach miał pretendować do bycia obiektywnym. Nie — to jest blog i publikuję tu moje odczucia, a nie badania naukowe (które notabene, po wpadce klimatologów, wiemy już jak są prowadzone).

Wpis ten zacząłem pisać wczoraj wieczorem, jeszcze zanim miałem okazję przeżyć dzisiejsze przygody (które wymieniam na liście). Tak więc czara goryczy przelała się już wcześniej, a to co stało się dzisiaj tylko mnie przekonało, że bardzo chcę opublikować ten tekst.

Żeby było jasne — iPhone (wersja 3G) jest oryginalny, zakupiony w Erze półtora roku temu, nigdy nie jailbrake'owany, nigdy nie przytrafiło mu się też nic strasznego. Windows do którego go podłączam włączany jest tylko w celu synchronizacji telefonu z iTunesem, bądź odpalenia kilku gier (kupionych w sklepie, nie ściąganych). Można więc przyjąć, że jest w miarę czysty.

Co przydarzyło mi się dzisiaj:

• dwukrotnie miałem już następującą sytuację — iPhone staje się trochę niestabilny (coś tam pada, coś tam laguje), postanawiam więc go wyłączyć i włączyć — wiadomo, że czasami dobrze jest odśmiecić pamięć. Wyłączam iPhone'a, włączam... nie — nie włączam — słodki ekran z jabłuszkiem zawisa na czas nieskończony (ostatnio jak zawisł mi przed seansem w kinie, to po seansie nadal się włączał). Wtedy trzeba pokombinować jakoś żeby go na twardo zresetować, ale stop — nie da się do cholery wyciągnąć baterii. Wciskam więc wszystkie jego dwa klawisze i za którymś razem (żeby nie było zbyt prosto — kilka razy mogę dusić te przyciski po kilka minut i nie ma reakcji) udaje mi się go wyłączyć. Ponowna próba włączenia kończy się sukcesem, o ile sukcesem można nazwać stan, w którym przestają działać wszystkie doinstalowane aplikacje i wymagana jest synchronizacja z iTunesem,
• tak jak pisałem — sytuacja ta przytrafiła mi się dwukrotnie. Za pierwszym razem udało mi się przy pomocy iTunesa przywrócić słuchawkę do normalnego stanu. Dzisiaj jednak czterokrotnie już zawiesił mi się iTunes, wgrywanie nowego softu na telefon zostało przerwane, później synchronizacja, później nie udało mi się w 100% przywrócić iPhone'a z kopii zapasowej (to po kiego grzyba ta urocza, trwająca wieki synchronizacja przy każdym podłączeniu do komputera?). W skrócie — telefon po kilku godzinach działa, ale nie mogę wgrać na niego muzyki, bo po 3 minutach od podłączenia i rozpoczęcia synchronizacji iTunes nagle stwierdza, że jednak dzisiaj nie ma na nią siły i bez jakiegokolwiek komunikatu kończy (nie powiadamiając o tym iPhone'a) synchronizację,

To wszystko zabolało mnie jednak w głównej mierze dzisiaj. Poprzednia akcja ze zwiechą podczas włączania telefonu zakończyła się udaną synchronizacją i przywróceniem akceptowalnego stanu. Tak więc co natchnęło mnie wczoraj do rozpoczęcia pisania tego wpisu?

• ten sprzęt jest niemożliwie, czasami aż do bólu groteskowo wolny,
• na początek, przez pierwszy rok (to tak jak w małżeństwie ;), było naprawdę spoko — nie miałem telefonowi nic do zarzucenia. Jednak po każdym upgradzie softu system staje się wolniejszy. Najgorzej było kiedy dziadek Dżobs postanowił wypuścić iPhone'a 3GS — wtedy odczułem bardzo duży spadek wydajności. Jeśli dziadunio myśli, że nakłoni mnie tym do kupienia jego młodszego dziecka, to grubo się myli — nie cierpię takiego cwaniactwa,
• wyciszenie iPhone'a czasami trwa ponad 4s — mam na myśli czas od zmiany ustawienia suwaka do jakiejkolwiek reakcji telefonu (wibracja, ekran),
• odblokowanie iPhone'a (takie codzienne — z trybu uśpienia) czasami trwa ponad 10s — najpierw trzeba poczekać aż pojawi się suwak, później aż zareaguje na ruch palca, później pojawia się klawiatura, która też potrzebuje czasu żeby sobie przypomnieć, że jest klikalna, a na koniec ikonki, które muszą sobie wyskoczyć z wszystkich rogów ekranu, zamiast po ludzku się pokazać,
• włączenie smsów, książki kontaktowej, ostatnich telefonów, czy listy alarmów... nawet nie chce mi się myśleć ile to potrafi zabrać czasu, ale i tak wielcy jabłkowi programiści "zoptymalizowali" te programy, bo było gorzej,
• iPhone lubi sobie co jakiś czas (tak raz na miesiąc) zgubić sieć — czasem podczas rozmowy, czasem podczas stanu uśpienia,
• czasem ten stan zgubienia sieci zamienia się w stan niemożliwości dodzwonienia się do mnie i zadzwonienia ode mnie (operator się buntuje) przez dłuższy czas,
• paczka z iTunesem ma 90MB. Co oni tam za przeproszeniem ładują? Zestaw animowanych emotek w formacie 128px na 128px na każdą porę dnia i nocy?,
• Synchronizacja trwa pół godziny (fakt faktem, że robię ją rzadko),
• iTunes jest niestabilny, nieużyteczny, ekstremalnie powolny, zasobożerny (wolę słuchać muzyki z Youtube'a — mniej ciągnie z proca) i nie rozumie oggów. Na dodatek zamiast napisać, że coś mu się nie podoba, że czegoś nie może znaleźć, czy że ma zły dzień, to milczy,

Wszystko to co mnie irytuje w tym telefonie nie zmienia jednak jednego — Apple ma niesamowitych projektantów interfejsów. Kiedy wreszcie pozbędę się tego bezużytecznego narzędzia, to nie sądzę żebym w jakimkolwiek innym systemie czuł się tak dobrze. Szkoda.

Powstrzymałem się w tym tekście od użycia naprawdę wielu brzydkich wyrazów, więc na koniec tylko podsumuję całą sytuację — kurwa, nigdy więcej sprzętu, którego nazwa zaczyna się od "ip".

Ciekawy jestem czy tylko ja mam takie problemy z tym telefonem. Przeszło mi rzecz jasna przez myśl, że słuchawka może być uszkodzona. Wolę jednak wierzyć, że pozostali też mają problemy, ale boją się to przyznać, bo przecież tak kiedyś zachwalali iPhone'a ;). Szkoda tylko, że kiedyś to był naprawdę fajny sprzęt.

Opublikowane na licencji CC przez Trufflepig.

Do tego czteroczęściowego (jak zapowiem, to może napiszę :) artykułu natchnęło mnie szkolenie z zaawansowanego JavaScriptu które, w miniony weekend, zorganizował we Wrocławiu Damian Ferrante Wielgosik. Już na początku chciałbym mu podziękować za wiedzę, którą się podzielił, ponieważ przed szkoleniem byłbym wstanie napisać tylko część tego artykułu.

JavaScript to dziwoląg

Tego nie da się ukryć. JavaScript należy do wąskiej grupy języków z rodziny ECMAScriptu (JS, ActionScript, E4X), którą cechuje to, że ich obiektowość oparta jest na prototypach. Oznacza to, że w JavaScriptcie nie istnieje pojęcie klasy. Nie oznacza to jednak tego, że w JavaScriptcie nie da się programować obiektowo z wykorzystaniem np. konkretyzacji, dziedziczenia, czy właściwości prywatnych. Da się. Co więcej — da się uzyskać dużo więcej funkcjonalności klasycznego języka obiektowego, choć, o czym na sam koniec, niekoniecznie jest po co.

Obiekt

W języku z obiektowością klasową wypada zacząć od definicji klasy. Tak przynajmniej zaczynali autorzy książek, które czytałem. W przypadku JavaScriptu mielibyśmy jednak pewien problem, bo klas tutaj nie ma. Trzeba więc zacząć od utworzenia obiektu. Oto najprostszy:

var obj = {};
typeof obj; // -> "object"

Tak, to w JavaScriptcie jest najprostszy obiekt. Zadeklarowany w przykładzie jest pusty i dziedziczy po obiekcie Object. Możemy sprawdzić to za pomocą poniższego kodu (jak działa i co to znaczy, o tym później):

var obj = {};
obj.__count__; // -> 0, działa tylko w Firefoksie
obj.__proto__.constructor; // -> Object()

Obiekt możemy również utworzyć za pomocą konstruktora Object(). Nie jest to jednak sposób polecany, ponieważ... zmienną Object można nadpisać. Lepiej pozostać przy literałach obiektów, które są bezpieczniejsze i ładniejsze.

var obj = new Object(); // -> Object
Object = 5;
var obj2 = Object(); // ->  TypeError: Object is not a constructor

Właściwości obiektu

Nic nam jednak z pustego obiektu. Pora dodać do niego dane i metody. Możemy skorzystać ze składni literału obiektu:

var obj = {
	text: 'Jestem obiektem',
	saySth: function () {
		alert(this.text);
	}
};

Bądź stworzyć pusty obiekt i dodać mu właściwości:

var obj = {};
obj.text = 'Jestem obiektem';
obj.saySth = function () {
	alert(this.text);
};

W obu przypadkach efekt będzie ten sam. Kiedy wywołamy obj.saySth(); dostaniemy alerta z tekstem Jestem obiektem.

Jeszcze słowo wtrącenia o literałach. Trzeba uważać na przecinek po ostatniej właściwości. Firefox i chyba wszystkie normalne przeglądarki trzymają się specyfikacji ECMAScript 5 pkt 11.1.5 (bądź to specyfikacja trzyma się tych przeglądarek ;), a kochany IE6, który zawsze musi być inny ("inny nie znaczy gorszy" w tym wypadku nie działa ;) trzyma się specyfikacji ECMAScript 3 pkt 11.1.5. Tak więc przecinek po ostatniej właściwości zostanie zaakceptowany przez przeglądarki z rodziny normalnych, zaś IE6 wywali cichaczem błąd. Nie wiem co prawda jak sprawa wygląda w IE7 i IE8, ale radzę po prostu tego przecinka nie stawiać. Koniec dygresji.

W Javie, czy PHP metoda obiektu jest czymś zupełnie innym niż jego właściwość. W JavaScriptcie metoda jest po prostu funkcją przypisaną do właściwości obiektu. Widać to najlepiej w trzeciej linii ostatniego przykładu: obj.saySth = function () {};. Wynika to z tego, że w JavaScriptcie funkcja też jest obiektem. Dzięki temu możemy ją przypisywać do zmiennych, zwracać w innych funkcjach, czy... wywoływać na niej metody. Ta właściwość JavaScriptu jest naprawdę potężna i myślę, że język ten sporo teraz zyskał w oczach osób lubiących Rubiego, Pythona, czy jakiś język funkcyjny :).

Uwaga na this

typeof obj.saySth; // -> "function"
var sayNothing = obj.saySth;
typeof sayNothing; // -> "function"
sayNothing(); // -> alert undefined

Z pierwszych trzech linii widać, że możemy sobie dowolnie operować funkcją. Czwarta może być zaskoczeniem. Dlaczego this.text === undefined? Zauważcie, że funkcja sayNothing nie została wywołana w kontekście obiektu obj, tylko w kontekście... no właśnie — czego? Żeby to sprawdzić dodajmy dwie linie kodu do poprzednich przykładów:

window.text = 'Jestem globalnym scopem';
sayNothing(); // -> alert "Jestem globalnym scopem"

Teraz widać, że funkcja sayNothing(); wywołana jest w globalnym kontekście. Możemy ją także wywołać w odpowiednim kontekście używając metody call() działającej na funkcji (tak jak pisałem wcześniej — funkcja też jest obiektem, więc ma też swoje metody):

sayNothing.call(obj); // -> alert "Jestem obiektem"

Więcej na ten temat u Ferrante w "this" w JavaScript.

Jeszcze trochę o obiektach

Do właściwości obiektu możemy się również dostać za pomocą operatora [], czyli w taki sposób jak do elementów tablicy. Jest to przydatne kiedy chcemy uzyskać właściwość, której nazwa trzymana jest w zmiennej:

var obj = { a: 'A', b: 'B', m: function () { return 'M'; } };
 
obj['a']; // -> "A"
var name = 'b';
obj[name]; // -> "B"
obj['m'](); // -> "M"

Po właściwościach obiektu można też iterować za pomocą konstrukcji for (i in obj). Trzeba jednak uważać, bo, w zależności od tego jakim obiektem dysponujemy, możemy dostać niespodziewane (przynajmniej na razie) rezultaty. Póki co jednak wystarczy nam:

var obj = { a: 'A', b: 'B', c: 'C', d: 'D' };
for (i in obj) {
	alert('obj[' + i + '] = ' + obj[i]);
}

Obiekty można też zagłębiać. Jest to własność oczywista, ale wypada dla jasności o niej wspomnieć.

var obj = {
	obj: {
		obj: {
			hidden: 'Zonk'
		}
	}
};
obj.obj.obj.hidden; // -> "Zonk"

Co dalej?

Samym obiektem programista żyć nie może. Klas jednak w JavaScripcie nie uświadczymy, trzeba więc wymyślić coś innego. Z pomocą przyjdą nam konstruktory obiektów, ale zrobią to dopiero w następnej części :).

Poza tym w trzeciej części mam zamiar napisać o prototypach, czyli JavaScriptowym dziedziczeniu. W czwartej chciałbym zebrać wszystko do kupy, pokazać może jakieś wzorce i napisać kilka uwag o programowaniu w JavaScriptcie. W zasadzie to uwagi mam już napisane, bo zacząłem od końca :D