Fungsi yang mengembalikan fungsi

Saya terjebak dengan konsep 'Fungsi yang mengembalikan fungsi'. Saya merujuk pada buku 'Object Oriented Javascript' oleh Stoyan Stefanov.

Cuplikan Satu:

    function a() {
      
        alert('A!');
    
        function b(){
            alert('B!'); 
        }
    
        return b();
    }
    
    var s = a();
    alert('break');
    s();

Keluaran:

A!
B!
break

Cuplikan Dua

function a() {
  
    alert('A!');

    function b(){
        alert('B!'); 
    }

    return b;
}

var s = a();
alert('break');
s();

A!
break
B!

Bisakah seseorang memberi tahu saya perbedaan antara kembali bdan b()di cuplikan di atas?

Menetapkan variabel ke suatu fungsi (tanpa tanda kurung) akan menyalin referensi ke fungsi tersebut. Menempatkan tanda kurung di akhir nama fungsi, memanggil fungsi, mengembalikan nilai hasil fungsi.

Demo

function a() {
    alert('A');
}
//alerts 'A', returns undefined

function b() {
    alert('B');
    return a;
}
//alerts 'B', returns function a

function c() {
    alert('C');
    return a();
}
//alerts 'C', alerts 'A', returns undefined

alert("Function 'a' returns " + a());
alert("Function 'b' returns " + b());
alert("Function 'c' returns " + c());

Dalam contoh Anda, Anda juga mendefinisikan fungsi dalam suatu fungsi. Seperti:

function d() {
    function e() {
        alert('E');
    }
    return e;
}
d()();
//alerts 'E'

Fungsinya masih bisa dipanggil. Itu masih ada. Ini digunakan di JavaScript sepanjang waktu. Fungsi dapat diedarkan hanya seperti nilai-nilai lain. Pertimbangkan hal berikut:

function counter() {
    var count = 0;
    return function() {
        alert(count++);
    }
}
var count = counter();
count();
count();
count();

Hitungan fungsi dapat menyimpan variabel yang didefinisikan di luarnya. Ini disebut penutupan. Ini juga banyak digunakan dalam JavaScript.

Mengembalikan nama fungsi tanpa ()mengembalikan referensi ke fungsi tersebut, yang dapat ditetapkan setelah Anda selesai var s = a(). ssekarang berisi referensi ke fungsi tersebut b(), dan pemanggilan s()secara fungsional setara dengan pemanggilan b().

// Return a reference to the function b().
// In your example, the reference is assigned to var s
return b;

Memanggil fungsi dengan ()pernyataan return akan menjalankan fungsi tersebut, dan mengembalikan nilai apa pun yang dikembalikan oleh fungsi tersebut. Ini mirip dengan memanggil var x = b();, tetapi alih-alih menetapkan nilai kembalian b()Anda mengembalikannya dari fungsi panggilan a(). Jika fungsinya b()sendiri tidak mengembalikan nilai, panggilan akan kembali undefinedsetelah pekerjaan lain apa pun yang dilakukan b().

// Execute function b() and return its value
return b();
// If b() has no return value, this is equivalent to calling b(), followed by
// return undefined;

return b(); memanggil fungsi b (), dan mengembalikan hasilnya.

return b; mengembalikan referensi ke fungsi b, yang bisa Anda simpan dalam variabel untuk dipanggil nanti.

Kembali b adalah mengembalikan objek fungsi. Dalam Javascript, fungsi hanyalah objek, seperti objek lainnya. Jika menurut Anda itu tidak membantu, ganti saja kata "object" dengan "thing". Anda dapat mengembalikan objek apa pun dari suatu fungsi. Anda dapat mengembalikan nilai benar / salah. Integer (1,2,3,4 ...). Anda dapat mengembalikan string. Anda dapat mengembalikan objek kompleks dengan beberapa properti. Dan Anda bisa mengembalikan fungsi. sebuah fungsi hanyalah sebuah benda.

Dalam kasus Anda, mengembalikan bmengembalikan benda, benda itu adalah fungsi yang dapat dipanggil. Mengembalikan b()mengembalikan nilai yang dikembalikan oleh fungsi yang dapat dipanggil.

Pertimbangkan kode ini:

function b() {
   return 42;
}

Menggunakan definisi di atas, return b();mengembalikan nilai 42. Di sisi lain return b;mengembalikan sebuah fungsi, yang dengan sendirinya mengembalikan nilai 42. Mereka adalah dua hal yang berbeda.

Saat Anda kembali b, itu hanya referensi ke fungsi b, tetapi tidak dijalankan saat ini.

Saat Anda kembali b(), Anda menjalankan fungsi dan mengembalikan nilainya.

Coba alerting typeof(s)di contoh Anda. Snippet b akan memberi Anda 'fungsi'. Apa yang akan diberikan snippet a kepada Anda?

Bayangkan fungsinya sebagai tipe, seperti int. Anda dapat mengembalikan int dalam suatu fungsi. Anda juga dapat mengembalikan fungsi, mereka adalah objek bertipe "fungsi".

Sekarang masalah sintaks: karena fungsi mengembalikan nilai, bagaimana Anda bisa mengembalikan fungsi dan bukan mengembalikan nilai?

