Если вы разработчик javascript, вы, должно быть, использовали или слышали о трех методах:
- связывать
- вызов
- применять
Что ж, если у вас нет: позвольте мне кратко рассказать об этих методах -
bind, call и apply используются для установки контекста метода во время выполнения.
Дополнительное описание см. В этой статье - https://medium.com/@leonardobrunolima/javascript-tips-apply-vs-call-vs-bind-d738a9e8b4e1
В этой статье я расскажу только о привязке и о том, почему ее следует использовать с осторожностью.
bind создает новый метод, который предоставил контекст.
e.g -
function fullName() { return this.firstName + ' ' + this.lastName; }
если вы вызовете этот метод, вывод будет «undefined undefined»
это потому, что значение this в методе по умолчанию - window. Давайте исправим этот метод, чтобы он возвращал допустимое значение с помощью привязки.
function fullName() { return this.firstName + ' ' + this.lastName; } var user = { firstName: 'ujjwal', lastName: 'gupta' } var fullNameWithContext = fullName.bind(user); fullNameWithContext();
В приведенном выше методе мы создали новый метод fullNameWithContext, используя bind, предоставляющий значение «user», поэтому значение «this» будет «user» внутри метода «fullNameWithContext».
Итак, теперь вывод - «удджвал гупта».
Что ж, это решает проблему и возвращает действительный результат.
Давайте посмотрим на другую проблему из реальной жизни, где у нас есть следующие требования -
- Есть кнопка «Отправить», которая при нажатии отправляет данные на сервер.
- После отправки данных нам нужно удалить кнопку отправки и показать удобное сообщение.
Требование - 1
Считайте, что наш html-код
<div id="divContainer"> <button id="btnSubmit">Submit</button> </div>
Для простоты (обычно данные собираются из html-формы), учтите, что наши данные хранятся внутри такой переменной -
var user = { firstName: 'ujjwal', lastName: 'gupta', gender: 'male', address: "Bengaluru india" }
Теперь давайте зарегистрируем событие «клик» на кнопке отправки.
function submitData() { fetch("url", { data: { name: this.firstName + ' ' + this.lastName, gender: this.gender, address: this.address, isNewuser: true } }) } var el = document.querySelector('#btnSubmit'); el.addEventListener('click', submitData.bind(user));
В вышеупомянутом методе мы зарегистрировали событие «щелчок» с помощью прослушивателя событий, созданного с помощью привязки.
Первое требование выполнено. Давайте решим наше следующее требование -
Требование 2
Уберем кнопку
function submitData() { fetch("url", { data: { name: this.firstName + ' ' + this.lastName, gender: this.gender, address: this.address, isNewuser: true } }).then(_ => { var el = document.querySelector('#btnSubmit'); var container = document.querySelector('#divContainer'); // remove button from dom container.removeChild(el); // remove event registered el.removeEventListener("click", submitData.bind(this)) }) }
вышеуказанная реализация будет работать хорошо, но есть проблема с удалением прослушивателя событий.
// remove event registered el.removeEventListener("click", submitData.bind(this))
Здесь мероприятие не будет удалено из-за
когда вы устанавливаете контекст с помощью bind, создается новая функция.
Методы являются объектами в javascript, и два объекта, даже с одинаковым значением, не равны при сравнении с оператором «==».
На приведенном выше снимке экрана показано, что методы, созданные с использованием привязки, даже с одинаковым значением не равны.
Теперь вернемся к нашему решению. С помощью этой реализации мы создали утечку памяти в нашем коде, поскольку кнопка элемента имеет событие. Так что кнопка не будет удалена сборщиком мусора.
Вот почему я сказал использовать «связывайте с осторожностью».
Это частая ошибка, в основном при использовании класса es6. Там, где мы используем метод класса в качестве прослушивателя событий и чтобы сохранить значение this, мы используем bind.
e.g -
class User { constructor(name) { this.name = name; } registerEvent() { var el = document.querySelector('#btnSubmit'); el.addEventListener('click', this.onSubmit.bind(this)); } onSubmit() { console.log("name", this.name); } clearEvent() { var el = document.querySelector('#btnSubmit'); el.removeEventListener('click', this.onSubmit.bind(this)); } } const user = new User("ujjwal gupta"); user.registerEvent(); user.onSubmit(); user.clearEvent();
Давайте исправим это -
function submitData() { fetch("url", { data: { name: this.firstName + ' ' + this.lastName, gender: this.gender, address: this.address, isNewuser: true } }) } var el = document.querySelector('#btnSubmit'); var submitDataWithContext = submitData.bind(user); el.addEventListener('click', submitDataWithContext);
Здесь мы сохранили метод в переменной submitDataWithContext и используем эту переменную при регистрации события.
Теперь, если мы удалим событие, указав «submitDataWithContext», тогда событие будет удалено, так как это то же значение, которое использовалось для регистрации события.
el.removeEventListener('click', submitDataWithContext);
Я оставлю реализацию показа «сообщения после представления данных» вам, ребята.
Спасибо, что прочитали. Если вы нашли эту статью полезной, поделитесь ею со своим другом и не забудьте аплодировать :).