Использование function.prototype.bind () в EventListeners

Question

Я видел этот код:

Function.prototype.bind = function (bind) {
    var self = this;
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return self.apply(bind || null, args);
    };
};

в некоторых реализациях на javascript и используется для дескриптора EventListener

element.addEventListener('mousedown', this.mykeydownhandler.bind(this), false);

может объяснить мне эту функциональность

Answer 1

Это просто стандартная реализация стандартной функции Function.bind:

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

Это должно быть обернуто с определением функции сортировки, чтобы оно использовалось только для браузеров с задним числоммеханизм JavaScript.

Проблема в том, чтобы просто сказать следующее:

element.addEventListener('mousedown', this.mykeydownhandler, false);

Это то, что this.mykeydownhandler является несвязанной функцией, и значение this внутри этой функции будетопределяется, когда это называется.Таким образом, если mykeydownhandler зависит от того, что является this, тогда у вас не будет правильного контекста, когда событие инициируется.Когда вы говорите это:

element.addEventListener('mousedown', this.mykeydownhandler.bind(this), false);

, используя либо собственный bind, либо замену доморощенного в вашем вопросе, this в вызове addEventListener будет таким же, как this внутри mykeydownhandler.

Answer 2

По сути, он гарантирует, что ключевое слово this в функции обработчика событий установлено правильно во всех браузерах.В некоторых браузерах это не так.

Я избегаю проблемы this, используя замыкания и более надежные переменные, но это альтернативный метод достижения того же результата.