Dapatkah Anda menggunakan fungsi dalam fungsi javascript?

Dalam tutorial ini, kita akan menggunakan invoke, karena fungsi JavaScript dapat dipanggil tanpa dipanggil

Memanggil Fungsi sebagai Fungsi

Contoh

fungsi myFunction(a, b) {
kembali a * b;
}
myFunction(10, 2);

Fungsi di atas bukan milik objek apa pun. Namun dalam JavaScript selalu ada objek global default

Dalam HTML objek global default adalah halaman HTML itu sendiri, jadi fungsi di atas "milik" halaman HTML

Di browser, objek halaman adalah jendela browser. Fungsi di atas secara otomatis menjadi fungsi jendela

Catatan

Ini adalah cara umum untuk menjalankan fungsi JavaScript, tetapi bukan praktik yang baik
Variabel global, metode, atau fungsi dapat dengan mudah membuat konflik nama dan bug di objek global

myFunction() dan jendela. myFunction() adalah fungsi yang sama

Contoh

fungsi myFunction(a, b) {
kembali a * b;
}
jendela. myFunction(10, 2);

Apa ini?

Dalam JavaScript, kata kunci this mengacu pada objek

Objek mana yang bergantung pada bagaimana this dipanggil (digunakan atau dipanggil)

Kata kunci this mengacu pada objek yang berbeda tergantung pada bagaimana kata kunci itu digunakan

Objek Global

Ketika suatu fungsi dipanggil tanpa objek pemilik, nilai this menjadi objek global

Di browser web, objek global adalah jendela browser

Contoh ini mengembalikan objek jendela sebagai nilai this

Contoh

biarkan x = myFunction();

fungsi myFunction() {
kembalikan ini;
}

Memanggil fungsi sebagai fungsi global, menyebabkan nilai this menjadi objek global
Menggunakan objek jendela sebagai variabel dapat dengan mudah merusak program Anda

Memanggil Fungsi sebagai Metode

Dalam JavaScript Anda dapat mendefinisikan fungsi sebagai metode objek

Contoh berikut membuat objek (myObject), dengan dua properti (firstName dan lastName), dan metode (fullName)

Contoh

const myObject = {
nama depan. "Yohanes",
nama keluarga. "Kelinci betina",
nama lengkap. fungsi () {
kembalikan ini. firstName + " " + ini. nama keluarga;
}
}
myObject. nama lengkap();

Metode fullName adalah sebuah fungsi. Fungsi milik objek. myObject adalah pemilik fungsi

Hal yang disebut this, adalah objek yang "memiliki" kode JavaScript. Dalam hal ini nilai this adalah myObject

Menguji. Ubah metode fullName untuk mengembalikan nilai this

Contoh

const myObject = {
nama depan. "Yohanes",
nama keluarga. "Kelinci betina",
nama lengkap. fungsi () {
kembalikan ini;
}
}

// Ini akan mengembalikan [objek objek] (objek pemilik)
myObject. nama lengkap();

Memanggil fungsi sebagai metode objek, menyebabkan nilai this menjadi objek itu sendiri

Memanggil Fungsi dengan Pembuat Fungsi

Jika doa fungsi didahului dengan kata kunci this0, itu adalah doa konstruktor

Sepertinya Anda membuat fungsi baru, tetapi karena fungsi JavaScript adalah objek, Anda sebenarnya membuat objek baru

Contoh

// Ini adalah konstruktor fungsi
fungsi myFunction(arg1, arg2) {
ini. nama depan = arg1;
ini. nama belakang  = arg2;
}

// Ini membuat objek baru
const myObj = new myFunction("John", "Doe");

// Ini akan mengembalikan "John"
myObj. nama depan;

Doa konstruktor membuat objek baru. Objek baru mewarisi properti dan metode dari konstruktornya

Variabel lokal hanya dapat digunakan di dalam fungsi yang didefinisikan. Itu tersembunyi dari fungsi lain dan kode skrip lainnya

Variabel global dan lokal dengan nama yang sama merupakan variabel yang berbeda. Memodifikasi satu, tidak mengubah yang lain

Catatan

Variabel yang dibuat tanpa kata kunci deklarasi (var, let, atau const) selalu bersifat global, meskipun dibuat di dalam fungsi

Seumur Hidup Variabel

