Function.prototype.bind с нулевым аргументом

Я довольно запутался в методе Function.prototype.bind().

function playsound(raw) {        
}

function onfilechange(then, evt) {
    var reader = new FileReader();
    reader.onload = function (e) {
        console.log(e);
        then(e.target.result);
    };
    reader.onerror = function (e) {
        console.error(e);
    };
    reader.readAsArrayBuffer(evt.target.files[0]);
}


document.getElementById('file')
  .addEventListener('change', onfilechange.bind(null, playsound), false);

Может кто-нибудь объяснить мне, что делает этот фрагмент кода? this - это нулевой и второй аргумент - это функция playsound. Я не совсем понимаю, как использовать эту строку ниже.

onfilechange.bind(null, playsound)

Ответ 1

Это, вероятно, сделано для того, чтобы сделать код более читаемым. Как вы видите, onfilechange принимает первый аргумент в качестве обратного вызова, который будет вызван после FileReader загружен, второй как Event объект для извлечения файла.

Без .bind() добавление слушателя событий будет выглядеть как

document.getElementById('file')
    .addEventListener('change', function(event) {
        onfilechange(playsound, event);
    }, false);

С .bind() вы получаете более короткий код, а функция playsound добавляется к вновь созданному списку аргументов функций. Объект Event добавляется к отправке событий.

Что .bind() is is (From MDN: Function.prototype.bind()):

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

Поэтому, когда вы вызываете его с помощью onfilechange.bind(null, playsound), он создает и возвращает новую функцию всегда, получая playsound в качестве первого аргумента и используя глобальный контекст (Потому что null используется как контекст), так же как и все обычные функции используют глобальный контекст, когда вы вызываете их без оператора new, а не используя .call() или apply() с определенным контекстом.