JavaScript Метод Function.bind

Рубрика: JavaScript 101

Закрытия могут быть особенно полезными, имея дело с обратными вызовами. Однако, часто лучше использовать конструкцию Function.bind, которая избежит любых издержек, связанных с обходом контекста.

Function.bind в JavaScript используется, чтобы создать новую функцию. При вызове новая функция затем вызывает себя в контексте предоставленного значения this, используя заданный набор параметров, которые будут предшествовать любым параметрам, обеспеченным, когда новая функция была первоначально вызвана.

Поскольку .bind() была добавлена в ECMAScript 5, она, возможно, не присутствует во всех браузерах, поэтому следует подумать, решая, использовать ли эту возможность. Однако, можно обойти эту поддержку при использовании этого контейнера от MDN:

// Контейнер от MDN
if (!Function.prototype.bind) {
 
    Function.prototype.bind = function( oThis ) {
 
        if (typeof this !== "function") {
            // ближайшая возможная
            // к внутренней ECMAScript 5
            // функции IsCallable
            throw new TypeError( 
              "Function.prototype.bind \
             - то что пытается быть \
             привязано нельзя вызвать" );
        }
 
        var fSlice = Array.prototype.slice,
            aArgs = fSlice.call( arguments, 1 ),
            fToBind = this,
            fNOP = function() {},
            fBound = function() {
                return fToBind.apply( this
                  instanceof fNOP
                    ? this
                    : oThis || window,
                    aArgs.concat( fSlice.call( 
                      arguments ) ) );
            };
 
        fNOP.prototype = this.prototype;
 
        fBound.prototype = new fNOP();
 
        return fBound;
    };
}

Одно из самых простых использований .bind() - создание функции, которая вызывается с частным значением для this, независимо от того, как она вызываются. Частая ошибка, которую делают разработчики, - попытка извлечь метод из объекта, а затем вызов метода позднее и ожидание, что он будет использовать объект-источник в качестве this. Однако, это может быть решено, создавая связанную функцию, используя исходный объект как продемонстрировано ниже:

Пример

// Простой пример манипуляции "this".
var user = "Петя";
var module = {
    getUser: function() {
        return this.user;
    },
    user: "Вася"
};

// module.getUser() вызывается, где "module" является "this"
// и "module.user" возвращается.

// Вася
module.getUser();

// давайте теперь сохраним ссылку
// в глобальной версии "this"
var getUser = module.getUser;

// getUser() вызывается, "this" является
// глобальным, "user" возвращается

// Петя
getUser();

// сохраним ссылку с "module", привязанную как "this"
var boundGetUser = getUser.bind( module );

// boundGetUser() вызывается, "module" является
// "this" снова, "module.user" возвращается.

// Вася
boundGetUser();

Попробуйте Сами »

Далее: Итерация по не-jQuery Объектам - $.each ()

Смотрите также

Комментарии

Написать