Kurs obiektowego JavaScript (18)
Autor: Damian Chodorek • Opublikowany: 5 października 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy
Obiekty i konstruktory wbudowane.
Obiekty w JavaScript można podzielić na trzy kategorie.
- Data wrapper objects – odpowiadają za zarządzanie różnymi typami danych. Należą do nich:
Object
,Array
,Function
,Boolean
,Number
. - Utility objects – są to obiekty użytkowe i przydają się do wykonywania różnych operacji. Należą do nich
Math
,Date
,RegExp
. - Error objects – są to obiekty reprezentujące różne błędy i przydają się do zarządzania wyjątkami, które zostaną omówione w kolejnych częściach.
Za chwilę poznasz wybrane obiekty wbudowane. Oczywiście jest ich więcej, ale na początek wystarczy znajomość opisanych przeze mnie.
Wybrane obiekty wbudowane
Object
Jest przodkiem wszystkich obiektów w JS. To znaczy, że każdy obiekt, który stworzysz, będzie po nim dziedziczył.
//poniższe dwie linijki są równoważne
var ob={};
var ob=new Object();
Object
posiada kilka wbudowanych metod i pól, a więc wszystkie inne obiekty również je mają.
ob.constructor
– zwraca referencję do konstruktora danego obiektu,ob.toString()
– zwraca tekstową reprezentację obiektu,ob.valueOf()
– zwraca pojedynczą wartość reprezentującą dany obiekt, przeważnie jest to referencja to tego samego obiektu.
Metoda toString()
będzie niejawnie wywołana wszędzie tam gdzie JS będzie oczekiwał typu String
, ale dostanie obiekt innego typu.
Array
To funkcja, będąca konstruktorem tablic. Spójrz na przykład poniżej.
//poniższe 2 linijki robią to samo:
var arr=new Array(1,2,3);
var arr=[1,2,3];
Teraz widzisz na własne oczy, że tablice to także obiekty w JS. Jeśli użyjesz konstruktora Array
z kilkoma argumentami, to zostanie utworzona tablica wypełniona nimi. Jeśli jednak przekażesz jeden argument liczbowy, to zostanie utworzona tablica o ilości elementów odpowiadającej przekazanemu argumentowi.
var arr=new Array(4);
arr; //[undefined, undefined, undefined, undefined]
typeof arr; //"object" - tablice to obiekty
Tablice to wyjątkowe obiekty z kilku powodów. Po pierwsze nazwy pól przechowujących elementy są liczbami numerowanymi od zera. Po drugie tablice mają pole length
, które przechowuje aktualną liczbę elementów tablicy. Inne obiekty takiego pola nie posiadają. Po trzecie mają kilka wbudowanych metod oprócz odziedziczonych po Object
.
Pole length
może zostać ustawione także przez programistę. Przypisanie większej liczby niż aktualna spowoduje utworzenie dodatkowych elementów o wartości undefined
, przypisanie mniejszej liczby usunie elementy z tablicy.
Poniżej przedstawiam opis kilku wybranych i przydatnych metod Array
.
push()
- dodaje element będący argumentem metody na koniec tablicy, zwraca aktualną tablicę,pop()
- usuwa element z końca tablicy, który zwraca jako wynik,sort()
- dokonuje sortowania tablicy, zwraca referencję do niej,join()
- zwraca ciąg znaków będący wynikiem połączenia elementów tablicy, zlepionych wartością będącą parametrem metody,slice()
- zwraca fragment tablicy, bez modyfikowania oryginału, argumentami metody jest przedział do skopiowania,splice()
- modyfikuje tablicę źródłową, zwraca usunięty przedział i opcjonalnie wypełnia lukę podanymi elementami.
Function
Okazuje się, że w JS funkcje to także obiekty! Istnieje konstruktor Function()
, przy pomocy którego można tworzyć funkcje. Jest to jednak niepolecany sposób postępowania.
//trzy równoważne sposoby tworzenia funkcji:
function sum(a,b){ return a+b; }
sum=function(a,b){ return a+b; };
sum=new Function('a', 'b', 'return a+b;');
sum=new Function('a, b', 'return a+b;'); //argumenty w jednym ciągu znaków
sum(1,2); //3
Na początku należy przekazać argumenty funkcji w postaci tekstowej, oddzielne lub w jednym ciągu. Ostatnim argumentem powinno być ciało funkcji, również w postaci tekstowej. Taki sposób ma te same wady co funkcja eval()
, ponieważ przekazany kod musi zostać sprawdzany w momencie uruchomienia konstruktora.
Poniżej lista kilku pól, które posiadają funkcje.
constructor
- to pole, które miałeś okazję już poznać, zwraca referencję do konstruktoraFunction()
,length
- przechowuje liczbę parametrów funkcji,caller
- to pole, którego nie ma w standardzie ECMA, ale jest powszechnie implementowane w przeglądarkach, przechowuje referencję do funkcji, która wywołała naszą funkcję,prototype
- to bardzo ważne pole, które opiszę dokładniej w kolejnych częściach,prototype
przechowuje obiekt; przydaje się wyłącznie gdy funkcja jest konstruktorem; wszystkie obiekty, stworzone przy pomocy danej funkcji posiadają pola obiektuprototype
.
Oto kilka przykładów.
function A(a, b){return a+b;}
A.constructor; //Function()
A.length; //2 - bo przyjmuje 2 parametry
function B(){ return B.caller; } //użycie własności caller
function C(){ return B(); }
C(); //function C(){ return B(); }
//przykład użycia prototype
var obroza={ imie: "Jan" }
function Pies(){}; //prototype jest pustym obiektem
Pies.prototype=obroza; //przypisujemy obiekt do prototype
var azor=new Pies();
azor.imie; //obiekt ma dostęp do pól prototype konstruktora
Poznałeś pola obiektu Function
, teraz czas na metody. Pierwszą z nich jest toString()
, która zwraca kod źródłowy funkcji. Dwie bardzo przydatne metody to: call()
oraz apply()
. Umożliwiają wywołanie metod innych obiektów jak swoich własnych. Przykład poniżej.
var ob1={ imie: "Jan", powiedzImie: function(){ console.log(this.imie); } };
ob1.powiedzImie(); //"Jan"
var ob2={ imie: "Marek" };
ob1.powiedzImie.call(ob2); //"Marek"
Co się stało? Wywołaliśmy metodę call
, która podmieniła this
danego obiektu na referencję innego obiektu. Dlatego właśnie this.imie
zwróciło wartość "Marek"
. Jeśli funkcje przyjmują parametry to robimy tak jak poniżej.
ob1.powiedzImie.call(ob2, 'a', 'b', 'b');
Jeśli pierwszym parametrem będzie null
lub coś innego niż obiekt, to funkcja zostanie wywołana na rzecz obiektu globalnego.
Czas na funkcję apply()
. Poniżej przykład.
ob1.powiedzImie.call(ob2, 'a', 'b', 'b');
ob1.powiedzImie.apply(ob2, ['a', 'b', 'b']);
Powyższe dwie linijki dają dokładnie ten sam wynik. Różnica polega na sposobie przekazania parametrów. W przypadku apply()
należy umieścić je w tablicy.
arguments
Czy pamiętasz co to za obiekt? Poznałeś go wcześniej jako tablicę, która jest tworzona automatycznie w każdej funkcji i zawiera wszystkie parametry, które zostały przekazane. Jest to twór podobny do tablicy, ale nie jest nią. Przykładowo nie posiada takich metod jak sort()
czy slice()
.
arguments
posiada interesujące pole - callee
. Jest to referencja do aktualnie wywoływanej funkcji.
function f(){ return arguments.callee; }
f(); //function f(){ return arguments.callee; }
Do czego może się to przydać? Przykładowo do rekurencyjnego wywołania funkcji anonimowej.
(
function(counter){
if(counter<5){
console.log(counter);
arguments.callee(++counter);
}
}
)(1)
W tym artykule to wszystko. Przejdź do następnej części: