Żeby mówić o architekturze w JS, należy zrozumieć specyfikę tego języka. Nie mamy tutaj klas, dziedziczenie można uzyskać na kilka sposobów, jednocześnie możemy spokojnie pisać, korzystając z paradygmatów programowania funkcyjnego, nie tracąc na efektywności naszych programów. Niestety, bez zrozumienia istoty closures, prototype, kontekstu uruchomienia funkcji nie możemy skutecznie przejść do zagadnienia architektury.

Jeśli nie znasz tych pojęć, pozwól, że krótko je przypomnę. Pamiętaj jednak, że JavaScript jest na tyle specyficznym językiem, że ich zrozumienie może zająć więcej czasu niż przeczytanie tego artykułu. Praktyka czyni mistrza!

Przede wszystkim przeglądarki normalne przeglądarki nie wymyślają JavaScriptu po swojemu. Jest to język oparty na specyfikacji o nazwie ECMAScript. Również ActionScript (tak, to, co będzie niedługo wyparte z webu przez HTML5) opiera się na ECMA. Jeśli coś wywoła w Tobie sążniste ale o co tu chodzi, majster?!, to na pewno w powyższym dokumencie znajdziesz odpowiedź na swój programistyczno-egzystencjalny ból.

Podstawą JS są funkcje, zresztą jak w każdym języku. Możemy je zdefiniować tak:

var suma = function(a, b) {
	return a + b;
};

Taki kod, a konkretnie funkcja o nazwie suma pozwoli nam zwrócić wynik dodawania dwóch liczb, które podamy do funkcji:

suma(5, 10); // zwróci 15

To podstawy. By mówić o dobrej architekturze, musimy ją oprzeć na jak najbardziej skalowalnych i tzw. „reużywalnych” komponentach. Zapewne więc chciałbyś wiedzieć, jak wykorzystać funkcje do tworzenia obiektów, skoro w JavaScript nie ma klas ani niczego takiego. Jest kilka sposobów, jeden lepszy, drugi gorszy. Pierwszy z nich:

var DataManager = function() {
	this.add = function() {};
	this.get = function() {};
};

Prosta funkcja DataManager, która powinna pomóc tworzyć obiekty do zarządzania danymi. Jak rzeczywiście stworzyć z tego obiekt?

var manager = new DataManager();

Nic prostszego! Zapewne widzisz tutaj analogię do innych języków, gdzie new również pomaga tworzyć nowe obiekty. W ten oto też sposób, DataManager możemy nazwać konstruktorem obiektu (w przyszłości zapewne będę używał tej nazwy na przemian ze słowem „funkcja„).

A jakby to wyglądało w JAVA?

public class DataManager {
	public void add() {}
	public void get() {}
}
// [...]
DataManager manager = new DataManager();

W PHP?

class DataManager {
	public function add() {}
	public function get() {}
}
$manager = new DataManager();

Wracając do JS… Dzięki temu, że stworzyliśmy dwie metody: add oraz get, nasz obiekt manager będzie mógł ich użyć:

manager.add("blog", "ferrante.pl");
manager.get("blog");

Ten kod oczywiście nic nie robi, bo funkcje (vel metody) add oraz get zdeklarowaliśmy jako puste:

this.add = function() {};
this.get = function() {};

Dodajmy do nich coś, nie ma znaczenia co, na razie niech to będą komunikaty dla użytkownika (oczywiście w realnym świecie jest to mało prawdopodobne):

var DataManager = function() {
	this.add = function() {
		alert("dodaję!");
	};
	this.get = function() {
		alert("zwracam!");
	};
};

Jak widzisz, this pomógł nam zrobić niesamowity trick (szacuneczek!), by te dwie metody były dostępne dla każdego nowo utworzonego obiektu (u nas manager).

this to jednak zguba w JS. Pomińmy new przy tworzeniu nowego obiektu:

var manager = DataManager();

A teraz spróbujmy wywołać nasze metody.

var manager = DataManager();
manager.add("blog", "jsnews.pl");

Ups? Dostajemy błąd, a przyczyna leży w tym, że do manager tym razem nic się nie przypisało, więc bez sensu byłoby wywoływać jakiekolwiek metody na nim. Dlaczego? Otóż bez new wywołujemy tylko funkcję (bez zamiaru tworzenia obiektów). Jeśli ona nic nie zwraca, to też to „nic” jest przypisywane do manager. To „nic” w JS nazywa się undefined – oznacza, że OK, przypisaliśmy coś, lecz ta wartość nie została zdefiniowana. Każda funkcja zwraca undefined, jeśli nie zdefiniujemy return na jej końcu.

var suma = function() {};
suma(a, b); // undefined

var suma = function(a, b) {
	return a + b;
};
suma(10, 20); // 30

Jak sprawdzić, czy coś rzeczywiście jest niezdefiniowane? Pomaga nam w tym konstrukcja typeof:

var suma = function() {};
var wynik = suma();

if (typeof wynik === "undefined") {
	alert("funkcja nic nie zwróciła!");
}

Jak widzisz, typeof zwraca stringa, więc jego wynik porównaliśmy do „undefined”. Typeof to jeden sposobów na to, by sprawdzić jakiego typu jest zmienna. Zainteresuj się tym w wolnym czasie (możesz też o tym przeczytać w mojej prezentacji varjs.com).

Wracając jednak do naszego przykładu z DataManager. Zrobiliśmy coś takiego:

var manager =  DataManager();
manager.add("blog", "jsnews.pl");

I dostaliśmy błąd.

Ale! Poniższa linijka, już bez jakiejkolwiek obstawy, działa:

var manager =  DataManager();

Nie powoduje ona żadnych komplikacji. Co więc stało się z rzeczami, które przypisaliśmy do this? W sensie, w tym miejscu:

var DataManager = function() {
	this.add = function() {
		alert("dodaję!");
	};
	this.get = function() {
		alert("zwracam!");
	};
};

Otóż, drogi Czytelniku, add oraz get są teraz zmiennymi globalnymi! Na przykład:

<script>
	var DataManager = function() {
		this.add = function() {
			alert("dodaję!");
		};
		this.get = function() {
			alert("zwracam!");
		};
	};

	var manager = DataManager();
</script>

<script>
	add("cos tam", "cos tam"); // dodaję!
	get("cos tam"); // zwracam!
