tutorial pengembangan web terbaru
 

JavaScript Closures

❮ Sebelumnya Berikutnya Bab ❯

Variabel JavaScript dapat termasuk dalam ruang lingkup lokal atau global.

Variabel pribadi dapat dimungkinkan dengan penutupan.

Variabel global

Sebuah fungsi dapat mengakses semua variabel yang didefinisikan di dalam fungsi, seperti ini:

Contoh

function myFunction() {
    var a = 4;
    return a * a;
}
Cobalah sendiri "

Tapi fungsi juga dapat mengakses variabel yang didefinisikan di luar fungsi, seperti ini:

Contoh

var a = 4;
function myFunction() {
    return a * a;
}
Cobalah sendiri "

Dalam contoh terakhir, adalah variabel global.

Dalam halaman web, variabel global milik objek window.

variabel global dapat digunakan (dan berubah) oleh semua skrip di halaman (dan di jendela).

Dalam contoh pertama, adalah variabel lokal.

Sebuah variabel lokal hanya dapat digunakan di dalam fungsi mana didefinisikan. Hal ini tersembunyi dari fungsi lain dan kode scripting lainnya.

variabel global dan lokal dengan nama yang sama adalah variabel yang berbeda. Memodifikasi satu, tidak memodifikasi lainnya.

Variabel dibuat tanpa var kata kunci, selalu global, bahkan jika mereka diciptakan dalam fungsi.

Lifetime variabel

variabel global hidup selama aplikasi Anda (jendela / halaman web Anda) hidup.

variabel lokal memiliki kehidupan pendek. Mereka diciptakan ketika fungsi dipanggil, dan dihapus ketika fungsi selesai.

Sebuah Dilema Kontra

Misalkan Anda ingin menggunakan variabel untuk menghitung sesuatu, dan Anda ingin counter ini akan tersedia untuk semua fungsi.

Anda bisa menggunakan variabel global, dan fungsi untuk meningkatkan counter:

Contoh

var counter = 0;

function add() {
    counter += 1;
}

add();
add();
add();

// the counter is now equal to 3
Cobalah sendiri "

Counter hanya dapat diubah oleh add() fungsi.

Masalahnya adalah, bahwa script pada halaman dapat mengubah meja, tanpa menyebut add() .

Jika saya menyatakan counter dalam fungsi, tak seorang pun akan dapat mengubahnya tanpa menyebut menambahkan ():

Contoh

function add() {
    var counter = 0;
    counter += 1;
}

add();
add();
add();

// the counter should now be 3, but it does not work !
Cobalah sendiri "

Tidak berfungsi! Setiap kali saya sebut add() fungsi, counter diatur ke 1.

Sebuah fungsi dalam JavaScript dapat memecahkan ini.

Fungsi JavaScript Bersarang

Semua fungsi memiliki akses ke lingkup global.

Bahkan, dalam JavaScript, semua fungsi memiliki akses ke ruang lingkup "di atas" mereka.

JavaScript mendukung fungsi bersarang. fungsi bersarang memiliki akses ke ruang lingkup "di atas" mereka.

Dalam contoh ini, fungsi batin plus() memiliki akses ke variabel counter dalam fungsi orang tua:

Contoh

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
}
Cobalah sendiri "

Ini bisa dipecahkan counter dilema, jika kita bisa mencapai plus() fungsi dari luar.

Kita juga perlu menemukan cara untuk mengeksekusi counter = 0 hanya sekali.

Kita perlu penutupan.

Penutupan JavaScript

Ingat fungsi diri memohon? Apa fungsi ini lakukan?

Contoh

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// the counter is now 3
Cobalah sendiri "

misalnya Dijelaskan

Variabel add ditugaskan nilai kembali dari fungsi diri memohon.

Fungsi diri memohon hanya berjalan sekali. Ini set counter ke nol (0), dan mengembalikan ekspresi fungsi.

add cara ini menjadi fungsi. "Indah" bagian adalah bahwa hal itu dapat mengakses counter di lingkup induk.

Ini disebut penutupan JavaScript. Hal ini memungkinkan untuk fungsi untuk memiliki "pribadi" variabel.

counter dilindungi oleh lingkup fungsi anonim, dan hanya dapat diubah dengan menggunakan fungsi add.

Sebuah penutupan adalah fungsi yang memiliki akses ke ruang lingkup orangtua, bahkan setelah fungsi orang tua telah ditutup.


❮ Sebelumnya Berikutnya Bab ❯