"함수 콜백"과 "정상 함수"의 실제 차이점은 무엇입니까?


대답 1:

콜백 함수는 일반적인 함수이며 다른 함수에 매개 변수로 전달되는 것입니다. 문서에 버튼이 있다고 가정하면 다음 코드를 사용할 수 있습니다.

function logElementText (eventOrElement) {if (! eventOrElement) {throw new RefernceError ( '이벤트 또는 요소가 없습니다.'); } if (eventOrElement.target) {// 이벤트 객체가 전달되었습니다. console.log (eventOrElement.target.textContent); } else {// 요소가 전달되었다고 가정합니다. console.log (eventOrElement.textContent); }} var button = document.querySelector ( 'button'); // logElementText를 콜백으로 사용할 수 있습니다. button.addEventListener ( 'click', logElementText); // 또는 함수를 직접 호출 할 수 있습니다. logElementText (button);

addEventListener를 통해 logElementText를 콜백으로 전달할 수있는 방법에 주목하십시오.이 경우 버튼에서 클릭 이벤트가 발생할 때 실행되거나 함수를 직접 호출하여 요소를 전달할 수 있습니다. .

이 경우 콜백은 브라우저의 이벤트 처리 메커니즘에 의해 실행되었지만 직접 수행 할 수도 있습니다.

함수 loadSomeData (url, 콜백) {if (! url) {throw new ReferenceError ( 'No URL provided'); } if (! callback || typeof callback! == 'function') {throw new TypeError ( '콜백이 함수가 아닙니다'); } var xhr = 새로운 XMLHttpRequest (); xhr.open ( 'GET', url, true); xhr.onload = function () {if (xhr.status <400) {// 여기에서 제공된 콜백을 실행합니다. 콜백 (xhr.response); } else {console.log ( '아, 뭔가 잘못 됐어 :('); console.log (xhr.statusText);}} xhr.send ();} function displayData (data) {console.log (data); } loadSomeData ( '/ fetch-data? format = json', displayData); displayData ({firstName : 'Andy', lastName : 'Farrell', 위치 : 'England', 취미 : [ 'photography', 'software development'] });

15 행에서 콜백 매개 변수가 함수 인 것처럼 단순히 호출하는 방법을 참조하십시오. 또한 5 행에서 콜백이 실제로 기능하도록 방어 조치를 취합니다.

마지막으로 콜백은 종종 익명 함수, 즉 이름이없고 인라인으로 전달되는 함수로 제공됩니다.

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

여기서는 loadSomeData의 두 번째 매개 변수로 기존 함수를 제공하는 대신 익명 함수를 직접 제공합니다. 다시 말해, 앞의 예에서 31 행의 displayData 함수에 객체 리터럴을 제공 한 것과 마찬가지로 함수 리터럴을 제공합니다.

이 모든 것이 작동하는 이유는 JavaScript 함수에서 일류 객체, 즉 다른 객체와 똑같기 때문입니다. 변수를 함수로 지정할 수 있고 함수는 속성 및 메서드 (호출 및 적용과 같은)를 가질 수 있습니다 )를 다른 함수에 매개 변수로 전달할 수 있습니다.


대답 2:

기능 콜백 : 일부 이벤트에서 일부 작업을 수행하려는 경우

버튼 클릭시 시간 표시처럼.

그런 다음 해당 버튼의 클릭 기능을 무시합니다.

따라서 (시간에 따라) 해당 버튼을 클릭 할 때마다 해당 응용 프로그램 내부 프레임 워크는 onclick 이벤트를 호출하고 onclick 함수가 호출됩니다.

정상 기능 : 모든 기능이 정상 기능입니다.