Analisis terperinci fungsi panggil balik dalam JavaScript

Artikel ini membawa anda pengetahuan yang berkaitan tentang JavaScript, yang terutamanya memperkenalkan kandungan berkaitan fungsi panggil balik, termasuk apakah fungsi panggil balik, apakah ciri-ciri fungsi panggil balik, dan ini dalam panggilan balik fungsi Tunjukkan kepada masalah, mari kita lihat, saya harap ia akan membantu semua orang.

[Cadangan berkaitan: Tutorial video JavaScript, bahagian hadapan web]

Apakah itu fungsi panggil balik (panggilan balik)?

Lepaskan fungsi sebagai parameter kepada fungsi lain Apabila anda perlu menggunakan fungsi ini, panggil balik dan jalankan () fungsi ini

Fungsi panggil balik ialah segmen kod boleh laku 🎜> dihantar sebagai parameter kepada kod lain dan fungsinya adalah untuk memanggil kod (fungsi panggil balik) ini dengan mudah apabila diperlukan. (Diluluskan sebagai parameter kepada fungsi lain, fungsi sebagai parameter ialah fungsi panggil balik)

Pemahaman: Fungsi boleh dihantar sebagai parameter kepada fungsi lain.

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }

        function print(num) {
            console.log(num);
        }

        add(1, 2, print); //3
    </script>

Analisis: Dalam add(1, 2, print);, cetakan fungsi dihantar ke dalam fungsi tambah sebagai parameter, tetapi ia tidak berfungsi serta-merta, tetapi var sum = num1 num2; Fungsi ini akan dipanggil hanya apabila jumlah perlu dicetak selepas selesai. (Ini dihantar sebagai parameter kepada fungsi lain, dan fungsi sebagai parameter ialah fungsi panggil balik.

Fungsi panggil balik tanpa nama:

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }

        add(1, 2, function (sum) {
            console.log(sum); //=>3
        });
    </script>

2. Apakah ciri-ciri panggil balik fungsi?

1. Ia tidak akan dilaksanakan serta-merta

Apabila

fungsi panggil balik diluluskan sebagai parameter kepada fungsi,

hanya definisi fungsi yang diluluskan dan tidak akan dilaksanakan serta-merta seperti fungsi biasa Fungsi panggil balik juga mesti dipanggil melalui operator dalam nombor fungsi panggilan untuk dilaksanakan ()

2 penutupan

Fungsi panggil balik ialah penutupan, iaitu, ia boleh mengakses pembolehubah yang ditakrifkan dalam lapisan luarnya

3 Adalah lebih baik untuk mengesahkan bahawa ia adalah fungsi sebelum melaksanakan fungsi panggil balik >

3 Masalah penunjuk ini dalam fungsi panggil balik

Perhatikan bahawa apabila fungsi panggil balik

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            //判定callback接收到的数据是一个函数
            if (typeof callback === 'function') {
                //callback是一个函数，才能当回调函数使用
                callback(sum);
            }
        }
    </script>

adalah. dipanggil, konteks pelaksanaan ini bukan konteks apabila fungsi panggil balik ditakrifkan, tetapi konteks di mana fungsi itu terletak

Contoh:

Analisis: ini menunjukkan kepada pemanggil fungsi/kaedah yang

terdekat dengannya atau pada tahap bersarang

, fungsi yang paling hampir dengannya di sini ialah

    <script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData(function(n){
                    console.log(this,1111);  //window 1111
                })   
            }
        }
        obj.tool();
    </script>

fungsi( n), yang akan kembali ke panggilan balik() di atas Pada masa ini, pemanggil bukan obj tetapi tetingkap menyelesaikan fungsi panggil balik Kaedah 1 yang ditunjukkan oleh ini: Fungsi anak panah

Fungsi panggil balik (

Jika fungsi panggil balik ialah fungsi biasa

) Apabila parameter dihantar ke fungsi lain, jika anda tidak tahu apa yang berlaku di dalam fungsi ini Apabila memanggil fungsi panggil balik, terdapat akan menjadi masalah bahawa titik ini dalam fungsi panggil balik tidak jelas (contohnya, dalam contoh di atas, ini bukan menunjuk ke obj tetapi ke tetingkap), jadi gunakan fungsi anak panah

sebagai fungsi panggil balik, dan kemudian hantarkannya ke dalam fungsi lain sebagai parameter Masalah penunjuk ini tidak jelas tidak akan berlaku dalam fungsi

Analisis: Selepas fungsi panggil balik ditulis dengan fungsi anak panah, penunjuk ini jelas, yang merupakan fungsi yang paling hampir atau terbenam. 4. Mengapa ia harus digunakan?

