Метод привязки позволяет объекту заимствовать метод у другого объекта. Это позволяет нам вручную устанавливать ключевое слово this для любого вызова функции. Он возвращает новую функцию, к которой привязано ключевое слово this. Давайте посмотрим на пример, чтобы лучше понять этот метод.
Рассмотрим следующий объект:
В приведенном выше объекте у нас есть автобусная компания под названием transline, которая имеет массив заказов, код транзита и функцию book, которая принимает номер автобуса и имя пассажира в качестве аргументов. Если бы мы хотели забронировать место для пассажира, мы бы вызвали функцию book в объекте transline следующим образом:
На консоль будет выведено следующее:
Теперь предположим, что у нас есть новая автобусная компания под названием GCoach. Мы создадим новый объект с деталями GCoach следующим образом:
Теперь предположим, что мы хотим забронировать место для пассажира, используя функцию бронирования из объекта transline в объекте gCoach. Используя метод bind, мы можем вызвать функцию book из объекта transline следующим образом:
На консоль будет выведено следующее:
Теперь предположим, что мы хотим создать бронирование для нескольких пассажиров для определенной автобусной компании (gCoach) с определенным номером автобуса (23). Мы бы достигли этого следующим образом:
В приведенном выше фрагменте мы передали первый параметр в функцию книги (busNum), а затем мы передали второй аргумент (passengerName). Этот метод передачи первого параметра в функцию называется частичным применением, что означает, что часть аргументов исходной функции уже установлена.
На консоль будет выведено следующее:
Давайте теперь посмотрим, как мы можем использовать метод связывания с прослушивателями событий.
Начнем с добавления нового свойства к объекту transline, установив количество автобусов равным 50 (transline.buses = 50), и добавим еще один новый метод. для добавления количества автобусов, когда мы нажимаем кнопку (this.buses++)следующим образом:
Давайте теперь присоединим наш обработчик событий к этому свойству следующим образом:
Когда мы нажимаем кнопку на веб-странице, в консоли выводится следующее:
Однако это не тот результат, которого мы ожидали. вывод this.planes теперь NaN. Причина этого вывода в том, что это ключевое слово является элементом кнопки. Это связано с тем, что в функции обработчика событий ключевое слово this всегда указывает на элемент, к которому прикреплен этот обработчик. Обработчик в данном случае — transline.buyBuses, который присоединен к элементу document.querySelector(“button”). Поэтому внутри функции transline.buyBuses ключевое слово this будет указывать на элемент кнопки. Вот почему ключевое слово this возвращает ‹button class="myButton"›Button‹/button›. Однако нам нужно, чтобы ключевое слово this указывало на сам объект transline, чтобы получить ожидаемый результат.
Чтобы решить эту проблему, мы можем просто добавить метод привязки следующим образом:
Когда мы нажмем кнопку на веб-странице, на консоль будет выведено следующее:
