Если вы разработчик javascript, вы, должно быть, использовали или слышали о трех методах:

  1. связывать
  2. вызов
  3. применять

Что ж, если у вас нет: позвольте мне кратко рассказать об этих методах -

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. Есть кнопка «Отправить», которая при нажатии отправляет данные на сервер.
  2. После отправки данных нам нужно удалить кнопку отправки и показать удобное сообщение.

Требование - 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);

Я оставлю реализацию показа «сообщения после представления данных» вам, ребята.

Спасибо, что прочитали. Если вы нашли эту статью полезной, поделитесь ею со своим другом и не забудьте аплодировать :).