</script>

Tak, add i get są dostępne w każdym ze skryptów na stronie (no chyba, że jakiś je nadpisał…). Zupełnie tak, jakbyś zrobił:

<script>
	var add = function() {
		alert("dodaję!");
	};
	var get = function() {
		alert("zwracam!");
	};
</script>

Ewidentną zdradę popełnioną przez this dokumentuje poniższy kod:

var fn = function() { return this; };
window === fn();

Tak jest, thisem przy wywołaniu funkcji jest domyślnie obiekt globalny, który w środowiskach przeglądarkowych nazywa się window. Jest to zmienna jak każda inna, dodatkowo jest obiektem, więc można coś do niej przypisywać i używać rzeczy już przypisanych po kropce (jak to w obiektach bywa) np. window.alert(„yeah!”);.

Przedstawiłem Ci jeden ze sposobów tworzenia obiektów, jak widzisz nie zawsze bezpieczny (szczególnie, jeśli mamy do czynienia z mniej doświadczonymi programistami JS w zespole). Dodatkowo, teraz już wiesz, dlaczego Douglas Crockford nie lubi new. Jakie mamy alternatywy?

Możemy zwracać gotowy obiekt w każdej z funkcji. W naszym przypadku będzie to tak:

var DataManager = function() {
	return {
		add: function() {
			alert("dodaję!");
		},
		get: function() {
			alert("zwracam!");
		}
	};
};

Proste i klarowne! Zauważmy, że zawsze – bez znaczenia, czy użyliśmy new czy nie – dostajemy nowy obiekt:

var manager = new DataManager();
manager.add("blog", "ferrante.pl");
manager.get("blog");

var anotherManager = DataManager();
anotherManager.add("blog", "jsnews.pl");
anotherManager.get("blog");

Nie ma też żadnych wycieków do globalnej przestrzeni:

var manager = DataManager();
add("cos tam"); // bląd!

Jak to się stało? Wszystko załatwił tzw. object literal, czyli to coś w klamrach, z dwukropkami oraz przecinkami. O, to!

return {
	add: function() {
		alert("dodaję!");
	},
	get: function() {
		alert("zwracam!");
	}
};

Najprostszy object literal wygląda tak:

var obj = {
	foo: function() {
		alert("boom!");
	}
};
obj.foo(); // "boom!"

Pusty obiekt:

var obj = {};

Lub obiekt posiadający własności nie będące funkcjami:

var obj = {
	foo: 1,
	bar: 2
};
alert(obj.foo); // 1

Można też umieścić obiekt w obiekcie:

var obj = {
	foo: {
		method: function() { alert("foo method!"); }
	}
};
obj.foo.method(); // foo method!

W ten sposób możemy definiować nowe obiekty bez używania konstruktora. Szybko i łatwo od razu jest gotowy. Pamiętaj, by jego składowe definiować po przecinku, więc jeśli mamy np. trzy metody, to powinny pojawić się 2 przecinki:

var obj = {
	metoda1: function() {},
	metoda2: function() {},
	metoda3: function() {}
};

Jak widać, jest to zwykły obiekt, a literal jest dlatego, że definiujemy go „od ręki”, wypisując wszystkie składowe.

Jeśli tworzyłeś do tej pory obiekty w ten sposób: var obj = new Object – szybko o tym zapomnij. Nieoptymalne, niebezpieczne, wolne.

Jest jeszcze trzeci sposób, jak ugryźć obiekty. Otóż obiekty poprzez zdefiniowanie i użycie konstruktorów można dostać jeszcze w inny sposób, niezwiązany z this. Będzie tutaj potrzebna mityzowana własność prototype, którą posiada każda z funkcji. Tak, tak, np. taka:

var fn = function() {};

Czy taka:

var foobar = function() {
	return "foobar";
};

Każda, no.

Dostajemy się do prototype następująco:

foobar.prototype

Jak widać nie ma tutaj zbędnej filozofii – foobar to zmienna wskazująca na funkcję, choćby weźmy ją z przykładu parę linijek wyżej. Możesz też sprawdzić, że coś takiego istnieje używając np. włączonego Firebuga i jego konsoli, a konkretnie metody console.log:

var fn = function() {};
console.log(fn.prototype);

Wykorzystajmy też swoją wiedzę o typeof i zobaczmy jakiego typu jest własność prototype:

var fn = function() {};
alert(typeof fn.prototype); // "object"

Tak, prototype to obiekt, który może jakieś składowe przechowywać, można coś do niego przypisać lub coś z niego usunąć.

Przepiszmy teraz nasz przykład z DataManager używając powyższej konstrukcji:

var DataManager = function() {};
DataManager.prototype.add = function() { alert("dodaję!"); };
DataManager.prototype.get = function() { alert("zwracam!"); };

A teraz stwórzmy jakiś obiekt na podstawie konstruktora DataManager:

var manager = new DataManager();
manager.add(); // dodaję!
manager.get(); // zwracam!

Możesz być zaskoczony, że to działa. A jednak. Zero this! Co się dzieje? Otóż .prototype to własność, która jest kopiowana do każdego z nowo utworzonych obiektów na podstawie konstruktora, do którego to .prototype należy. Jeśli więc coś jest w DataManager.prototype to zostanie to skopiowane do jakiegokolwiek obiektu, który utworzymy tak: var obj = new DataManager();. Można więc założyć, że .prototype to obiekt bazowy, z którego korzystają inne obiekty.

Warto jednak uważać. .prototype jest kopiowany przez referencję, więc w każdym obiekcie jest ten sam. Proste sprawdzenie:

var manager = new DataManager();
var anotherManager = new DataManager();
manager.add === anotherManager.add; // true

Porównujemy dwie funkcje należące do dwóch różnych obiektów stworzonych na podstawie konstruktora DataManager. Wynika na to, że są to te same funkcje zapisane w jednym i tym samym obszarze pamięci.

Dokładniej ten problem możemy zbadać na innym przykładzie. Jak powiedziałem, każdy obiekt kopiuje sobie przez referencję obiekt .prototype z konstruktora (tak, tak – tutaj manager i anotherManager kopiują sobie DataManager.prototype) i gdzieś wewnątrz go przechowuje. W niektórych przeglądarkach możemy dostać się do tej własności. A mianowicie jest nią obj.__proto__:

