Mendapatkan pemahaman yang lebih baik tentang fungsi-fungsi panggilan balik dalam JavaScript

Saya mengerti meneruskan fungsi ke fungsi lain sebagai panggilan balik dan menjalankannya, tapi saya tidak mengerti implementasi terbaik untuk melakukan itu. Saya mencari contoh yang sangat mendasar, seperti ini:

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

Di myFirstFunction, jika saya mengembalikan panggilan balik baru (), maka berfungsi dan menjalankan fungsi anonim, tetapi itu sepertinya bukan pendekatan yang tepat untuk saya.

Anda bisa mengatakannya

callback();

Bergantian Anda dapat menggunakan callmetode ini jika Anda ingin menyesuaikan nilai thisdalam panggilan balik.

callback.call( newValueForThis);

Di dalam fungsinya thisakan menjadi apa pun newValueForThisitu.

Anda harus memeriksa apakah panggilan balik itu ada, dan merupakan fungsi yang dapat dieksekusi:

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

Banyak perpustakaan (jQuery, dojo, dll.) Menggunakan pola yang sama untuk fungsi asinkronnya, serta node.js untuk semua fungsi async (nodejs biasanya lewat errordan datake panggil balik). Melihat ke kode sumber mereka akan membantu!

Ada 3 kemungkinan utama untuk menjalankan suatu fungsi:

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

1. panggilan balik (argument_1, argument_2);
2. callback.call (some_object, argument_1, argument_2);
3. callback.apply (some_object, [argumen_1, argument_2]);

Metode yang Anda pilih tergantung apakah:

1. Anda memiliki argumen yang disimpan dalam Array atau sebagai variabel yang berbeda.
2. Anda ingin memanggil fungsi itu dalam konteks beberapa objek. Dalam hal ini, menggunakan kata kunci "ini" dalam panggilan balik itu akan merujuk objek yang dilewatkan sebagai argumen dalam panggilan () atau berlaku (). Jika Anda tidak ingin meneruskan konteks objek, gunakan null atau undefined. Dalam kasus terakhir objek global akan digunakan untuk "ini".

Documents untuk Function.call , Function.apply

Panggilan balik adalah tentang sinyal dan "baru" adalah tentang membuat instance objek.

Dalam hal ini akan lebih tepat untuk mengeksekusi "callback ();" daripada "return callback baru ()" karena Anda toh tidak melakukan apa pun dengan nilai pengembalian.

(Dan argumen.length == 3 tes benar-benar kikuk, fwiw, lebih baik untuk memeriksa bahwa param callback ada dan merupakan fungsi.)

implementasi yang tepat adalah:

if( callback ) callback();

ini membuat parameter callback opsional ..

Kamu bisa memakai:

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

Contoh di bawah ini sedikit lebih komprehensif:

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?");
  }
});

Berikut ini adalah contoh dasar yang menjelaskan callback()fungsi dalam 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