Programowanie w JavaScript Rusz głową!

550

Rozdział 12

Jak naprawdę działają konstruktory

Sposób działania konstruktorów

Wiesz już, jak można zadeklarować konstruktor oraz używać go do tworzenia nowych

obiektów; jednak warto także zajrzeć za kulisy konstruktorów, by przekonać się, jak

naprawdę działają. A oto klucz do tej tajemnicy: aby zrozumieć konstruktory, należy

wiedzieć, co robi operator

new

.

Zaczniemy od instrukcji, której użyliśmy wcześniej do określenia wartości zmiennej

fido

.

var fido = new Dog(”Burek”, ”mieszaniec”, 20);

Przyjrzyjmy się teraz prawej stronie operatora przypisania, gdzie dzieją się najważniejsze

rzeczy. Spróbujmy wykonać to wyrażenie.

1

3LHUZV]ċU]HF]ċNWyUċURELRSHUDWRUnewMHVWXWZRU]HQLH

QRZHJRSXVWHJRRELHNWX

2

1DVWĐSQLHnewVSUDZLDİH]PLHQQDthisRGZRâXMHVLĐGR

WHJRQRZHJRRELHNWX

Zapewne pamiętasz

z rozdziału 5,

że this zawiera

referencję do

aktualnego obiektu,

na którym operuje

nasz kod.

3

.LHG\]RVWDâDMXİRNUHĤORQDZDUWRĤþthisZ\ZRâXMHP\IXQNFMĐDog

SU]HND]XMċFGRQLHMDUJXPHQW\”Burek””mieszaniec”RUD]20

this

function Dog(name, breed, weight) {

this.name = name;

this.breed = breed;

this.weight = weight;

}

”Burek” ”mieszaniec” 20

this

QDPH%XUHN

this

QDPH%XUHN

EUHHGPLHV]DQLHF

this

QDPH%XUHN

EUHHGPLHV]DQLHF

ZHLJKW

4

Następnie wykonywane jest ciało funkcji. Podobnie jak

przeważająca większość konstruktorów, także funkcja

Dog

przypisuje wartości właściwościom nowo utworzonego

obiektu

this

.

Wykonanie ciała funkcji Dog dostosowuje

zawartość nowego obiektu, tworząc w nim

trzy właściwości i przypisując im wartości

odpowiednich parametrów.

jesteś tutaj

551

Zaawansowane sposoby konstruowania obiektów

Za kulisami

5

:NRĚFXNLHG\UHDOL]DFMDIXQNFMLDog]RVWDQLH]DNRĚF]RQD

RSHUDWRUnew]ZUDFDZDUWRĤþthisF]\OLUHIHUHQFMĐGRQRZR

XWZRU]RQHJRRELHNWX=DXZDİİHFDâHWRZ\UDİHQLHVDPR

]ZUDFDZDUWRĤþthisQLHPXVLP\WHJRURELþMDZQLHZVZRLP

NRG]LH$NLHG\Z\UDİHQLH]ZUyFLMXİQRZ\RELHNWPRİHP\

]DSLVDþUHIHUHQFMĐGRQLHJRZ]PLHQQHMfido

QDPH%XUHN

EUHHGPLHV]DQLHF

ZHLJKW

ILGR

BĄDŹ przeglądarką

Poniżej znajdziesz fragment kodu JavaScript, w którym ukryło się

kilka błędów. Twoim zadaniem jest wcielić się w rolę przeglądarki

i odnaleźć te błędy. Kiedy już wykonasz to ćwiczenie, zajrzyj do

rozwiązania zamieszczonego pod koniec rozdziału i przekonaj

się, czy udało Ci się znaleźć je wszystkie. A poza tym, jesteśmy

już w rozdziale 12., zatem jeśli chcesz, zapisz także swoje uwagi

dotyczące stylu tego kodu. Zasłużyłeś sobie na to.

function widget(partNo, size) {

var this.no = partNo;

var this.breed = size;

}

function FormFactor(material, widget) {

this.material = material,

this.widget = widget,

return this;

}

var widgetA = widget(100, ”duĝy”);

var widgetB = new widget(101, ”maïy”);

var formFactorA = newFormFactor(”plastikowy”, widgetA);

var formFactorB = new ForumFactor(”metalowy”, widgetB);