Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang pengetahuan asas penutupan js

Penjelasan terperinci tentang pengetahuan asas penutupan js

WBOYasal: 2016-05-16 16:37:571782semak imbas

Penutupan ialah kesukaran dan ciri bahasa Javascript Banyak aplikasi lanjutan bergantung pada penutupan.

Penutupan mempunyai tiga ciri:

1. Fungsi bersarang fungsi
2. Parameter dan pembolehubah luaran boleh dirujuk di dalam fungsi
3. Parameter dan pembolehubah tidak akan dikitar semula oleh mekanisme kutipan sampah
Penutupan ialah fungsi yang mempunyai akses kepada pembolehubah dalam skop fungsi lain Cara paling biasa untuk membuat penutupan ialah mencipta fungsi lain dalam fungsi dan mengakses pembolehubah tempatan fungsi ini melalui fungsi lain

Menggunakan penutupan mempunyai kelebihan dan kekurangan, iaitu pembolehubah tempatan boleh berada dalam ingatan dan mengelak daripada menggunakan pembolehubah global. Pembolehubah global boleh dipanggil dalam setiap modul, yang pasti akan membawa bencana.

Jadi adalah disyorkan untuk menggunakan pembolehubah tempatan tertutup peribadi.

Selepas fungsi umum dilaksanakan, objek aktif tempatan dimusnahkan, dan hanya skop global disimpan dalam ingatan. Tetapi keadaan dengan penutupan adalah berbeza!

Penutupan fungsi bersarang:

  function aaa() { 
     var a = 1; 
     return function(){
      alert(a++)
     }; 
    }     
    var fun = aaa(); 
    fun();// 1 执行后 a++，，然后a还在~ 
    fun();// 2  
    fun = null;//a被回收！！

Hasil keluaran di atas ialah 5; Penutupan akan sentiasa menyimpan pembolehubah dalam ingatan, yang akan meningkatkan penggunaan memori jika digunakan secara tidak betul.

Prinsip kutipan sampah JavaScript

(1). Dalam JavaScript, jika objek tidak lagi dirujuk, maka objek itu akan dikitar semula oleh GC; (2) Jika dua objek merujuk antara satu sama lain dan tidak lagi dirujuk oleh pihak ketiga, maka kedua-dua objek yang merujuk antara satu sama lain juga akan dikitar semula.

Jadi apakah faedah menggunakan penutupan? Faedah menggunakan penutupan adalah:

1. Inginkan pembolehubah berada dalam ingatan untuk jangka masa yang lama

2. Elakkan pencemaran pembolehubah global

3. Kewujudan ahli persendirian
1. Pengumpulan pembolehubah global

2. Pembolehubah setempat

<script>
var a = 1;
function abc(){
    a++;
    alert(a);
}
abc();       //2
abc();      //3
</script>

<script>

function abc(){
    var a = 1;
    a++;
    alert(a);
}
abc();            //2
abc();          //2
</script>

Jadi bagaimana kita boleh menjadikan pembolehubah a sebagai pembolehubah tempatan dan terkumpul?

3. Pengumpulan pembolehubah setempat (apa yang boleh dilakukan oleh penutupan)

<script>
function outer(){
    var x=10;
    return function(){       //函数嵌套函数
        x++;
        alert(x);
    }
}
var y = outer();       //外部函数赋给变量y;
y();         //y函数调用一次，结果为11
y();        //y函数调用第二次，结果为12，实现了累加
</script>

Pengisytiharan fungsi dan ungkapan fungsi dalam js:

Dalam js kita boleh mengisytiharkan fungsi melalui fungsi kata kunci:

<script>
function abc(){
    alert(123);
}
abc();
</script>

Kita juga boleh menukar pernyataan ini menjadi ungkapan melalui "()":

<script>
(function (){
    alert(123);
})();          //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；
</script>

4. Kod modular untuk mengurangkan pencemaran pembolehubah global

<script>
var abc = (function(){   //abc为外部匿名函数的返回值
    var a = 1;
    return function(){
        a++;
        alert(a);
    }
})();
abc();  //2 ；调用一次abc函数，其实是调用里面内部函数的返回值  
abc();  //3
</script>

5. Kewujudan ahli persendirian

<script>
var aaa = (function(){
    var a = 1;
    function bbb(){
        a++;
        alert(a);
    }
    function ccc(){
        a++;
        alert(a);
    }
    return {
        b:bbb,       //json结构
        c:ccc
    }
})();
aaa.b();   //2
aaa.c()   //3
</script>

6. Cari terus indeks unsur yang sepadan dalam gelung

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <title></title>
  <script>
  window.onload = function(){
      var aLi = document.getElementsByTagName('li');
      for (var i=0;i<aLi.length;i++){
          aLi[i].onclick = function(){    //当点击时for循环已经结束
          alert(i);
          };
      }
  }
  </script>

  </head>
  <body>
      <ul>
          <li>123</li>
          <li>456</li>
          <li>789</li>
          <li>010</li>
      </ul>
  </body>
  </html>

7. Tulis semula kod di atas menggunakan penutupan:

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：indexOf dan lastIndexOf contoh penggunaan pengenalan_javascript kemahiranArtikel seterusnya：indexOf dan lastIndexOf contoh penggunaan pengenalan_javascript kemahiran

Artikel berkaitan

Lihat lagi