Metody: bind, call, apply w JavaScript

Obiekty w JavaScript posiadają swoje właściwości oraz metody. Można bezpośrednio w obiekcie zapisać metodę, która następnie będzie wywoływana. To by jednak oznaczało, że jeżeli na obiekcie potrzebujemy wywołać kilka metod wszystkie muszą się w nim pojawić. Jeszcze gorszym przypadkiem jest posiadanie wielu obiektów i w każdym z nich wywoływanie tych samych metod [wersja (1) na poniższym wykresie].

Rozwiązaniem tego problemu, są właśnie metody call, bind, apply. Każda z nich pozwala nam połączyć metodę z obiektem czyli podać funkcji dane do pracy. Dzięki temu jak widać na poniższej grafice nie mnożymy metod (Function A i B, są użyte do różnych obiektów).
bind, call, apply

Bind()

Call() i Apply()

Najpierw przykład bez użycia metod bind, call, apply

Obiekt, w którym jedna metoda w całości została wrzucona do jego wnętrza, a druga przypisana (obie jak widać robią to samo).

var car0 = {
    name: "toyota",
    year: 2012,
    doors: 3,
    color: "black",
    show: showcar,
    show2: function showthiscar(more) {
        return console.log( this.name + " " + this.year + " " + this.doors + " " + this.color + " - " + more);
    }
}
function showcar(more) {
    return console.log( this.name + " " + this.year + " " + this.doors + " " + this.color + " - " + more);
}
car0.show("auto Oli - cała metoda w obiekcie");
car0.show2("auto Jana - przypisanie metody w obiekcie");

Wywołanie jest proste jednak w kodzie zrobił się straszny śmietnik. Przy większej liczbie obiektów oraz metod trudno byłoby się na dłuższą metę w tym połapać. Gdybyśmy jeszcze chcieli pisać aplikację w modelu MVC to taka praktyka jest już całkowicie zakazana.

O wiele lepiej można to zrobić z użyciem metod: Bind() Call() Apply()

var car1 = {
    name: "mazda",
    year: 2015,
    doors: 5,
    color: "red",
}
var car2 = {
    name: "volvo",
    year: 2016,
    doors: 4,
    color: "white"
}
function showcar(more) {
    return console.log( this.name + " " + this.year + " " + this.doors + " " + this.color + " - " + (more || ""));
}

Bind()

Najpierw przypisanie do zmiennej, a następnie wywołanie z podaniem w nawiasie argumentu.

var some = showcar.bind(car1);
some("auto Jacka - bind car1");

var some2 = showcar.bind(car2);
some2("auto Jacka - bind car2");

Call() i Apply() bez argumentów

Jeżeli nie dodajemy, żadnych argumentów to nie ma między nimi różnicy:

showcar.call(car1);
showcar.apply(car2);

Call() z argumentami

showcar.call(car1, "auto Marka - call car1");
showcar.call(car2, "auto Marka - call car2");

Apply() z argumentami

showcar.apply(car1, ["auto Joli - apply car1"]);
showcar.apply(car2, ["auto Joli - apply car2"]);

Efekt działania powyższego, który widoczny będzie w konsoli przeglądarki.
bind, call, apply

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij