Bagaimana cara melewatkan ini dalam fungsi javascript

Lihat Pen JavaScript - Lewati fungsi JavaScript sebagai parameter-function-ex- 28 oleh w3resource (@w3resource) di CodePen


Tingkatkan solusi contoh ini dan poskan kode Anda melalui Disqus

Sebelumnya. Tulis fungsi JavaScript yang mengembalikan palindrom terpanjang dalam string tertentu
Lanjut. Tulis fungsi JavaScript untuk mendapatkan nama fungsi

Berapa tingkat kesulitan latihan ini?

Mudah Sedang Keras

Uji keterampilan Pemrograman Anda dengan kuis w3resource



Ikuti kami di Facebook dan Twitter untuk pembaruan terkini.

JavaScript. Kiat Hari Ini

Merusak dengan Alias

Sintaks penugasan penghancuran adalah ekspresi JavaScript yang memungkinkan untuk membongkar nilai dari array, atau properti dari objek, ke dalam variabel yang berbeda. Daripada bertahan dengan variabel objek yang ada, kita dapat mengganti namanya sesuai keinginan kita

Contoh. Berfungsi sebagai Parameter

// program to pass a function as a parameter

function greet() {
    return 'Hello';
}

// passing function greet() as a parameter
function name(user, func)
{

    // accessing passed function
    const message = func();

    console.log(`${message} ${user}`);
}

name('John', greet);
name('Jack', greet);
name('Sara', greet);

Keluaran

Hello John
Hello Jack
Hello Sara
_

Dalam program di atas, ada dua fungsi. name() dan greet()

  • Fungsi name()_ mengambil dua parameter
  • Fungsi greet()_ diteruskan sebagai argumen ke fungsi name()

Fungsi dalam JavaScript adalah 'kelas pertama', yang berarti diperlakukan seperti variabel lainnya — termasuk diteruskan ke atau dikembalikan dari fungsi lain

Saat mereka diteruskan sebagai argumen ke fungsi lain, mereka dikenal sebagai 'panggilan balik' — untuk dipanggil saat fungsi lain siap untuk mereka

Contoh umum callback mencakup fungsi yang disediakan untuk

  • forEach atau map untuk dipanggil pada setiap item dalam koleksi
  • setTimeout atau setInterval dipanggil setelah periode waktu yang ditentukan
  • then atau catch dipanggil setelah janji diselesaikan

Ini mungkin tidak selalu berjalan sesuai rencana — blog ini menyentuh beberapa alasan mengapa

1. Lewati fungsi — jangan aktifkan

Anda dapat menulis fungsi callback seluruhnya di dalam fungsi yang membutuhkannya — tetapi untuk kemudahan keterbacaan dan debug, seringkali membantu untuk mendeklarasikan atau menetapkannya di tempat lain dan mereferensikannya dengan fungsi atau nama variabel

Hal pertama yang harus diwaspadai adalah Anda benar-benar mereferensikannya dengan nama — bukan memanggilnya. Inilah perbedaan antara menulis myFunction_ (mengembalikan fungsi) dan myFunction() (mengeksekusinya)

Jika Anda menyediakan fungsi sebagai panggilan balik ke fungsi lain, itu adalah tugas fungsi lain untuk menjalankannya saat sudah siap — bukan milik Anda — i. e

Di sini setTimeout_ sedang mencari argumen pertama untuk memberikan 'hal yang harus dilakukan saat Anda siap'. Jika kita memanggil sayBoo() alih-alih mereferensikannya, apa yang sebenarnya kita sediakan untuk setTimeout lakukan adalah apa pun yang dikembalikan sayBoo() — dalam hal ini, tidak ada yang dapat dieksekusi. Jika sayBoo() mengembalikan sebuah fungsi, maka fungsi tersebut akan tersedia untuk setTimeout

Mungkin ada kejadian di mana Anda ingin benar-benar memanggil suatu fungsi secara instan, dan membuatnya mengembalikan fungsi lain untuk digunakan sebagai panggilan balik — tetapi jika Anda tidak melakukan ini, dan panggilan balik Anda tidak berfungsi seperti yang diharapkan, periksa apakah Anda

2. Cara menyampaikan argumen dengan benar dengan panggilan balik

Kita perlu berpikir secara berbeda tentang cara meneruskan argumen ke fungsi callback. Kami tidak dapat memberikan nama fungsi dengan argumen secara langsung dalam tanda kurung — ini akan membuatnya segera dieksekusi, daripada dibiarkan sebagai panggilan balik saat fungsi di sekitarnya siap untuk itu

Misalnya, jika kita ingin membuat hitungan mundur yang memanggil dirinya sendiri

…kami tidak dapat memberikan map4 dengan cara ini, karena ini dipanggil segera setelah baris 4 dievaluasi, bukannya dipanggil oleh setTimeout saat sudah siap. Menambahkan tanda kurung () (dengan atau tanpa argumen di dalamnya) berarti kita menjalankan fungsi di tempatnya, bukan meneruskannya sebagai argumen

setTimeout dan setInterval sebenarnya memiliki cara mereka sendiri untuk menangani hal ini — Anda dapat memberikan argumen ketiga (dan sebanyak yang Anda suka), yang akan diteruskan ke fungsi callback [tidak didukung oleh IE9]

Atau Anda dapat menyediakan fungsi anonim pendek sebagai callback, yang kemudian mengeksekusi fungsi bernama itu sendiri saat dipanggil. Keduanya terlihat di sini

Untuk fungsi seperti forEach, map, dan then, yang memiliki argumen siap pakai untuk diteruskan ke fungsi callback mereka (e. g. nilai saat ini dalam koleksi yang sedang diulangi, atau nilai janji yang terselesaikan), Anda dapat memanfaatkan kemampuan JavaScript untuk menggunakan pemrograman diam-diam atau 'bebas poin'

Ini melibatkan penetapan suatu fungsi sebagai callback tanpa memberi nama argumen yang akan diteruskan ke fungsi tersebut — fungsi pemanggil akan meneruskan nilai apa pun yang tersedia sebagai argumen, untuk menangani callback bagaimanapun caranya

Pada contoh di atas, kita memiliki fungsi setTimeout1 yang membutuhkan satu argumen. forEach sebenarnya memiliki tiga untuk ditawarkan - nilai saat ini, indeks saat ini, dan koleksi asli - tetapi fungsi JavaScript tidak mengeluh jika Anda memberi mereka lebih banyak argumen daripada yang mereka butuhkan, dan selama Anda tahu urutan argumen

Jika Anda tidak yakin argumen apa yang akan diberikan oleh suatu fungsi dalam urutan apa, periksa dokumentasinya. Sebagai alat bantu visual, Anda juga dapat meneruskan setTimeout3 sebagai panggilan balik ke fungsi menggunakan gaya diam-diam, menghilangkan instruksi lain — ini akan dengan senang hati mengambil sejumlah argumen yang disediakan dan mencetaknya untuk Anda

Tidak selalu tepat untuk menggunakan pemrograman diam-diam — dalam beberapa kasus mungkin akan mempersulit pembaca (apakah orang lain atau calon Anda) untuk memahami apa yang sedang terjadi, terutama jika mereka tidak terbiasa dengan argumen fungsi

3. Mendapatkan 'ini' dengan benar saat meneruskan fungsi

Hal ketiga yang perlu diingat adalah bagaimana menggunakan fungsi sebagai callback mengubah konteks di mana mereka dipanggil — jika fungsi Anda bergantung pada kata kunci setTimeout4 untuk merujuk ke konteks di mana Anda awalnya menulisnya, Anda mungkin mendapati bahwa memanggilnya sebagai

Ada berbagai cara untuk mengatasi hal ini — mendefinisikan fungsi anonim singkat sebagai panggilan balik yang pada gilirannya memanggil fungsi bernama Anda akan sering menyelesaikan masalah. Anda juga dapat menggunakan setTimeout_6 untuk menentukan konteks yang Anda inginkan dari metode yang terikat. Keduanya ditampilkan di sini

Jika Anda menggunakan konstruktor objek, Anda juga dapat mengikat metodenya segera setelah Anda membuatnya, sehingga Anda tidak perlu mengkhawatirkannya lagi

Semakin banyak, dengan sintaks JavaScript yang lebih baru, mendeklarasikan fungsi dengan sintaks panah akan membantu. mereka akan secara otomatis mengikat 'ini' ke ruang lingkup di mana fungsi tersebut dideklarasikan

Ada banyak sumber daya di luar sana tentang setTimeout4 masalah dan ini jauh dari diskusi yang lengkap. Mereka bervariasi tergantung pada apa yang Anda deklarasikan, di mana Anda mendeklarasikannya, di mana Anda memanggilnya, dan sintaks apa yang Anda gunakan — jadi berhati-hatilah terhadap mereka

Bagaimana cara meneruskan ini ke fungsi dalam JavaScript?

Demikian pula, kita dapat menggunakan apply() dan call() untuk mengubah nilai 'ini' di dalam getThis() . Seperti halnya bind(), kami meneruskan nilai 'ini' yang kami inginkan sebagai argumen. Perbedaannya adalah apply() dan call() keduanya akan mengubah nilai 'ini' di dalam suatu fungsi dan kemudian segera menjalankannya.

Bisakah Anda menggunakan ini dalam fungsi JavaScript?

Dalam JavaScript, kata kunci ini memungkinkan kita untuk. Gunakan kembali fungsi dalam konteks eksekusi yang berbeda. Artinya, sebuah fungsi yang telah ditentukan dapat dipanggil untuk objek yang berbeda menggunakan kata kunci this . Mengidentifikasi objek dalam konteks eksekusi saat ini saat kita memanggil sebuah metode.

Bagaimana Anda melewati argumen ini?

Untuk meneruskan satu atau lebih argumen ke prosedur .
Dalam pernyataan panggilan, ikuti nama prosedur dengan tanda kurung
Di dalam tanda kurung, masukkan daftar argumen. .
Pastikan setiap argumen adalah ekspresi valid yang mengevaluasi ke tipe data yang dapat dikonversi ke tipe yang ditentukan prosedur untuk parameter terkait