var manager = new DataManager();
var anotherManager = new DataManager();
manager.__proto__ === anotherManager.__proto__; // true

W przyszłości, używając JS opartego na ECMAScript w piątej edycji, będziemy mogli do tego użyć czegoś takiego, jak getPrototypeOf:

manager.__proto__ === Object.getPrototypeOf(anotherManager); // true

Nie jest to jednak w tym momencie wiedza niecierpiąca zwłoki.

Głównym zagrożeniem, może okazać się coś następującego:

var fn = function() {};
fn.prototype.foo = function() { alert("foo"); };

var obj = new fn();
obj.foo(); // foo

fn.prototype.foo = function() { alert("bar"); };
obj.foo(); // bar

Każda zmiana w prototypie konstruktora ma wpływ na utworzone już obiekty – z łatwością podmieniliśmy funkcję foo.

Podsumowując, poznaliśmy właśnie kolejny ze sposobów na definiowanie klasopodobnych konstruktorów oraz uzyskiwanie z nich obiektów. Główną zaletą .prototype jest to, że własności są kopiowane przez referencję, co za tym idzie oszczędzamy pamięć, a także łatwe dziedziczenie, o czym w kolejnych artykułach. Natomiast nadal należy pamiętać o new. Do tego o wiele trudniej o zaimplementowanie metod prywatnych (zauważ, że do tej pory operowaliśmy tylko na publicznych). O nich, o closures i innych w kolejnym odcinku.

new Array

var a = new Array(); // ŹLE
var a = []; // DOBRZE 

Przykład stary jak świat, ale wart piętnowania. new Array jest wolniejsze (bo wywołujemy konstruktor Array) oraz mniej bezpieczne:

var Array = 1;
var a = new Array(); // boom!

function mojaFunkcja () {}

function zrob () {};
function poczekaj () {};
function costamInnego () {};

Wielu ludzi wkleja coś takiego do <script /> i ma w nosie wszystko dookoła. W ten sposób zanieczyszczamy globalną przestrzeń nazw i generalnie brudzimy w kodzie. Można uniknąć tego poprzez jako taką imitację przestrzeni nazw:

var Lib = {
	zrob : function () {},
	poczekaj : function () {},
	costamInnego : function () {}
};

Lib.zrob();

Co do namespacingu polecam ciekawy artykuł, który przedstawia nieco inny punkt widzenia, ale warto go rozważyć.

Drugi częsty błąd:

var fn = function foobar () {};

W IE coś takiego powoduje wyciek zmiennej foobar jako globalnej.

el.setAttribute(„style”, „font-weight: bold”)

Wolna metoda na ustawianie stylów i dość nienaturalna. Nie działa w IE. Zamiast tego:

var el = document.getElementById("elem");
el.style.fontWeight = "bold";

Warto też powiedzieć, że o wiele lepiej sprawdza się nadanie klasy, zamiast ustawiania kilku stylów naraz. Zamiast:

var el = document.getElementById("elem");
el.style.fontWeight = "bold";
el.style.fontStyle = "italic";
el.style.display = "block";

zrób tak:

.special {
	font-style: italic;
	font-weight: bold;
	display: block;
}

var el = document.getElementById("elem");
el.className = "special";

Przy okazji, jeśli chcesz sprawdzić, czy element zawiera już podaną klasę, w nowych przeglądarkach implementowane jest powoli classList:

var name = "special";
if (el.classList.contains(name)) {
// klasa istnieje
}

something = true

Pamiętajcie o var! W powyższy sposób deklarujecie zmienne globalne!

something = true; // ŹLE
var something = true; // DOBRZE

el.onclick = function () {};

Pamiętajmy o poprawnym modelu W3C do dodawania zdarzeń, a więc:

el.addEventListener("click", function () {}, false);

W IE:

el.attachEvent('onclick', function () {});

document.getElementsByTagName

Nie jest to zarzut, aczkolwiek nowsze przeglądarki implementują coś, dzięki czemu możesz zapomnieć o jQuery tj. document.querySelectorAll:

var specials = document.querySelectorAll("#wrapper .special");

new Image

Uwaga, można nadpisać!

var Image = "hej Sokoły!";
var img = new Image(); // boom!

Lepiej oprzeć się na DOM:

var img = document.createElement("img");
img.src = "http://something.com/something.jpg";

parseInt(„08″)

parseInt("08"); // 0

Pamiętajmy o systemie liczbowym do jakiego chcemy konwertować stringa!

parseInt("08", 10); // 8

hasOwnProperty

Do czego służy hasOwnProperty?

Object.prototype.somethingMine = function () {};
var o = { foo : "bar" };

for (var i in o) {
	if (o.hasOwnProperty(i)) {
	}
}

Jeśli nie zawrzemy powyższego warunku, przeiterujemy też wraz z somethingMine.

undefined

foo === undefined; // ŹLE
typeof foo === "undefined"; // DOBRZE

Pamiętajmy, że można łatwo nadpisać undefined:

var undefined = 1;

Sposobem na uzyskanie czystego undefined może być np.:

(function(undefined) {
foo == undefined;
})();

Lub:

var undefined = (function () {})();

Lub:

var undefined = void 0;

for in

Nie używamy pętli for in dla tablic!

var a = [1, 2, 3];
for (var i in a) {} // ŹLE!

1. var fn = function x () { return fn; };
   x;

   function x() { return fn; };

   ERROR

   undefined

   null

2. ["1", "2", "3"].map(parseInt);

   [1, 2, 3]

   ["1", "2", "3"]

   [1, NaN, NaN]

   [NaN, NaN, NaN]

3. parseInt("08");

   8

   0.8

   0

   10

4. 10.2 | 0;

   10.2

   0

   102

   10

5. typeof Number("2");

   "object"

   "string"

   "number"

   "array"

6. var obj = {
   	a : this.obj,
   	obj : "foo"
   };
   typeof obj.a; 

   "undefined"

   "string"

   "object"

   ERROR

7. var arr = [1, 2, 3];
   arr.splice(1, 0, 1);
   arr;

   ERROR

   [1, 2, 3]

   [1, 1, 2]

   [1, 1, 2, 3]

8. var x = [1, 2, 3].splice(1, 1);
   x;

   ERROR

   undefined

   2

   [2]

