Quina és la diferència real entre "devolució de funció de funció" i "funció normal"?


Resposta 1:

Les funcions de devolució de trucada són funcions normals, només es passen com a paràmetres a altres funcions. Si suposem que tenim un botó al nostre document, podem utilitzar aquest codi:

function logElementText (eventOrElement) {if (! eventOrElement) {llançar RefernceError nou ('No es dóna cap esdeveniment ni element.'); } if (eventOrElement.target) {// Es va passar un objecte d'esdeveniment. console.log (eventOrElement.target.textContent); } else {// Assumeix que l'element s'ha passat. console.log (eventOrElement.textContent); }} botó var = document.querySelector ('botó'); // Podem utilitzar logElementText com a callback: button.addEventListener ('clic', logElementText); // O bé podem trucar directament a la funció: logElementText (botó);

Observeu com podem passar logElementText com una devolució de devolució mitjançant addEventListener, cas en què s'executa quan es produeix un esdeveniment de clic al botó, o simplement podem trucar directament a la funció i passar-la a un element, ja que està escrita perquè pugui gestionar els dos .

En aquest cas, la devolució de trucada ha estat executada pel mecanisme de maneig d'esdeveniments del navegador, però també podem fer-ho nosaltres mateixos:

function loadSomeData (url, callback) {if (! url) {llança el nou ReferenceError ("No es proporciona cap URL"); } if (! callback || typeof callback! == 'function') {throw new TypeError ('Callback no és una funció'); } var xhr = new XMLHttpRequest (); xhr.open ("GET", url, cert); xhr.onload = function () {if (xhr.status <400) {// Aquí és on executem la devolució de trucada proporcionada. callback (xhr.response); } else {console.log ("Oh estimat, ha anat malament :( '); console.log (xhr.statusText);}} xhr.send ();} funció displayData (dades) {console.log (dades); } loadSomeData ('/ fetch-data? format = json', displayData); displayData ({firstName: 'Andy', lastName: 'Farrell', location: 'England', hobbies: ['fotografia', 'software development']] });

Mireu com a la línia 15 simplement invocem el paràmetre de devolució de trucada com si fos una funció? També notem a la línia 5 que prenem algunes mesures defensives per assegurar-nos que la devolució és realment una funció.

Finalment, sovint es proporcionen trucades com a funcions anònimes, és a dir, funcions que no tenen nom i es transmeten en línia, com ara:

loadSomeData ('/ fetch-data? format = text', function (data) {var superiorCased = data.toUpperCase (); console.log (superiorCased);});

Aquí, en lloc de proporcionar una funció existent com a segon paràmetre a loadSomeData, només proporcionem una funció anònima directament; és a dir, que proporcionem una funció literal, de la mateixa manera que en l'exemple anterior vam proporcionar un objecte literal a la funció displayData de la línia 31.

La raó per la qual tot funciona és perquè en les funcions JavaScript són objectes de primera classe, és a dir, són com qualsevol altre objecte: podeu assignar una variable a una funció, una funció pot tenir propietats i mètodes (com trucar i aplicar ) i podeu passar-los com a paràmetres a altres funcions.


Resposta 2:

Callback de la funció: si voleu fer alguna operació en algun esdeveniment

Igual que mostrar temps fent clic sobre un botó.

Aleshores, substituïu la funció onclick per aquest botó.

Així, sempre que es faci clic en aquest botó (independentment de temps), el marc intern de l'aplicació cridarà esdeveniment onclick i es cridarà a la vostra funció onclick.

Funció normal: cada funció és normal.