Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Javascript » Metod-bind

Метод bind()

Сегодня мы рассмотрим метод bind(), но для начала нужно разобраться что же это такое. В переводе с английского означает «привязывать»,  «связывать».  Этот метод служит для привязки контекста, а также аргументов. Прежде чем, начать изучать метод bind() рассмотрим вот такой вот код:

var square = {
  side: 10,
  area: function() {
    alert( Math.pow(this.side,2) );
  }
};

setTimeout(square.area, 1000); // NaN площадь квадрата не посчитана

Что произошло, почему площадь квадрата не была вычислена? А всё дело в том, встроенный метод setTimeout получил функцию square.area, но не её контекст. Как же поступить в этом случае? Можно воспользоваться разными способами.

Оборачивание вызова

Попробуем обернуть наш вызов в анонимную функцию:

var square = {
  side: 10,
  area: function() {
    alert( Math.pow(this.side,2) );
  }
};

setTimeout(function(){
square.area();
}, 1000); // 100

Теперь вроде бы всё в порядке, но в этом способе есть один большой недостаток. Во время срабатывания setTimeout в переменную square может быть записано другое значение и результат соответственно может быть другим.

Встроенный метод bind

В JavaScript существует встроенный метод bind, благодаря которому жестко привязывается контекст к функции. Он имеет следующий синтаксис:

var wrapper = func.bind(context[, arg1, arg2...argN])

Давайте перепишем, наш предыдущей пример с использованием этого метода:

var square = {
  side: 10,
  area: function() {
    alert( Math.pow(this.side,2) );
  }
};

setTimeout( square.area.bind(square), 1000); // 100

В этом примере я не применял аргументы. Аргументы используются довольно редко, но они позволяют создавать новые функции. На них мы не будем заострять внимание.

Вспомогательная функция bind

Есть ещё один способ привязать контекст функции — это попробовать самим создать функцию bind:

function bind(func, context) {
  return function() {
    return func.apply(context, arguments);
  };
}

Эту функцию я позаимствовал отсюда: bind. Давайте теперь взглянем как будет работать эта функция (принцип почти такой же, как у встроенного метода):

function bind(func, context) {
  return function() {
    return func.apply(context, arguments);
  };
}

var cube = {
  side: 10,
  area: function() {
    alert( Math.pow(this.side,3) );
  }
};

setTimeout( bind(cube.area, cube), 500); // 1000

Вот таким образом мы легко привязали контекст объекта cube. Надеюсь вам понравился урок, не забываем ставить лайки!



наверх