9. 0..toString.call(2, 2);

   ERROR

   0

   "10"

   2

10. [1.,.5][0.1 & 0]

    undefined

    5

    ERROR

    1

11. var x = (1, 2, (x = 3), 4);
    x;

    3

    4

    1

    ERROR

12. var var = "100";
    var;

    100

    ERROR

    null

    undefined

13. [10, 100, 1][~"2" + + "3"];

    100

    10

    1

    undefined

14. var fn = function gn () {
    	var hn = function gn () {
    		fn();
    		return 100;
    	};
    	return hn;
    };
    fn()();

    ERROR

    100

    hn

    undefined

15. "" + [1] + {};
    	        

    "1[object Object]"

    ERROR

    "[object Array]"

    "1"

16. var x = ({ "with" : 1} + 1);
    x;

    "[object Object]1"

    ERROR

    2

    undefined

17. var x = [[] | 0];
    x;

    0

    undefined

    [0]

    -1

18. Infinity > NaN;

    true

    false

19. undefined < 1;

    true

    false

20. /[a-z]/g == /[a-z]/g;

    true

    false

wynik!

Postanowiłem więc — jeśli wszystko pójdzie według mojego planu — opisać najważniejsze składniki CSS3 bazując na przykładach. Zacznijmy od transitions, które pozwalają nam czasem zapomnieć o jQuery’owym animate czy po prostu window.setTimeout.

Do czego służą CSS3 transitions?

Transitions to specjalne własności w CSS, dzięki którym możemy ustawić, że zmianie jakieś właściwości (np. marginesu lewego) towarzyszyć będzie animacja, zamiast błyskawicznej modyfikacji wartości z x na y. Przykładowo, jeśli ustawimy (bezpośrednio w JS bądź poprzez zmianę klasy/właściwości w CSS) wartość height i zdefiniujemy wcześniej odpowiednie transition, zmiana wysokości zostanie animowana (czyli element będzie się wydłużał albo skracał do podanej wartości). To samo tyczy się np. marginesów czy przeźroczystości – ustawiasz transition na jakimś elemencie, ktoś zmienia opacity z 0.1 na 1 i obserwujesz, jak zmiana tej wartości następuje stopniowo, od 0.1 do 1, w ciągu jakiegoś (zdefiniowanego przez nas) czasu.

Teoria

Powiedzieliśmy sobie, że aby zaobserwować jak to działa, należy ustawić jakieś transition na danym elemencie. Jak to się robi w teorii? Przyjmijmy, że działamy na <p/>:

p {
	transition: height 1s ease-out;
}

W ten sposób mówimy przeglądarce, że jeśli ktokolwiek ustawi nową wartość height dla jakiegokolwiek elementu <p/>, to zmianie tej ma towarzyszyć 1-sekundowa animacja (bądź przejście) typu ease-out. Czyli — dla przykładu — robiąc, dajmy na to, w jQuery:

$("p").css("height", 100);

Przeglądarka odpowiednio zareaguje, zmieniając w ciągu sekundy wysokość każdego elementu p z dotychczasowej na 100 pikseli (jako że taką wartość podaliśmy wyżej).

Podobnie byłoby, gdybyśmy mieli taki kod:

p {
	transition: height 1s ease-out;
}
.odpalTransition {
	height: 100px;
}

$("p").addClass("odpalTransition");

Powyżej dodajemy każdemu z <p/> nową klasę odpalTransition. Jej nazwa jest mało reprezentatywna, ważne jednak, że przy okazji zmieniamy wysokość. W ten sposób zadziała transition, zdefiniowany na początku dla każdego akapitu.

Przeglądarka przeglądarce nierówna

Musisz wiedzieć, że przeglądarki zaczęły implementować CSS3 transitions dość dawno temu, a specyfikacja z W3C ma nadal status draftu, dlatego wprowadzono tę opcję z odpowiednim prefiksem. Dla Chrome i Safari jest to -webkit-transition, dla Firefoxa -moz-transition, a dla Opery -o-transition. Z reguły wymienione przeglądarki nie rozumieją czystego transition. Aby zapewnić dla nich wsparcie należy więc aż cztery razy umieścić odpowiednią regułkę. Na naszym przykładzie będzie wyglądało to tak:

p {
	-webkit-transition: height 1s ease-out;
	-moz-transition: height 1s ease-out;
	-o-transition: height 1s ease-out;
	transition: height 1s ease-out;
}

Witaj w świecie cross-browserowych CSSów trzy!

Jak widzisz, w transition: podaliśmy trzy wartości: height, 1s i ease-out. Pierwsza to oczywiście własność, na której zmianę ma zareagować przeglądarka. Może być ich kilka:

p {
	-webkit-transition: height 1s ease-out, width 1s ease-out;
	-moz-transition: height 1s ease-out, width 1s ease-out;
	-o-transition: height 1s ease-out, width 1s ease-out;
	transition: height 1s ease-out, width 1s ease-out;
}

Można też podać all:

p {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}

Tutaj, niezależnie od tego, jaką własność będziemy chcieli ustawić, brałzer spróbuje włączyć zdefiniowany transition.

Czas to z kolei jakaś część sekundy, może być to np. 100 milisekund (wyrażone przez 0.1s):

p {
	-webkit-transition: height 0.1s ease-out, width 0.1s ease-out;
	-moz-transition: height 0.1s ease-out, width 0.1s ease-out;
	-o-transition: height 0.1s ease-out, width 0.1s ease-out;
	transition: height 0.1s ease-out, width 0.1s ease-out;
}

Jeśli chodzi o typ animacji, mamy do wyboru:

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• krzywa Béziera trzeciego stopnia (P0, P1, P2, P3)

Jak zapewne zauważyłeś, typy animacji są wyliczane na podstawie krzywych Béziera. Odpowiednie parametry każdej z nich znajdziesz w specyfikacji.

Kojarzysz zapewne CSSowy border, prawda? Skrótowiec wygląda tak:

border: 1px solid #000;

Dzięki temu nie musimy pisać w ten sposób:

border-style: solid;
border-color: #000;
border-width: 1px;

Podobna sytuacja jest z transitions. Możemy użyć skróconego zapisu:

transition: height 1s ease-out;

Aczkolwiek można też odwołać się bezpośrednio do każdej z pod-własności. W naszym przypadku będzie to wyglądać tak:

