자바스크립트에서 콜백 함수에 대해 더 잘 이해하기

자바스크립트에서 콜백 함수에 대해 더 잘 이해하기

콜백으로 기능을 다른 기능에 전달하여 실행하는 것은 이해하지만, 이를 위한 최적의 구현은 이해하지 못합니다.저는 다음과 같은 아주 기본적인 예를 찾고 있습니다.

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

내 첫 번째 기능에서 새 콜백()을 반환하면 이 기능이 작동하고 익명 기능을 실행하지만 이는 내게 올바른 접근 방식이 아닌 것 같습니다.

이렇게 말씀하시면 됩니다.

callback();

또는 사용할 수 있습니다.call방법: 값을 조정하려면this콜백 내에

callback.call( newValueForThis);

함수 내부this어떻든 간에newValueForThis입니다.

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

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

많은 라이브러리(jQuery, dojo 등)는 비동기 함수에 대해 유사한 패턴을 사용하며, 모든 비동기 함수에 대해 node.js를 사용합니다(nodejs는 일반적으로 전달됨).error그리고.data콜백)으로 이동합니다.그들의 소스 코드를 조사하는 것이 도움이 될 것입니다!

기능을 실행할 수 있는 가능성은 크게 세 가지입니다.

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

1. 콜백( argument_1, 인수_2);
2. callback.call(some_object, 인수_1, 인수_2);
3. 콜백. apply(some_object, [argument_1, 인수_2]);

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

1. 배열에 저장된 인수 또는 개별 변수가 있습니다.
2. 어떤 개체의 컨텍스트에서 함수를 호출하려고 합니다.이 경우 해당 콜백에서 "this" 키워드를 사용하면 call()에서 인수로 전달된 개체를 참조하거나 apply()를 수행합니다.개체 컨텍스트를 전달하지 않으려면 null 또는 undefined를 사용합니다.후자의 경우 전역 개체는 "이것"에 사용됩니다.

Function.call, Function.apply용 문서

콜백은 신호에 관한 것이고 "새로운"은 객체 인스턴스를 만드는 것입니다.

이 경우 반환 값을 사용하여 작업을 수행하는 것이 아니므로 "새로운 콜백()을 반환"하는 것보다 "콜백();"만 실행하는 것이 훨씬 더 적절합니다.

(그리고 arguments.length==3 test는 정말 투박하고 fwiw, callback param이 존재하고 함수인지 확인하는 것이 좋습니다.)

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

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()자바스크립트의 함수:

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

function checkCallback(cb) {
  if (cb || cb != '') {
    if (typeof window[cb] === 'undefined') alert('Callback function not found.');
    else window[cb].call(this, Arg1, Arg2);
  }
}

언급URL : https://stackoverflow.com/questions/483073/getting-a-better-understanding-of-callback-functions-in-javascript