JavaScript에서 콜백 함수에 대한 이해

콜백으로 다른 함수에 함수를 전달하고 실행하는 것을 이해하지만 최선의 구현을 이해하지 못합니다. 나는 다음과 같은 매우 기본적인 예를 찾고 있습니다.

var myCallBackExample = {
    myFirstFunction : function( param1, param2, callback ) {
        // Do something with param1 and param2.
        if ( arguments.length == 3 ) {
            // Execute callback function.
            // What is the "best" way to do this?
        }
    },
    mySecondFunction : function() {
        myFirstFunction( false, true, function() {
            // When this anonymous function is called, execute it.
        });
    }
};

myFirstFunction에서 new callback ()을 반환하면 작동하고 익명 함수가 실행되지만 올바른 접근 방식은 아닙니다.

당신은 그냥 말할 수 있습니다

callback();

또는 콜백 내에서 call값을 조정하려는 경우 메소드 를 사용할 수 있습니다 this.

callback.call( newValueForThis);

함수 내부에는 this무엇이든지있을 것 newValueForThis입니다.

콜백이 존재하고 실행 가능한 함수인지 확인해야합니다.

if (callback && typeof(callback) === "function") {
    // execute the callback, passing parameters as necessary
    callback();
}

많은 라이브러리 (jQuery, dojo 등)는 비동기 함수와 비슷한 패턴을 사용하고 모든 비동기 함수 (nodejs는 일반적으로 전달 error및 data콜백)에 node.js를 사용합니다 . 소스 코드를 살펴보면 도움이 될 것입니다!

함수를 실행할 수있는 3 가지 주요 가능성이 있습니다.

var callback = function(x, y) {
    // "this" may be different depending how you call the function
    alert(this);
};

1. 콜백 (argument_1, argument_2);
2. callback.call (some_object, argument_1, argument_2);
3. callback.apply (some_object, [argument_1, argument_2]);

선택하는 방법은 다음 여부에 따라 다릅니다.

1. 인수는 Array에 저장되거나 고유 한 변수로 저장됩니다.
2. 일부 객체의 컨텍스트에서 해당 함수를 호출하려고합니다. 이 경우 해당 콜백에서 "this"키워드를 사용하면 call () 또는 apply ()에서 인수로 전달 된 객체를 참조하게됩니다. 객체 컨텍스트를 전달하지 않으려면 null 또는 undefined를 사용하십시오. 후자의 경우 전역 객체는 "this"에 사용됩니다.

Function.call , Function.apply 문서

콜백은 신호에 관한 것이며 "신규"는 객체 인스턴스 생성에 관한 것입니다.

이 경우 "callback ();"만 실행하는 것이 더 적합합니다. "return new callback ()"보다 반환 값이없는 작업을 수행하지 않기 때문입니다.

(그리고 arguments.length == 3 테스트는 실제로 복잡하고 혼란스럽고 콜백 매개 변수가 존재하고 함수인지 확인하는 것이 좋습니다.)

적절한 구현은 다음과 같습니다.

if( callback ) callback();

콜백 매개 변수를 선택 사항으로 만듭니다.

당신이 사용할 수있는:

if (callback && typeof(callback) === "function") {
    callback();
}

아래 예제는 좀 더 포괄적입니다.

function mySandwich(param1, param2, callback) {
  alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
  var sandwich = {
      toppings: [param1, param2]
    },
    madeCorrectly = (typeof(param1) === "string" && typeof(param2) === "string") ? true : false;
  if (callback && typeof(callback) === "function") {
    callback.apply(sandwich, [madeCorrectly]);
  }
}

mySandwich('ham', 'cheese', function(correct) {
  if (correct) {
    alert("Finished eating my " + this.toppings[0] + " and " + this.toppings[1] + " sandwich.");
  } else {
    alert("Gross!  Why would I eat a " + this.toppings[0] + " and " + this.toppings[1] + " sandwich?");
  }
});

다음은 callback()JavaScript 에서 함수 를 설명하는 기본 예입니다 .

var x = 0;

function testCallBack(param1, param2, callback) {
  alert('param1= ' + param1 + ', param2= ' + param2 + ' X=' + x);
  if (callback && typeof(callback) === "function") {
    x += 1;
    alert("Calla Back x= " + x);
    x += 1;
    callback();
  }
}

testCallBack('ham', 'cheese', function() {
  alert("Function X= " + x);
});

JSFiddle