transition-property: height;
transition-duration: 1s;
transition-timing-function: ease-out;

Nie jest to jednak zbyt efektywne, wyobraź sobie, że musiałbyś napisać coś takiego dla każdej z przeglądarek (-moz, -webkit itd.). W sumie – 12 linijek!

Przy okazji, jest jeszcze transition-delay, który oznacza opóźnienie w wykonaniu się animacji:

transition-property: height;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 1s;

Powyżej będzie to jednosekundowe opóźnienie.

Podsumowując, używając skrótowca, wzór pisania transitions wygląda tak:

[-moz,-webkit,-o]transition: własność czas_trwania typ opóźnienie

Praktyczny przykład

Czas na jakiś praktyczny przykład wykorzystania transitions. Zróbmy więc prosty accordion po najechaniu myszką na odpowiedni nagłówek. Oto przykładowy kod HTML:

<h1>Poczytaj o:</h1>
<ul>
	<li>
		<h2><a href="#more">CSS3</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque placerat molestie mauris, ac mollis neque ultricies sit amet. Quisque ligula nisi, facilisis in molestie sit amet, blandit at felis.</p>
	</li>
	<li>
		<h2><a href="#more">Transitions</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque placerat molestie mauris, ac mollis neque ultricies sit amet. Quisque ligula nisi, facilisis in molestie sit amet, blandit at felis.</p>
	</li>
	<li>
		<h2><a href="#more">Czymś innym</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque placerat molestie mauris, ac mollis neque ultricies sit amet. Quisque ligula nisi, facilisis in molestie sit amet, blandit at felis.</p>
	</li>
</ul>

Mamy więc prostą listę nieuporządkowaną, a wewnątrz trzy nagłówki oraz po jednym akapicie, które powinny być ukryte. Nasz cel to zrobić tak, by po najechaniu na nagłówek wysokość oraz przeźroczystość sąsiadującego akapitu zmieniły na jakieś dodatnie wartości, aby był on widoczny. Ustawmy więc odpowiednie style:

body {
	font-family: "Helvetica", Arial;
}

h1 {
	font-size: 100%;
}

h2 {
	font-size: 90%;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	display: inline-block;
}

li {
	padding-bottom: 5px;
	max-height: 150px;
}

li p {
	margin: 0;
	padding: 0;
	color: #fff;
	background: #cc0000;
	overflow: hidden;
}

Chyba nie zrobiliśmy wszystkiego, bo akapity nie są ukryte i nic się nie dzieje. Ukryjmy je więc:

li p {
	margin: 0;
	padding: 0;
	color: #fff;
	background: #cc0000;
	overflow: hidden;
	height: 0;
	opacity: 0;
}

opacity i height ustawione na zero załatwiły sprawę. Pora obsłużyć nasz hover na nagłówku h2:

li h2:hover + p {
	height: 50px;
	opacity: 1;
}

Oznacza to, że jeśli ktoś najedzie myszką na h2 silnik CSS poszuka sąsiadującego z nim elementu p i ustawi jego wysokość (height) na 50px oraz przeźroczystość (opacity) na 1.

CSSy wyglądają teraz tak:

body {
	font-family: "Helvetica", Arial;
}

h1 {
	font-size: 100%;
}

h2 {
	font-size: 90%;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	display: inline-block;
}

li {
	padding-bottom: 5px;
	max-height: 150px;
}

li p {
	margin: 0;
	padding: 0;
	color: #fff;
	background: #cc0000;
	overflow: hidden;
	height: 0;
	opacity: 0;
}

li h2:hover + p {
	height: 50px;
	opacity: 1;
}

Całość działa dość dobrze. Nie ma jednak animacji! Musimy dodać obsługę transitions. Jak widzimy, w selektorze li h2:hover + p zmieniamy wysokość i przeźroczystość. Jak powiedzieliśmy też wcześniej, transitions mają za zadanie powiedzieć przeglądarce, by w razie zmiany odpowiednich wartości, zmieniła je krok po kroku, używając jakiejś animacji bądź — to chyba będzie lepsza nazwa — efektu przejścia z jednej wartości do drugiej.

Tak więc, jako że zmieniamy te wartości dla akapitu p, dodajmy odpowiedni transition właśnie tam:

li p {
	margin: 0;
	padding: 0;
	color: #fff;
	background: #cc0000;
	overflow: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease-out, height 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out, height 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out, height 0.5s ease-out;
	transition: opacity 0.5s ease-out, height 0.5s ease-out;
}

Kilka linijek, a ile radości! Ustawiliśmy właśnie, by włączało się półsekundowe przejście typu ease-out, jeśli ktokolwiek, kiedykolwiek zmieni właściwość opacity bądź height dla elementów <p/>.

Podsumowanie

CSS3 transitions to bardzo ciekawe narzędzie, które potrafi zaoszczędzić nam brudzenia sobie rąk JavaScriptem. Wszystko działa pod Firefoxem 4, Chrome 1+, Safari 3.2+ i Operą 10.5+.

Liczę, że wkrótce pojawią się tu kolejne artykuły na temat nowych ficzerów, bo, jak widzicie, jest o czym pisać.

Co jednak dzisiaj istotne, wydałem prawie 250-stronicowy, długo oczekiwany materiał PDF ze szkoleń i mojego dotychczasowego researchu o nazwie Just Advanced JavaScript. Książka, a w zasadzie slajdy mają charakter ściągawki – opisana została lwia część języka oraz mnóstwo ciekawostek i haczyków. Wszystko znajdziecie pod varJS.com – serdecznie zapraszam! Prawdopodobnie wkrótce rozszerzę to o kolejne rozdziały i linki do innych pożytecznych stron, które również możecie tam spotkać.

Niniejszym dziękuje Rafałowi Kukawskiemu oraz Lei Verou, którzy odpowiadali za korektę i poprawę ewentualnych błędów merytorycznych. Z całego serca polecam współpracę z nimi, prawdziwi eksperci!

Wyobraźmy sobie, że nie odpowiada nam dzielenie kodu na konstruktory i rozszerzanie ich prototypów:

var Animal = function(age) {
	this.age = age;
};
Animal.prototype.getAge = function() { return this.age; };
Animal.prototype.setAge = function(age) { this.age = age; };