Variabel global aktif hingga halaman dibuang, seperti saat Anda menavigasi ke halaman lain atau menutup jendela

Variabel lokal berumur pendek. Mereka dibuat saat fungsi dipanggil, dan dihapus saat fungsi selesai

Kontra Dilema

Misalkan Anda ingin menggunakan variabel untuk menghitung sesuatu, dan Anda ingin penghitung ini tersedia untuk semua fungsi

Anda bisa menggunakan variabel global, dan function untuk menambah penghitung

Contoh

// Memulai penghitung
biarkan penghitung = 0;

// Berfungsi untuk menambah counter
fungsi tambah() {
penghitung += 1;
}

// Panggil add() 3 kali
menambahkan();
menambahkan();
menambahkan();

// Penghitung sekarang harus 3

Ada masalah dengan solusi di atas. Kode apa pun di halaman dapat mengubah penghitung, tanpa memanggil add()

Penghitung harus lokal ke fungsi add(), untuk mencegah kode lain mengubahnya

Contoh

// Memulai penghitung
biarkan penghitung = 0;

// Berfungsi untuk menambah counter
fungsi tambah() {
biarkan penghitung = 0;
penghitung += 1;
}

// Panggil add() 3 kali
menambahkan();
menambahkan();
menambahkan();

// Penghitung sekarang harus 3. Tapi itu 0

Itu tidak berhasil karena kami menampilkan penghitung global alih-alih penghitung lokal

Kami dapat menghapus penghitung global dan mengakses penghitung lokal dengan membiarkan fungsi mengembalikannya

Contoh

// Berfungsi untuk menambah counter
fungsi tambah() {
biarkan penghitung = 0;
penghitung += 1;
loket pengembalian;
}

// Panggil add() 3 kali
menambahkan();
menambahkan();
menambahkan();

// Penghitung sekarang harus 3. Tapi itu 1

Itu tidak berhasil karena kami mengatur ulang penghitung lokal setiap kali kami memanggil fungsi tersebut

Fungsi dalam JavaScript dapat menyelesaikan ini

Fungsi Bersarang JavaScript

Semua fungsi memiliki akses ke lingkup global.   

Faktanya, dalam JavaScript, semua fungsi memiliki akses ke ruang lingkup "di atasnya".

JavaScript mendukung fungsi bersarang. Fungsi bersarang memiliki akses ke ruang lingkup "di atasnya".

Dalam contoh ini, fungsi dalam plus() memiliki akses ke variabel counter di fungsi induk

Contoh

fungsi tambah() {
biarkan penghitung = 0;
function plus() {penghitung += 1;}
plus();
loket pengembalian;
}

Ini bisa memecahkan dilema kontra, jika kita bisa mencapai fungsi plus() dari luar

Kami juga perlu menemukan cara untuk mengeksekusi function0 hanya sekali

Kami membutuhkan penutupan

Penutupan JavaScript

Ingat fungsi pemanggilan diri sendiri?

Contoh

const tambahkan = (fungsi () {
biarkan penghitung = 0;
fungsi pengembalian () {penghitung += 1;
})();

menambahkan();
menambahkan();
menambahkan();

// penghitung sekarang 3

Contoh Dijelaskan

Variabel function1 ditugaskan ke nilai kembalian dari fungsi pemanggilan sendiri

Fungsi pemanggilan sendiri hanya berjalan sekali. Ini mengatur penghitung ke nol (0), dan mengembalikan ekspresi fungsi

Dengan cara ini add menjadi sebuah fungsi. Bagian "luar biasa" adalah dapat mengakses penghitung di ruang lingkup induk

Ini disebut penutupan JavaScript. Itu memungkinkan suatu fungsi memiliki variabel "pribadi".

Penghitung dilindungi oleh ruang lingkup fungsi anonim, dan hanya dapat diubah menggunakan fungsi tambah

Penutupan adalah fungsi yang memiliki akses ke lingkup induk, bahkan setelah fungsi induk ditutup

Bisakah saya meletakkan fungsi di dalam fungsi JavaScript?

Bisakah Anda menggunakan fungsi di dalam fungsi?

Bisakah Anda meneruskan fungsi ke fungsi dalam JavaScript?

Bagaimana cara menggunakan satu fungsi di fungsi lain di JavaScript?