Apa Penutupan di JavaScript & Bagaimana Cara Kerjanya?

adalah bahasa berorientasi fungsi yang memberikan banyak kebebasan kepada pengguna. Anda dapat membuat fungsi secara dinamis, menyalinnya ke variabel lain atau meneruskan sebagai argumen ke fungsi lain dan memanggil dari tempat berbeda nanti. Penutupan dalam JavaScript dibuat setiap kali fungsi dibuat, pada waktu pembuatan fungsi. Pada artikel ini, kita akan memahami closure dalam urutan berikut:

• Pengantar Closures di JavaScript
• Penutupan Praktis
• Rantai Lingkup
• Penutupan Dalam Satu Lingkaran

Pengantar Closures di JavaScript

Penutupan adalah kombinasi dari a fungsi dibundel bersama dengan referensi ke keadaan sekitarnya yaitu lingkungan leksikal. Dengan kata lain, closure memberi Anda akses dari fungsi dalam ke ruang lingkup fungsi luar.

Sebagian besar Pengembang menggunakan penutupan dalam JavaScript secara sadar atau tidak sadar. Ini memberikan kontrol yang lebih baik atas kode saat menggunakannya. Juga, ini adalah pertanyaan yang paling sering ditanyakan selama .

Contoh:

function foo () {var x = 10 function inner () {return x} return inner} var get_func_inner = foo () console.log (get_func_inner ()) console.log (get_func_inner ()) console.log (get_func_inner ())

Keluaran:

10
10
10

Di sini, Anda dapat mengakses file variabel x yang didefinisikan dalam fungsi foo () melalui fungsi inner () sebagai yang nantinya mempertahankan rantai cakupan dari fungsi penutup pada saat menjalankan fungsi penutup. Jadi, fungsi dalam mengetahui nilai x melalui rantai cakupannya. Ini adalah bagaimana Anda dapat menggunakan closure di JavaScript.

adalah sebagai bahasa pemrograman

Penutupan Praktis

Closure memungkinkan Anda mengaitkan lingkungan leksikal dengan fungsi yang beroperasi pada data tersebut. Ini jelas memiliki kesamaan pemrograman berorientasi objek , di mana objek memungkinkan kita untuk mengaitkan properti objek dengan satu atau beberapa metode.

Akibatnya, Anda bisa menggunakan closure di mana saja yang biasanya Anda gunakan untuk objek hanya dengan satu metode.

Contoh:

function makeSizer (size) {return function () {document.body.style.fontSize = size + 'px'}} var size12 = makeSizer (12) var size14 = makeSizer (14) var size16 = makeSizer (16)

Contoh di atas umumnya dilampirkan sebagai callback: satu fungsi yang dijalankan sebagai respons terhadap peristiwa tersebut.

Rantai Lingkup

Penutupan dalam JavaScript memiliki tiga cakupan seperti:

• Lingkup Lokal
• Lingkup Fungsi Luar
• Lingkup Global

Kesalahan umum adalah tidak menyadari bahwa, dalam kasus di mana fungsi luar itu sendiri merupakan fungsi bersarang, akses ke cakupan fungsi luar mencakup cakupan fungsi luar, yang secara efektif membuat rangkaian cakupan fungsi.

// lingkup global var x = 10 fungsi jumlah (a) {fungsi kembali (b) {fungsi kembali (c) {// fungsi luar lingkup fungsi pengembalian (d) {// lingkup lokal mengembalikan a + b + c + d + x}}}} console.log (jumlah (1) (2) (3) (4)) // log 20

Itu juga dapat ditulis tanpa fungsi anonim:

// global scope var x = 10 function sum (a) {return function sum2 (b) {return function sum3 (c) {// outer functions scope return function sum4 (d) {// lingkup lokal mengembalikan a + b + c + d + x}}}} var s = jumlah (1) var s1 = s (2) var s2 = s1 (3) var s3 = s2 (4) console.log (s3) // log 20

Dalam contoh di atas, ada serangkaian fungsi bertingkat yang semuanya memiliki akses ke cakupan luar suatu fungsi. Jadi, Anda dapat mengatakan bahwa closure memiliki akses ke semua cakupan fungsi luar yang dideklarasikan.

Penutupan Dalam Satu Lingkaran

Anda dapat menggunakan closure di JavaScript untuk menyimpan fungsi anonim di setiap indeks file Himpunan . Mari kita ambil contoh dan lihat bagaimana closure digunakan dalam satu loop.

Contoh:

fungsi luar () {var arr = [] var i untuk (i = 0 i<3 i++) { // storing anonymus function arr[i] = function () { return i } } // returning the array. return arr } var get_arr = outer() console.log(get_arr[0]()) console.log(get_arr[1]()) console.log(get_arr[2]())

Keluaran:

apa yang bisa berubah dan tidak bisa diubah

3
3
3
3

Dengan ini, kita sampai pada akhir artikel kita. Saya harap Anda memahami bagaimana closure di JavaScript bekerja dan bagaimana mereka digunakan untuk mendapatkan kontrol kode yang lebih baik.

Sekarang setelah Anda mengetahui tentang Closures in JavaScript, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda Mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'Penutupan di JavaScript' dan kami akan menghubungi Anda kembali.