var Dog = function(age) {
	this.setAge(age);
};
Dog.prototype = new Animal; // dziedziczymy po Animal
Dog.prototype.constructor = Dog;
Dog.prototype.getVoice = function() { return "hau hau"; }

Używamy tego w ten sposób:

var dog = new Dog(10);
dog.getVoice(); // hau hau
dog.getAge(); // 10

W przypadku dużych i rozbudowanych systemów może rodzić to pewne kłopoty z utrzymaniem i czystością kodu. W związku z tym powstały abstrakcje klas. Stosując jedną z nich, można by napisać tak:

var Animal = new Klass({
	Init: function(age) {
		this.setAge(age);
	},
	age: null,
	getAge: function() { return this.age; },
	setAge: function(age) { this.age = age; }
});

var Dog = new Klass({
	Extends: Animal,
	getVoice: function() { return "hau hau"; }
});

Powiedzmy sobie szczerze – jest to bardziej przejrzyste rozwiązanie, pozwalające na stworzenie lepszej dokumentacji, testów i tak dalej. Jest też, sądzę, łatwiejsze do zrozumienia dla developerów nie mających zbyt dużego rozeznania w JavaScript. Zobaczmy więc, jak można coś takiego łatwo stworzyć.

Pierwsze, co jest nam potrzebne, to odpowiedni konstruktor Klass.

var Klass = (function() {
// ...
})();

Jak widać, w tym momencie Klass ma wartość undefined – to jasne, ponieważ funkcja nie mająca zdefiniowanego return zwraca undefined. Jako że mamy zamiar używać Klass w ten sposób – new Klass({}); – wiemy, że pod Klass musi znajdować się jakiś konstruktor, przyjmujący argument, który będzie zawierał pola i metody przyszłych klas. Szybka korekta i możemy iść dalej:

var Klass = (function() {
	return function(classDefinition) {};
})();

Dobrze, pora zająć się metodami Init, uruchamiającymi się podczas konstruowania przyszłych obiektów z naszych klas. Zdefiniujmy sobie zmienną dummyClass, która będzie z kolei konstruktorem-funkcją. Będziemy dekorować ją potem atrybutami z classDefinition.

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		return dummyClass;
	};
})();

Co dzieje się w dummyClass? Sprawdzamy po kolei, czy po wywołaniu new JakasNaszaKlasa istnieje coś takiego jak metoda Init, która ma pełnić rolę konstruktora. Następnie upewniamy się, że jest to funkcja, by potem odpalić ją poprzez this.Init.apply(this, arguments).

Nasza dummyClass musi jednak jakoś wiedzieć o Init, którą możemy podać w classDefinition. Zresztą, tak jak o innych polach i metodach naszych przyszłych klas. Najlepiej będzie więc przepisać wszystko z classDefinition do prototypu dummyClass:

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		for (var member in classDefinition) {
			if (classDefinition.hasOwnProperty(member)) {
				dummyClass.prototype[member] = classDefinition[member];
				classDefinition[member] = null;
			}
		}
		return dummyClass;
	};
})();

Zrobiliśmy to prostą iteracją przez wszystkie klucze classDefinition, a więc w wypadku klasy Animal iterujemy przez:

Init: function(age) {
	this.setAge(age);
},
age: null,
getAge: function() { return this.age; },
setAge: function(age) { this.age = age; }

Sprawdźmy, czy nasz dotychczasowy kod działa:

var Animal = new Klass({
	Init: function(age) { this.age = age; },
	age: null
});
var zwierze = new Animal(10);
alert(zwierze.age); // 10

Jest fajnie, ale brakuje czegoś istotnego. Oczywiście chodzi o dziedziczenie, które zadziała, kiedy podamy w definicji klasy słówko Extends.

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		if (typeof classDefinition.Extends === "function") {}
		delete classDefinition.Extends;

		for (var member in classDefinition) {
			if (classDefinition.hasOwnProperty(member)) {
				dummyClass.prototype[member] = classDefinition[member];
				classDefinition[member] = null;
			}
		}
		return dummyClass;
	};
})();

Umiejętnie rozpoznaliśmy sytuację, kiedy należy rozszerzyć klasę potomną o klasę bazową. Następnie usunęliśmy wartość Extends, by nie była kopiowana w pętli, chociaż to od nas zależy. Równie dobrze można by ją zostawić.

Wiemy, że musimy rozszerzyć dummyClass o classDefinition.Extends. Automatycznie myślimy więc o prototypach, które należy przekazać do classDefinition. Można więc zrobić tak:

dummyClass.prototype = classDefinition.Extends.prototype

Jak wiemy, wartość .prototype jest referencją do obiektu. Jeśli więc coś zmieni się w prototypie classDefinition.Extends, zmieni się również w prototypie dummyClass.

Słowem, dwa różne obiekty korzystałyby z tego samego prototypu, co może wywołać wiele zagrożeń. Zaradzić temu można w ten sposób:

var Klass = (function() {
	return function(classDefinition) {
		var dummyClass = function() {
			this.Init && typeof this.Init === "function" && this.Init.apply(this, arguments);
		};

		if (typeof classDefinition.Extends === "function") {
			var temp = function() {};
			temp.prototype = classDefinition.Extends.prototype;
			dummyClass.prototype = new temp;
			temp = null;
		}
		delete classDefinition.Extends;

		for (var member in classDefinition) {
			if (classDefinition.hasOwnProperty(member)) {
				dummyClass.prototype[member] = classDefinition[member];
				classDefinition[member] = null;
			}
		}
		return dummyClass;
	};
})();

I tak właśnie powstała dość funkcjonalna fabryczka klas, choć z wieloma ograniczeniami, które z pewnością łatwo dostrzeżecie. Brakuje, co ważne, metody na wzór super(), która odnosiłaby się do analogicznych metod z klasy bazowej. Zadanie to postaram opisać się później. Temat poruszę też prawdopodobnie także na następnym szkoleniu.

Na koniec wypada przetestować nasz kod:

var Animal = new Klass({
	Init: function(age) {
		this.setAge(age);
	},
	age: null,
	getAge: function() { return this.age; },
	setAge: function(age) { this.age = age; }
});

var Dog = new Klass({
	Extends: Animal,
	getVoice: function() { return "hau hau"; }
});

