Blog webdeveloperski Patryk yarpo Jar

Uruchamianie funkcji w odpowiednim kontekście

Autor wiadomości Grudzień 14, 2011

Ostatnio kolega (zapraszam na jego blog) zapytał mnie jak uruchomić funkcję obsługi zdarzenia (ang. event handler) w odpowiednim kontekście - słowem: jak sterować kontekstem funkcji w JavaScript:

domNode.addEventListener("click", function() {
    console.log(this === window, this === domNode);
} , false);

Idąc tropem opisanym we wpisie o operatorze `this' zaproponowałem wykorzystanie metody `apply' bądź `call':

function handler()
{
console.log(this === window, this); // this === Number (obiekt liczby = 1)
}
domNode.addEventListener("click", function() { handler.apply(1); } , false);

Działa to tak jak oczekiwano - starczy podać jako parametr metody `apply' odpowiedni kontekst. Nie musi to wcale być jakiś skomplikowany obiekt. Powyżej przekazałem po prostu wartość `1', która została zrzutowana do obiektu Number.

Zapis ten jednak nie jest idealny - głównie z powodu swojej długości. Po krótkiej burzy mózgów wspomniany kolega wymyślił coś co uważam, za bardzo przyjemne, zwięzłe i zrozumiałe:

function handler()
{
console.log(this === window, this);
}

function bind(scope, fn)
{
    return function ()
    {
        fn.apply(scope, arguments);
    };
}
domNode.addEventListener("click", bind(domNode, handler), false);

I jak tu nie lubić JS 😉

We wpisie wykorzystywałem metodę addEventListener. Jeśli nie wiesz do czego służy warto się zapoznać z dokumentacją:

Jestem zdania, że operacje związane z przypisywaniem zdarzeń, dużo łatwiej robić z wykorzystaniem odpowiedniej biblioteki:

Dodano 10-10-2013 r.

Do JavaScript 1.8.5 została dodana natywna funkcja `bind':

Proponuje zatem wzbogacić wcześniejszy kod o dodatkowy warunek:

if (!Function.prototype.bind)
{
    function bind(scope, fn)
    {
        return function ()
        {
            fn.apply(scope, arguments);
        };
    }
}
Komentarze (0) Trackbacks (1)

Leave a comment