penutupan JavaScript



Pembolehubah JavaScript boleh menjadi pembolehubah tempatan atau pembolehubah global.

Pembolehubah peribadi boleh menggunakan penutupan.


Pembolehubah global

Fungsi boleh mengakses pembolehubah yang ditakrifkan dalam fungsi, seperti:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>函数可以访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var a = 4;
    document.getElementById("demo").innerHTML = a * a;
} 
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Fungsi ini juga boleh mengakses pembolehubah yang ditakrifkan di luar fungsi, seperti:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>函数可以访问定义在函数外的变量:</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
	document.getElementById("demo").innerHTML = a * a;
} 
</script>

</body>
</html>

Run instance»

Klik butang "Run instance" untuk melihat instance dalam talian

Yang seterusnya Dalam contoh, a ialah pembolehubah global.

Pembolehubah global dalam halaman web tergolong dalam objek tetingkap.

Pembolehubah global digunakan pada semua skrip pada halaman.

Dalam contoh pertama, a ialah pembolehubah tempatan.

Pembolehubah setempat hanya boleh digunakan di dalam fungsi yang ditakrifkan. Tidak tersedia untuk fungsi lain atau kod skrip.

Walaupun pembolehubah global dan tempatan mempunyai nama yang sama, ia adalah dua pembolehubah yang berbeza. Mengubah suai satu tidak akan menjejaskan nilai yang lain.

NotePengisytiharan pembolehubah adalah jika anda tidak menggunakan
Note变量声明是如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。
var< 🎜> kata kunci, maka ia adalah pembolehubah global, walaupun ia ditakrifkan dalam fungsi.

Kitaran hayat pembolehubah

Skop pembolehubah global adalah global, iaitu pembolehubah global ada di mana-mana dalam keseluruhan program JavaScript.

Pembolehubah yang diisytiharkan di dalam fungsi hanya berfungsi di dalam fungsi. Pembolehubah ini adalah pembolehubah tempatan dan skopnya adalah setempat; parameter fungsi juga adalah setempat dan hanya berfungsi di dalam fungsi.


Dilema Kaunter

Bayangkan jika anda ingin mengira beberapa nilai, dan pembilang tersedia dalam semua fungsi.

Anda boleh menggunakan pembolehubah global, fungsi untuk menetapkan kenaikan balas:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>全局变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
    return counter += 1;
}
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Nilai pembilang berubah apabila fungsi add() dilaksanakan.

Tetapi inilah masalahnya, mana-mana skrip pada halaman boleh menukar kaunter, walaupun fungsi add() tidak dipanggil.

Jika saya mengisytiharkan kaunter di dalam fungsi, nilai kaunter tidak boleh diubah suai tanpa memanggil fungsi:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
function add() {
    var counter = 0;
    return counter += 1;
}
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kod di atas tidak akan dikeluarkan dengan betul, dan setiap kali saya memanggil add( ) fungsi, kaunter akan ditetapkan kepada 1.

Fungsi terbina dalam JavaScript boleh menyelesaikan masalah ini.


Fungsi terbina dalam JavaScript

Semua fungsi boleh mengakses pembolehubah global.

Malah, dalam JavaScript, semua fungsi boleh mengakses skop di atasnya.

JavaScript menyokong fungsi bersarang. Fungsi bersarang boleh mengakses pembolehubah fungsi peringkat atas.

Dalam contoh ini, fungsi terbenam plus() boleh mengakses kaunter pembolehubah fungsi induk:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>局部变量计数。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
	var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Jika kami boleh mengaksesnya secara luaran Fungsi tambah( ), sekali gus menyelesaikan dilema kaunter.

Kita juga perlu memastikan bahawa kaunter = 0 hanya dilaksanakan sekali.

Kami memerlukan penutupan.


Penutupan JavaScript

Ingat fungsi memanggil dirinya sendiri? Apakah fungsi ini?

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

Analisis contoh

Pembolehubah tambah menentukan nilai perkataan pulangan bagi panggilan kendiri fungsi.

Fungsi panggilan kendiri hanya dilaksanakan sekali. Tetapkan pembilang kepada 0. dan mengembalikan ungkapan fungsi.

tambah pembolehubah boleh digunakan sebagai fungsi. Bahagian yang menarik ialah ia memberikan akses kepada pembilang dari skop di atas fungsi.

Ini dipanggil penutupan JavaScript . Ia membolehkan fungsi mempunyai pembolehubah persendirian.

Kaunter dilindungi oleh skop fungsi tanpa nama dan hanya boleh diubah suai melalui kaedah tambah.

Note闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。