var pies = new Dog(10);
pies.getVoice(); // "hau hau";
pies.getAge(); // 10
pies.setAge(100);
pies.getAge(); // 100
pies instanceof Animal; // true
pies instanceof Dog; // true

this występuje w blokach funkcyjnych bądź w globalnym scope, jak zresztą zdążyliście już pewnie nieraz zauważyć. Ciężko tak naprawdę powiedzieć, co dokładnie oznacza. Chyba najlepszą definicją będzie to, że this wskazuje na jakiś obiekt w zależności od kontekstu, w jakim została użyta funkcja, w której go zdefiniowaliśmy. Pisząc kontekst mam nam myśli głównie sposób i miejsce wywołania.

Obiekt globalny

O JavaScript w przeglądarkach wiemy, że obiekt globalny wskazuje na window. Tym samym this użyty w globalnym kontekście będzie wskazywał także na window:

<script type="text/javascript">
	window === this; // true
</script>

W ten sposób z łatwością możemy dojść do wniosku, że poniższa funkcja użyta w globalnym scope zawsze będzie zwracała obiekt globalny:

<script type="text/javascript">
	var global = (function() { return this; })();
</script>

Konstruktory a funkcje

Zobaczmy, co dzieje się, kiedy zdefiniujemy jakąś funkcję, która dodaje pewną własność do obiektu, na który będzie wskazywał this:

var fn = function() {
	this.foobar = "foo";
};

Mając do dyspozycji coś takiego, jak powyżej, możemy naciąć się na dwa zupełnie różne zachowania. Możemy przecież napisać potem tak:

var fn = function() {
	this.foobar = "foo";
};
var obj = new fn;

Lub tak:

var fn = function() {
	this.foobar = "foo";
};
fn();

W pierwszym przypadku tworzymy instancję nowego obiektu na podstawie konstruktora fn. Jak możemy się domyślić, w ten sposób this będzie wskazywał na nowoutworzony obiekt (obj) i będziemy mogli użyć czegoś podobnego:

var fn = function() {
	this.foobar = "foo";
};
var obj = new fn;
obj.foobar; // "foo"

W drugim listingu nie korzystamy jednak z operatora new, co za tym idzie nie tworzymy bezpośrednio nowego obiektu na podstawie konstruktora. Uruchamiamy po prostu funkcję jak każdą inną. Po wykonaniu się tego kodu nie dostajemy błędu, tak że możemy być pewni, że wszystko poszło dobrze i jest on – przynajmniej pod względem składni – absolutnie poprawny. Co więc dzieje się tutaj?:

fn();

JavaScript w takich przypadkach domyślnie przekierowuje na samą górę scope i this będzie wskazywał na obiekt globalny. W ten sposób pod this będzie ukryta referencja do window i będziemy mogli użyć zmiennej globalnej foobar tak:

window.foobar; // "foo"

Bądź tak:

window['foobar']; // "foo"

A także tak, jak poniżej, jako że każdy składnik obiektu window jest zmienną globalną:

foobar; // "foo"

Warto także powiedzieć, że funkcje zdefiniowane w innych konstruktorach/funkcjach nie dziedziczą this z funkcji wyżej, tylko także odwołują się do globalnego obiektu:

var zewnetrzna = function() {
	return function wewnetrzna() {
		return this;
	};
};

var fn = new zewnetrzna();
fn(); // window

Object literals

Ważny jest, jak powiedziałem, kontekst. Definiując sobie obiekt w postaci object literal, this odwołuje się domyślnie do obiektu, w którym został utworzony:

var obj = {
	bar: function() { return this; }
};

Pisząc więc coś takiego:

obj.bar();

this wskaże na obj. Przy okazji udowodnijmy kolejny raz, że funkcje wewnętrzne nie dziedziczą this:

var obj = {
	bar: function() {
		console.log(this);
		return function() {
			console.log(this);
			return this;
		}
	}
};

Szybki test potwierdza naszą tezę:

obj.bar()();

Choć pamiętajmy, że równie dobrze można zapisać tak:

var fn = obj.bar();
fn();

Wszystko wygląda tak dlatego, że JavaScript wspiera zwracanie funkcji, które możemy potem uruchomić dodając nawiasy wywołania.

Zobaczymy teraz bardzo ciekawą rzecz, związaną z kontekstem. Zdefiniujmy najpierw object literal:

var obj = {
	bar: function() {
		return this;
	}
};

Uruchamiając to tak:

obj.bar(); // obj

this zwraca obj. Jeśli jednak literalnie zmienimy to, co będzie po kropce, kontekst będzie już inny:

var f = obj.bar;
f(); // window

Dlaczego tak?

Jako że zmienne globalne możemy pisać tak:

window['globalna'] = "cos";
window['globalna']; // "cos"

Równie dobrze możemy zrobić jak poniżej, co wyjaśni nam, dlaczego this wskazuje na window:

window['f'] = obj.bar;
window['f'](); // window

Mamy więc po lewej obiekt window, czyli funkcja f jest uruchamiana właśnie w jego kontekście i to do niego this będzie odnosił.

Przeanalizujcie też poniższy kod, który wynikł z inicjatywy Rafała Kukawskiego w trakcie rozmowy ze mną:

var fn = function() {
	var b = function(){
		return this;
	};
	this.foo = function() {
		return b();
	}
};
var obj = new fn();
obj.foo(); // window

Inne metody

this można również zmienić poprzez metody call i apply wywołane na konstruktorach, ale to temat na kolejny artykuł.

Na koniec ćwiczenie ze szkolenia – co zwróci następujący kod i dlaczego:

var e = !!3;
var fn = function() {
	return {
		foobar: this.e,
		e: !!0
	};
};

var res = fn();
res.foobar; // ?

var foobar = {
	property: Infinity,
	enum = {
		10th: "ten",
		20th: "twenty"
	},
	toString: (function() {
		return (NaN || foobar).toString();
	})(),
	copy: false && this.alert,
	clone: function() {
		this.__proto__ = foobar;
	},
};

var obj = new foobar().clone();

Zróbmy to linijka po linijce.

