2014-12-26 11 views
18

Mi sono abbastanza confuso con il metodo Function.prototype.bind().Function.prototype.bind con null come argomento

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); 

Qualcuno può spiegarmi cosa fa questo frammento di codice? Il this è nullo e il secondo argomento è la funzione playsound. Non riesco a capire l'utilizzo dietro la linea sottostante.

onfilechange.bind(null, playsound) 

risposta

19

Questo è probabilmente fatto al fine di rendere il codice più leggibile. Come vedi, onfilechange accetta il primo argomento come callback da chiamare dopo il caricamento di FileReader, il secondo come oggetto Event per il recupero di un file.

Senza .bind() l'aggiunta di un listener di eventi sarà simile

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

Con .bind() si ottiene un codice più corto, e playsound la funzione viene anteposto alla lista argomenti della funzione appena creata. E l'oggetto Event viene aggiunto alla spedizione dell'evento.

Cosa .bind() fa è (da MDN: Function.prototype.bind()):

Il metodo bind() crea una nuova funzione che, quando viene chiamato, ha il suo questa parola chiave impostata al valore fornito, con una data sequenza degli argomenti precedenti a quelli forniti quando viene chiamata la nuova funzione.

Così, quando si chiama con onfilechange.bind(null, playsound), si crea e restituisce una funzione nuova, sempre ricevere playsound come primo argomento e l'utilizzo contesto globale (Perché null viene usato come contesto), proprio come tutte le funzioni normali utilizzare il contesto globale, quando li si chiama senza operatore new e non si utilizza .call() o apply() con un contesto specifico.

+1

E l'oggetto Evento è aggiunto all'evento di spedizione significa ?? Come si ottiene l'oggetto evento come argomento quando non si passa. – Shane

+2

Quando chiamate '.bind()', restituisce una funzione, non è un risultato, quindi questa funzione può essere utilizzata in futuro (in caso di invio di eventi nel vostro caso). L'oggetto 'Event' viene passato dal browser. – Zudwa

Problemi correlati