среда, 12 ноября 2014 г.

Как работает Proxy-функция

$('#myElement').click(function() {
    $(this).addClass('aNewClass');  // В этой функции "this" - это наш DOM-элемент.
});

$('#myElement').click(function() {
    setTimeout(function() {  
        $(this).addClass('aNewClass'); // А так у нас проблема! В этой функции "this" - это не наш DOM-элемент!
    }, 1000);
});

// Используем фунцию proxy для устранения проблемы.

$('#myElement').click(function() {
   // ------------------v-------- Передадим в фунцию proxy нашу функцию
    setTimeout(proxy(function () {
        $(this).addClass('aNewClass');  // Теперь "this" снова ссылается на наш DOM-элемент.
    }, this), 1000);
   // ---^---------------------- и скажем ей, что мы хотим, чтобы наш DOM-элемент имел значение "this" внешней функции.
});

function proxy (func, obj) {
    if (typeof func !== 'function') {return;}
    if (!obj) {obj = this;} // Если obj пуст или передано что-то другое, то установить другой объект
    // ----------------------------v------------------ func - это функция, которую мы передали внутрь proxy.
    return function () {return func.apply(obj, arguments);}
    // ---------------------------------------^------ значение, которое мы хотим предать в качестве "this" ссылки на наш DOM-элемент.
}

Комментариев нет:

Отправить комментарий