JavaScript

Metody

  • 2009-01-07 20:54
  • 3 komentarze
  • 2377 odsłon
  • Oceń ten tekst jako pierwszy
To mój pierwszy artykuł więc sugestie i wyrozumiałość mile widziana.
Metody w javascript to dość proste zagadnienie w kilku przykładach powinno być wszystko jasne ;)

funtion nazwa(arg1, arg2, ...) {
  //instrukcje
}


nazwa - nazwa funkcji
arg1, arg2, ... - argumenty funkcji

Przykład prostej funkcji która coś robi:

funtion suma(a, b) {
    return a+b;
}


Funkcja ta dokona sumy dwóch liczb i zwróci je. Wywołanie może wyglądać następująco:

var liczba = 10;
alert(suma(liczba, 5));

Fragment ten powinien wyświetlić komunikat z liczbą "15". To już większości pewno wystarczy bo widzieli to w większości języków programowania, ale javascript pozwala tworzyć większe cuda.

Argumenty

Argumenty mogą być dowolnego typu, często można się spotkać z metodami które za argument pobierają obiekt który jest tworzony "w locie". Np.:

mojaFunkcja({id: 'poleTekstowe', value: 'Hello World'});

W funkcji jest to widziane jako po prostu jeden obiekt. Przykładowo taka funkcja może mieć taką definicje:

function mojaFunkcja(obj) {
    document.getElementById(obj.id).value = obj.value;
}

Nie ma problemu aby jeden argument był zwykłą zmienną inny obiektem albo nawet raz jednym raz drugim. Przykładowo:

function mojaFunkcja(arg) {
    if (typeof(arg)=='object') {
        document.getElementById(arg.id).value = arg.value;
    } else if(typeof(arg)=='string') {
        alert(arg);
    }
}

Powyższa funkcja w zależności od tego jakiego typu argument dostanie wykona różne działania.

W javascript nie ma jawnych domyślnych argumentów jak to jest w większości języków programowania, co nie znaczy że jest to niemożliwe. Po prostu wywołujemy daną funkcje bez jakiegoś argumentu a obsługę takiego przypadku robimy w samej funkcji. Popatrzmy na przykład

function mojaFunkcja(a, b){
    var text = 'a='+a;
    if (b) {
        text += '\nb='+b;
    } else {
        text += '\nnie podano drugiego argumentu';
    }
    alert(text);
}


mojaFunkcja('kot', 'ala');
mojaFunkcja('pies')


Powyższe wywołania funkcji wyświetla 2 komunikaty:
a=kot
b=ala

oraz:
pies
nie podano drugiego argumentu


W ten oto prosty sposób można przypisać domyślną wartość na wypadek braku któregoś argumentu przez co nasze funkcje mogą być bardziej uniwersalne i bardziej elastyczne.

Metoda domyślna
Tworząc/edytując jakiś obiekt można od razu przypisać do niego metodę. Składnia skraca się o jej nazwę (bo i tak jest zbędna gdyż wywołanie nastąpi automatycznie po kliknięciu w link nazwa nie jest nigdzie potrzebna.) np:

var a = document.createElement("a");
a.href="http://4programmers.net";
a.onclick = function() {
    alert('jestem linkiem');
    return false;
}
document.body.appendChild(a);

podobnym sposobem można w prosty sposób przekazać różne metody w obiekcie które miały by robić coś specyficznego w różny sposób, który zależałoby od argumentu. Najlepiej na przykładzie:

function mojaFunkcja(a,b,c,obj){
    var wynik1 = obj.dzialanie1(a,b);
    var wynik2 = obj.dzialanie1(c,b);
    obj.dzialanie2(wynik1, wynik2);
    return obj.ret;
}

i przykładowe wywalanie:
var wynik = mojaFunkcja(1,2,3,{
ret: 0,
dzialanie1: function(a,b){
    this.return = a+b;
    return this.return;
},
dzialanie2: function(a,b){
    this.return = a*b-this.return;
}
});

Jak widać mojaFunkcja nie robi nic szczególnego więcej zależy od jej argumentów. Kiedy to się może przydać? Kiedy np. chcemy coś porównać nieznane obiekty, mogłyby one posiadać zdefiniowane operacje jakie trzeba wykonać przy porównaniu. Możliwości są nie ograniczone, wywołania takie spotkamy korzystając z dowolnej biblioteki js. Wygodniej jest obsłużyć jeden obiekt jako argument niżeli dziesiątki różnych argumentów których kolejność łatwo pomylić.

Warto również wspomnieć o zasięgu zmiennych. wewnątrz funkcji widoczne są wszystkie zmienne za deklarowane w skrypcie np.:
var liczba = 1;
function dodajDoLiczby(x){
    liczba += x;
}
dodajDoLiczby(5);
alert(liczba);

Jednak zmienne za deklarowane wewnątrz funkcji nie są widoczne poza nią.
function deklarujLiczbe(x){
    var liczba = x;
}
deklarujLiczbe(5);
alert(liczba); // to wywołanie nie przyniesie efektów gdyż liczba przestanie istnieć po zakończeniu działania funkcji

Aby odwołać się wewnątrz funkcji do składowych obiektów korzystamy z this.element (przyklad jeden z wcześniejszych).

Moim zdaniem szkoda czasu na czytanie dalej co można, zachęcam do ćwiczenia i testowania różnych rozwiązań. Njaczęściej jest tak że jak sie zastanawiamy czy coś zadziała to pewno będzie działać o ile nie pomylimy się w kodzie.

3 komentarze

Deti 2009-01-07 18:19

Miałem na myśli argumenty funkcji i co jeśli nie podamy ich przy wywołaniu.

Mifczu 2009-01-06 23:50

"nie zdefiniowany" a gdzie się pojawia? Pewno literówka bo pisałem z głowy.

Deti 2009-01-06 23:48

Przydała by się jeszcze informacja co to jest 'undefined'