var foobar = {

Inicjujemy object literal, czyli nic innego, jak gotowy (niepotrzebne jest tworzenie nowej instancji) obiekt.

property: Infinity,

Definiujemy pierwsza składową obiektu (dostęp do niej byłby realizowany poprzez foobar.property). Infinity to po prostu wartość w JS, oznaczająca nieskończoność (typu „number” – typeof Infinity === „number”).

enum = {

Kolejna składowa (będąca obiektem) o nazwie enum. Wszystko byłoby w porządku, gdyby nie JScript Microsoftu. Enum jest słowem zarezerwowanym przez ten język, więc wszelkie jego użycie w IE kończy się błędem! Warto też wiedzieć, że enum jest wyrażeniem zarezerwowanym (w kontekście przyszłych rozwiązań) przez standard ECMA, na którym jest oparty JavaScript. Poza tym zamiast = powinno być :.

10th: "ten",

Niestety własności obiektu ani nazwy zmiennych nie mogą zaczynać się od cyfry, więc mamy kolejny błąd.

20th: "twenty"

Jak wyżej.

},

Czysto, uff.

toString: (function() {

Definiujemy kolejną składową obiektu – nic wielkiego, warto jednak zwrócić uwagę na zapis (function() {})() – co wywołuje automatycznie funkcję podaną pomiędzy nawiasami (funkcję anonimową). Jeśli funkcja ta zwracałaby jakąś wartość, wtedy toString będzie się jej równać, inaczej będzie równy undefined (ponieważ nic nie zostanie zwrócone, a zmienne w JS domyślnie przyjmują taką wartość).

return (NaN || foobar).toString();

No i chcemy coś zwrócić. Zapis || jest skróconym zapisem poniższej konstrukcji warunkowej:

if (NaN) { return NaN; } else { return foobar; }

Jedna z fajniejszych cech języka. Oczywiście mogą się pojawić głosy o nieczytelności, ale będą to raczej skomlenia programistów przyzwyczajonych do innych języków – w JS konstrukcja ta jest szybsza i wydaje się bardziej naturalna (o ile oczywiście programujemy na co dzień w JavaScript).

Przechodząc do analizy tej linii mamy prosty warunek. Jako że NaN to jedna z falsy values i przy skonwertowaniu do wartości logicznej da false, JS spróbuje wziąć sobie zmienną foobar i na niej uruchomić funkcję toString. Ponieważ zmienna foobar w chwili uruchomienia anonimowej funkcji jest niewidoczna dla obiektu (undefined) – dostaniemy błąd.

Następnie mamy:

copy: false && this.alert,

Chcemy przypisać do copy… no właśnie, co? foobar = foo && bar to nic innego jak:

if (!foo) {
	return foo;
}
return bar;

Jako że pierwsze jest false to szybko kończymy zabawę i copy przyjmuje wartość false właśnie. Warto wyróżnić komentarz mcv:

this.alert się nie wykona ze względu na “false &&”. Poza tym… nie wiadomo czy nie ma takiej właściwości w kontekście definiowania tej zmiennej (foobar). A nuż jest? „this” tutaj nie odwołuje się do foobar.

Pełna zgoda, popatrzmy na przykład, kiedy powyższa sytuacja występuje:

var fn = function() {
	this.alert = "tadam!"

	var obj = {
		property: this.alert
	}
	return obj;
}

var foobar = new fn;
alert(foobar.property);

clone: function() {

Tworzymy funkcję clone. Nic wielkiego.

this.__proto__ = foobar;

W sumie wszystko w porządku – o ile obiekt w chwili jego inicjalizacji nie widzi foobar, tak funkcja wewnątrz obiektu owszem (a raczej będzie widziała w chwili użycia) – słowo klucz: closures. Gdyby składnia była bez błędów, można by napisać coś podobnego:

(new foobar.clone).__proto__.clone

},

W przypadku ostatniego elementu obiektu nie stawiamy przecinka. Firefox to toleruje, IE natomiast nie.

var obj = new foobar().clone();

foobar nie jest konstruktorem, a gotowym obiektem, więc nie możemy stworzyć instancji nowego obiektu korzystając z obiektu.

Gratuluję komentatorom – wielu z Was wysnuło bardzo ciekawe wnioski i uwagi!

var foobar = {
	property: Infinity,
	enum = {
		10th: "ten",
		20th: "twenty"
	},
	toString: (function() {
		return (NaN || foobar).toString();
	})(),
	copy: false && this.alert,
	clone: function() {
		this.__proto__ = foobar;
	},
};

var obj = new foobar().clone();

O co takiego chodzi? Falsy values¹ to nic innego, jak zbiór wartości, które dają fałsz. Coś w ten deseń:

if (!value) {
	console.log('Jedną z falsy values jest: '+ value);
}

Pytanie, jakie są to wartości? Oto one:

• „” – pusta zmienna typu String
• 0 – typu Number
• false typu Boolean
• undefined
• null
• NaN typu Number

Czyli:

if (!NaN) {
	console.log('Jedną z falsy values jest: '+ NaN);
}

if (!null) {
	console.log('Jedną z falsy values jest: '+ null);
}

Wszystkie te wartości przy konwertowaniu na typ Boolean (np. !!NaN) dają false. Warto zapamiętać!

Operatory porównania w JavaScript

Jeśli mowa o falsy values ciekawe rzeczy dzieją się przy ich porównywaniu. Jak wiadomo, mamy operatory == i ===. Mnóstwo ludzi wykłada się na tym, banalnym zresztą (po głębszej analizie) problemie.

Warto zapamiętać, że pierwszy operator porównuje jedynie wartości, drugi – wartości oraz typy. Poniższe przykłady dają więc prawdę:

"0" == 0
"    " == 0
[] == 0
undefined == null
false == new String("")

Fałsz zwracają natomiast podobne konstrukcje:

NaN == 0
null == 0
undefined == ""
0 == {}

Kiedy idzie o operator ścisłego porównania robi się ciekawiej – JavaScript oprócz logicznej wartości porównuje również typy zmiennych (a więc czy są obiektem, stringiem, liczbą itd.). Prawdę zwracają:

0 === 0
"" === ""
[] !== [] // dla kontrastu..

Fałsz natomiast poniższe przykłady:

"" === 0 // typ string i number
0 === null // typ number i object
[] === 0 // typ object i number
[] === "    " // typ object i string

Warto więc być ostrożnym w trakcie pisania aplikacji w JavaScript.

1. Temat falsy values poruszył na przykład Douglas Crockford w swojej znakomitej książce „JavaScript: The Good Parts”. Polecam!