Kurs obiektowego JavaScript (18)

Obiekty i konstruktory wbudowane.

Obiekty w JavaScript można podzielić na trzy kategorie.

1. Data wrapper objects – odpowiadają za zarządzanie różnymi typami danych. Należą do nich: Object, Array, Function, Boolean, Number.
2. Utility objects – są to obiekty użytkowe i przydają się do wykonywania różnych operacji. Należą do nich Math, Date, RegExp.
3. 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 konstruktora Function(),
• 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 obiektu prototype.

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)