Question

我对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)

Answer 1

这可能是为了使代码更具可读性。如您所见，onfilechange接受第一个参数作为在FileReader加载后调用的回调，第二个作为Event对象来检索文件。

如果没有.bind()添加事件监听器，则看起来像

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

使用.bind()可以得到更短的代码，并且playsound函数会被添加到新创建的函数的参数列表中。并且Event对象附加在事件发送上。

.bind()的作用是什么（来自MDN: Function.prototype.bind()）：

bind（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

因此，当您使用onfilechange.bind(null, playsound)调用它时，它会创建并返回新函数，始终接收playsound作为第一个参数并使用全局上下文（因为null用作上下文），就像所有常规函数都使用全局上下文一样，当您在没有new运算符的情况下调用它们而不使用.call()或apply()时上下文。

Function.prototype.bind，以null作为参数

1 个答案: