>웹 프론트엔드 >JS 튜토리얼 >자바스크립트 콜백 함수의 상세 분석(그래픽 튜토리얼)

자바스크립트 콜백 함수의 상세 분석(그래픽 튜토리얼)

亚连
亚连원래의
2018-05-18 17:09:321647검색

이 글에서는 주로 자바스크립트 콜백 함수 관련 지식 포인트와 사용법 코드 예시 분석을 소개합니다.

고급 언어들이 속속 등장하는 시대에, 각 언어마다 모든 것이 객체라는 자랑스러운 말을 갖고 있다고 주장하지만, 스크립팅 언어로서 js는 전통적인 객체지향 언어와는 많이 다릅니다 ​​java.js의 이상한 점 외에도 가장 매력적인 기능 중 하나는 콜백 기능이라고 비판하는 사람들이 많습니다. js 언어의 가장 눈에 띄는 기능입니다. 물론 모든 장점과 마찬가지로 자신의 요구를 만족시켜야 합니다. 예를 들어 많은 수의 콜백 함수를 사용하면 코드가 중복되고 복잡해집니다.

이 글은 콜백 함수를 학습한 저의 경험입니다. 완벽하지 않거나 오류가 발생할 수도 있습니다. 저의 무지를 용서하고 겸손하게 배우겠습니다. 나 자신을 향상시키세요.

JavaScript의 가장 독특한 점은 함수가 일류 시민이라는 것입니다. 저는 js를 모든 것이 변수이고 함수도 일종의 변수가 될 수 있는 고급 언어라고 부르는 것을 선호합니다. js에서는 이를 콜백 함수라고 부르기를 좋아합니다. 또한 js의 익명 함수를 함수 매개변수로 사용할 수 있으므로 콜백 함수는 함수와 유사합니다. C 언어의 포인터 - --포인터 포인터 포인터!!! 중요한 내용을 세 번 말해보세요

먼저 콜백 함수의 정의를 살펴보겠습니다

컴퓨터 프로그래밍에서 콜백은 인수로 전달되는 실행 가능한 코드 조각입니다. 편리한 시간에 인수를 콜백(실행)할 것으로 예상되는 다른 코드에

콜백 함수는 다른 코드에 매개변수로 전달되는 실행 가능한 코드 조각입니다. 그 기능은 이 코드 조각을 편리하게 호출하는 것입니다. (콜백 함수) 필요할 때.

콜백 함수

  function addSqua(num1, num2, callback){
    var sum = num1 + num2;
    return callback(sum);
  }
  
  function squa(num){
    return num*num;
  }
  
  let num = addSqua(1, 2, squa);    
  console.log(num);
  //=>9

익명 콜백 함수

익명 함수를 함수 매개변수로 함수에 직접 전달합니다. 이는 프로그래밍에서 일반적으로 사용하는 것입니다.

function addSqua(num1, num2, callback){
 var sum = num1 + num2;
 return callback(sum);
}
let num = addSqua(1, 2, function squa(num){
 return num*num;
});    
console.log(num); 
//=9

배열의 모든 메소드를 모방합니다

Array.prototype 모든

  Array.prototype.myEvery = function (callback) {
   if (typeof callback === 'function') {
    for (let i = 0; i < this.length; i++) {
     if (callback(this[i])) {
      return false;
     }   
    }
    return true;
   }
   return true;
  }
  
  let op = [3, 6, &#39;every&#39;, 9,&#39;each&#39;];
  op.myEvery(function (value) {
   console.log(value);
  })
  // 3
  // 6
  // &#39;every&#39;
  // 9
  // &#39;each&#39;

와 유사한 메소드를 추가합니다. 콜백 함수의 특징

    은 정의에 지정된 대로 즉시 실행되지 않습니다. 코드 조각인 콜백 함수는 필요에 따라 특정 조건에서 실행될 수 있습니다. , 콜백 함수를 매개변수로 사용함 함수에 전달 시 함수 정의만 전달되며 바로 실행되지는 않습니다.
  1. 이것은 ES6에서 화살표 함수를 도입한 경우 콜백 함수를 작성할 때 특별한 주의가 필요합니다. 이것은 ES6에서 화살표 함수를 사용하는 경우 비용을 지불해야 합니다. Arrow 함수에 대한 내용은 없습니다. 관심이 있으시면 다시 포털을 제공하는 ES6 Ruan Yifeng을 확인하세요
  2. 콜백 함수의 장점과 사용 시나리오는 클로저입니다.
콜백 함수는 클로저를 간단히 활용한 것으로, 즉 외부에 정의된 변수에 접근할 수 있다고 합니다.

콜백 함수의 장점

코드 중복을 피하기 위한 DRY.
  • 공통 논리를 추상화할 수 있습니다.
  • 비즈니스 로직 분리(너무 아름답습니다 ^-^ ^-^)
  • 코드 유지 관리성과 가독성을 향상시킵니다.
  • 코드 가독성을 향상시킵니다.
  • 별도의 전용 기능.
  • js 콜백 기능의 가장 큰 장점은 다른 전통적인 언어에는 없는 비즈니스 로직의 분리를 실현할 수 있다는 것입니다. 이는 인터페이스를 외부 세계에 노출시키는 것과 매우 유사합니다. 프론트엔드와 백엔드 분리 아키텍처의 API 인터페이스 디자인 개념
이 세상에 '만병통치약'은 없으며, 모든 것을 해결할 수 있는 단일 솔루션은 없습니다. JS는 콜백이 이루어지는 비동기를 위해 탄생했기 때문입니다. 함수를 가장 많이 사용하고 가장 적합한 곳은 비동기 프로그래밍입니다. 그러나 광범위하게 사용하면 프로그램이 개발자를 위한 코드가 중복되고, 읽을 수 없는 줄이 많고, 경험이 매우 열악합니다. 사람들은 자신의 안락함을 추구하는 것을 멈추지 않았습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련글 :

JS에서 슬라이딩 퍼즐 인증코드 구현하는 방법


vue

js

v-if, v-show 사용법에 대한 자세한 설명
단계에 대한 자세한 설명 JS

에서 레드-블랙 트리 구현

위 내용은 자바스크립트 콜백 함수의 상세 분석(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.