dengan menghilangkan tanda kurung! Karena tanpa tanda kurung, fungsi tidak akan dijalankan! Begitu:

return b;

Akan mengembalikan "fungsi" (bayangkan seperti jika Anda mengembalikan angka), sedangkan:

return b();

Pertama jalankan fungsinya lalu kembalikan nilai yang diperoleh dengan mengeksekusinya, itu perbedaan besar!

Buat variabel :

var thing1 = undefined;

Deklarasikan Fungsi :

function something1 () {
    return "Hi there, I'm number 1!";
}

Waspada nilai dari thing1(variabel pertama kami):

alert(thing1); // Outputs: "undefined".

Sekarang, jika kita ingin thing1menjadi referensi ke fungsi tersebut something1, artinya itu akan sama dengan fungsi yang kita buat, kita akan melakukan:

thing1 = something1;

Namun, jika kita menginginkan return nilai dari fungsi tersebut maka kita harus menetapkannya nilai kembali dari fungsi yang dieksekusi. Anda menjalankan fungsi dengan menggunakan tanda kurung:

thing1 = something1(); // Value of thing1: "Hi there, I'm number 1!" 

Cuplikan satu:

function a() {
  
    alert('A!');

    function b(){
        alert('B!'); 
    }

    return b(); //return nothing here as b not defined a return value
}

var s = a(); //s got nothing assigned as b() and thus a() return nothing.
alert('break');
s(); // s equals nothing so nothing will be executed, JavaScript interpreter will complain

pernyataan 'b ()' berarti menjalankan fungsi bernama 'b' yang menampilkan kotak dialog dengan teks 'B!'

pernyataan 'return b ();' berarti menjalankan fungsi bernama 'b' dan kemudian mengembalikan fungsi 'b' apa yang dikembalikan. tetapi 'b' tidak menghasilkan apa-apa, maka pernyataan 'return b ()' ini juga tidak mengembalikan apa-apa. Jika b () mengembalikan angka, maka 'return b ()' juga merupakan angka.

Sekarang 's' diberi nilai apa 'a ()' return, yang mengembalikan 'b ()', yang tidak berarti apa-apa, jadi 's' bukan apa-apa (dalam JavaScript itu sebenarnya, itu 'tidak terdefinisi'. Jadi ketika Anda meminta JavaScript untuk menafsirkan tipe data apa 's', penerjemah JavaScript akan memberi tahu Anda 's' adalah tidak terdefinisi.) As 's' adalah tidak terdefinisi, ketika Anda meminta JavaScript untuk mengeksekusi pernyataan ini 's ()', Anda meminta JavaScript untuk menjalankan fungsi bernama 's', tetapi 's' di sini adalah 'tidak ditentukan', bukan fungsi, jadi JavaScript akan mengeluh, "hei, s bukan fungsi, saya tidak tahu caranya untuk dilakukan dengan "s ini, maka pesan kesalahan" Uncaught TypeError: s is not a function "akan ditampilkan oleh JavaScript (diuji di Firefox dan Chrome)

Cuplikan Dua

function a() {
  
    alert('A!');

    function b(){
        alert('B!'); 
    }

    return b; //return pointer to function b here
}

var s = a();  //s get the value of pointer to b
alert('break');
s(); // b() function is executed

sekarang, fungsi 'a' mengembalikan pointer / alias ke fungsi bernama 'b'. jadi ketika mengeksekusi 's = a ()', 's' akan mendapatkan nilai yang menunjuk ke b, yaitu 's' adalah alias dari 'b' sekarang, memanggil 's' sama dengan memanggil 'b'. ie 's' adalah fungsi sekarang. Jalankan 's ()' berarti menjalankan fungsi 'b' (sama seperti menjalankan 'b ()'), kotak dialog yang menampilkan 'B!' akan muncul (yaitu menjalankan 'alert (' B! '); pernyataan dalam fungsi' b ')

Ini sangat berguna dalam kehidupan nyata.

Bekerja dengan Express.js

Jadi, expressrute reguler Anda terlihat seperti ini:

function itWorksHandler( req, res, next ) {
  res.send("It works!");
}

router.get("/check/works", itWorksHandler );

Tetapi bagaimana jika Anda perlu menambahkan beberapa pembungkus, penanganan kesalahan atau sesuatu?

Kemudian Anda menjalankan fungsi Anda dari pembungkus.

function loggingWrapper( req, res, next, yourFunction ) {
  try {
    yourFunction( req, res );
  } catch ( err ) {
    console.error( err );
    next( err );
  }
}

router.get("/check/works", function( req, res, next ) {
  loggingWrapper( req, res, next, itWorksHandler );
});

Terlihat rumit? Nah, bagaimana dengan ini:

function function loggingWrapper( yourFunction ) => ( req, res, next ) {
  try {
    yourFunction( req, res, next );
  } catch ( err ) {
    console.error( err );
    next( err );
  }
}

router.get("/check/works", loggingWrapper( itWorksHandler ) );

Lihat di bagian akhir Anda meneruskan fungsi yang loggingWrappermemiliki satu argumen sebagai fungsi lain itWorksHandler, dan Anda loggingWrappermengembalikan fungsi baru yang mengambil req, res, nextargumen.