cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah penutupan berfungsi dalam JavaScript?

Bagaimanakah penutupan berfungsi dalam JavaScript?

WBOY
WBOYke hadapan
2023-08-24 21:05:04906semak imbas

Dalam artikel ini, kita akan belajar tentang "Penutupan" dan cara ia sebenarnya berfungsi dalam JavaScript. Penutupan pada asasnya ialah komposisi fungsi yang mengandungi rujukan kepada keadaan sekelilingnya (juga dipanggil persekitaran leksikal).

Dalam JavaScript, penutupan pada asasnya dibuat setiap kali fungsi dicipta pada masa jalan. Dalam erti kata lain, penutupan hanyalah nama mewah yang mengingati sesuatu luaran yang digunakan secara dalaman.

Mari kita memahami penutupan JavaScript dengan beberapa contoh -

Contoh 1 h2>

Dalam contoh berikut kami akan mengisytiharkan penutupan yang akhirnya akan membolehkan akses kepada tagLine pembolehubah luaran dari fungsi luar

Gunakan bahagian luar dalam fungsi paling dalam Selepas pembolehubah, penutupan khusus ini akan membantu pengguna untuk memaklumkan tagLine setiap kali fungsi luaran dipanggil.

#Nama fail: index.html

<!DOCTYPE html>
<html>
<head>
   <title>
      Closures in Javascript
   </title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <button type="button" onclick="init()">
      Click here!!!
   </button>
   <p id="demo"></p>
<script>
   function init() {
      var tagLine = "Start your Learning journey now";
      function display() { // display() is the inner function, a closure
         alert(tagLine); // use variable declared in the parent function
      }
      display();
   }
   </script>
</body>
</html>

Output

Ini akan menghasilkan keputusan berikut.

JavaScript 中的闭包是如何工作的？

Contoh 2

Dalam contoh di bawah, kami menggunakan penutupan bersarang untuk memanggil dua fungsi dan memaparkan output fungsi yang sama.

#Nama fail: index.html

<!DOCTYPE html>
<html>
<head>
   <title>
      Closures in Javascript
   </title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <button type="button" onclick=" Counter()">
      Click Me!
   </button>
   <p id="demo1"></p>
   <p id="demo2"></p>
<script>
function Counter() {
   var counter = 0;
   function outerfunction() {
   counter += 1;
   document.getElementById("demo1").innerHTML
      = "Outer Counter called = " + counter +" from Outer Function " ;
      function innerfunction() {
         counter += 1;
         document.getElementById("demo2").innerHTML
         = "Inner Counter called = " + counter +" from Inner Function ";
      };
      innerfunction();
   };
   outerfunction();
};
</script>
</body>
</html>

Output

JavaScript 中的闭包是如何工作的？

Atas ialah kandungan terperinci Bagaimanakah penutupan berfungsi dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 闭包
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menguji kod JavaScript secara automatik?Artikel seterusnya：Bagaimana untuk menguji kod JavaScript secara automatik?

Artikel berkaitan

Lihat lagi