Ada sebab yang sangat penting -

    <script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData((n)=>{
                    this.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data); 
    </script>

JavaScript ialah bahasa yang didorong oleh peristiwa

Ini bermakna

JavaScript tidak akan berhenti berlari kerana ia perlu menunggu respons, sebaliknya, teruskan melaksanakan

sambil mendengar acara lain. Mari lihat contoh asas:

    <script>
        function createData(callback){
            callback(999);
        }
        var obj ={
            data:100,
            tool:function(){
                var self = this;   //这里的this指向obj，然后当一个变量取用
                createData(function(n){
                    self.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data);
    </script>

Analisis: Seperti yang anda jangkakan, fungsi dilaksanakan dahulu, dan kemudian

dilaksanakan —— Output konsol: 1 2

Tetapi apa yang berlaku jika fungsi mengandungi sejenis kod yang tidak boleh. dilaksanakan serta merta? Contohnya permintaan API di mana kita perlu menghantar permintaan dan kemudian menunggu jawapan? Untuk mensimulasikan keadaan ini, kami akan menggunakan

, iaitu fungsi JavaScript yang memanggil fungsi selepas tempoh masa. Kami menangguhkan fungsi selama 500 milisaat untuk mensimulasikan permintaan API Kod baharu kelihatan seperti ini:

    <script>
        function first() {
            console.log(1);
        }

        function second() {
            console.log(2);
        }

        first();
        second();
    </script>

first Analisis: Di sini fungsi function(){console.log(1)} diluluskan sebagai parameter. kepada fungsi setTimeout , kerana setTimeout ialah fungsi yang disediakan secara rasmi, yang mengandungi banyak program perniagaan yang kompleks, jadi selepas fungsi function(){console.log(1)} dilalui, ia mungkin tidak semestinya dijalankan serta-merta untuk setTimeout, anda mesti dijalankan ke function(){ Parameter fungsi hanya akan dijalankan apabila console.log(1)}. Adakah ini bermakna keseluruhan program hanya menunggu setTimeout dijalankan? Tidak! ! ! second

Hasil larian keseluruhan atur cara ialah: 2 1 , bukan 1 2 asal .Walaupun kita panggil fungsi first() dahulu, hasil output yang kita rekod adalah selepas fungsi second().

Ini bukan masalah JavaScript tidak melaksanakan fungsi dalam susunan yang kita mahu, tetapi masalah JavaScript tidak menunggu respons second() first() sebelum meneruskan pelaksanaan . Panggil balik adalah cara yang tepat untuk memastikan bahawa satu keping kod dilaksanakan sebelum satu lagi kod dilaksanakan.

5. Apakah hubungan antara fungsi panggil balik dan operasi tak segerak? Adakah fungsi panggil balik tidak segerak?

Definisi: Fungsi panggil balik dianggap sebagai fungsi peringkat tinggi, yang diluluskan sebagai parameter Fungsi peringkat lebih tinggi diberikan kepada fungsi lain. intipati fungsi panggil balik ialah corak (corak untuk menyelesaikan masalah biasa), jadi fungsi panggil balik juga dipanggil corak panggil balik .

Ringkasnya: fungsi dipanggil dalam fungsi lain. Dan boleh dihantar sebagai parameter kepada fungsi lain.

Jadi: Tiada hubungan antara fungsi panggil balik dan operasi tak segerak! ! !

Kalau begitu, mengapakah banyak operasi tak segerak mempunyai fungsi isian semula? ?

S: Adakah operasi tak segerak anda tahu fungsi panggil balik? ? ? Tidak juga.

Panggil balik: Lebih banyak boleh difahami sebagai sejenis logik perniagaan: urutan pelaksanaan kod JS

Pemahaman mudah: panggilan balik, seperti namanya, bermaksud memanggil. kembali. 🎜>cth1: Anda memesan bawa pulang, tetapi makanan yang anda ingin makan telah tiada, jadi anda meninggalkan nombor telefon anda dengan pemilik kedai Selepas beberapa hari, kedai itu mempunyainya, dan kerani kedai memanggil anda. Kemudian anda mendapat panggilan dan berlari ke kedai untuk membelinya. Dalam contoh ini, nombor telefon anda dipanggil fungsi panggil balik Apabila anda meninggalkan nombor telefon anda dengan kerani kedai, ia dipanggil fungsi panggil balik pendaftaran Apabila kedai mempunyai barang kemudian, ia dipanggil acara yang dikaitkan dengan panggilan balik kerani kedai memanggil anda, ia dipanggil fungsi panggil balik Apabila anda pergi ke kedai untuk mengambil barang, ia dipanggil bertindak balas kepada acara panggil balik.

cth2: Untuk contoh lain, anda menghantar permintaan axios Selepas permintaan berjaya, fungsi panggil balik kejayaan dicetuskan dan kegagalan permintaan mencetuskan fungsi panggil balik kegagalan. Fungsi panggil balik di sini lebih seperti alat Latar belakang menggunakan alat ini untuk memberitahu anda sama ada anda berjaya atau gagal.

Semua operasi tak segerak di sini tiada kaitan dengan panggilan balik Operasi tak segerak sebenar ialah kaedah itu.

[Cadangan berkaitan:

Tutorial video JavaScript

, bahagian hadapan web]

Atas ialah kandungan terperinci Analisis terperinci fungsi panggil balik dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!