Penjelasan terperinci tentang skop dan penutupan dalam kemahiran javascript

Penjelasan terperinci tentang skop dan penutupan dalam kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 15:20:05

asal

1239 orang telah melayarinya

1. Skop JavaScript

Pembolehubah JavaScript sebenarnya hanya mempunyai dua skop, pembolehubah global dan pembolehubah dalaman fungsi. Skop pembolehubah (skop var) yang ditakrifkan di mana-mana dalam fungsi ialah keseluruhan badan fungsi.
Pembolehubah global: merujuk kepada sifat objek di bawah objek tetingkap.
Pembahagian skop: berdasarkan konteks, dibahagikan dengan fungsi, bukan dengan blok.
Penekanan pada dua perkara:
1. Dalam skop yang sama, JavaScript membenarkan takrifan berulang bagi pembolehubah, dan takrifan terakhir akan menimpa takrifan sebelumnya.
2. Jika pembolehubah ditakrifkan tanpa menambah kata kunci var di dalam fungsi, ia akan menjadi pembolehubah global secara lalai.

var scope="global"; 
function t(){ 
  console.log(scope); //"global" 
  scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"local" 




var scope="global"; 
function t(){ 
  console.log(scope); //"undefined" 
  var scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"global"

Salin selepas log masuk

Dalam proses peleraian pembolehubah, skop tempatan mula-mula dicari, dan kemudian skop atas dicari. Skop pembolehubah tidak ditakrifkan dalam fungsi kod pertama, jadi skop atas (skop global) dicari dan nilainya adalah output. Walau bagaimanapun, skop pembolehubah ditakrifkan dalam fungsi kod kedua (tidak kira sama ada pembolehubah ditakrifkan selepas konsol atau sebelum, ia dianggap bahawa skop pembolehubah berada dalam skop ini), jadi skop peringkat atas tidak lagi dicari dan skop dikeluarkan secara langsung. Tetapi malangnya, pembolehubah tempatan i tidak diberikan nilai pada masa ini, jadi output tidak ditentukan.

//所以根据函数作用域的意思，可以将上述第二段代码重写如下： 
var scope="global"; 
function t(){ 
  var scope; 
  console.log(scope); 
  scope="local" 
  console.log(scope); 
} 
t();

Salin selepas log masuk

Disebabkan ciri-ciri skop fungsi, pembolehubah tempatan sentiasa ditakrifkan dalam keseluruhan badan fungsi Kita boleh "memajukan" perisytiharan pembolehubah ke bahagian atas badan fungsi.

var b; //第1步 
function fun(){  
  b = "change";  
}  
alert(b);//输出undefined，由于第1步只定义未赋值 
 
 
var b; //第1步 
function fun(){  
  b = "change";  
} 
fun(); //调用上述函数 
alert(b); //输出change

Salin selepas log masuk

Apabila menggunakan var untuk mengisytiharkan pembolehubah, atribut yang dicipta tidak boleh dikonfigurasikan, yang bermaksud ia tidak boleh dipadamkan melalui pengendali padam.
2. Contoh Skop

<html> 
<head> 
  <script type="text/javascript"> 
    function buttonInit(){ 
      for(var i=1;i<4;i++){ 
        var b=document.getElementById("button"+i); 
        b.addEventListener("click"，function(){ alert("Button"+i);}，false); 
      } 
    } 
    window.onload=buttonInit; 
  </script> 
</head> 
<body> 
  <button id="button1">Button1</button> 
  <button id="button2">Button2</button> 
  <button id="button3">Button3</button> 
</body> 
</html>

Salin selepas log masuk

Apabila acara pendaftaran tamat, nilai i ialah 4. Apabila butang diklik, fungsi acara ialah function(){ alert("Button" i);} Tiada i dalam fungsi tanpa nama ini rantai skop, jadi untuk Cari dalam fungsi buttonInit Pada masa ini, nilai i ialah 4, jadi "butang4" muncul.
3. penutupan javaScript
Dalam js, penutupan terutamanya melibatkan beberapa ciri lain js: rantai skop, mekanisme kitar semula sampah (memori), sarang fungsi, dsb.
1. Rantai skop: Ringkasnya, rantai skop ialah indeks yang dicipta apabila fungsi ditakrifkan untuk mencari nilai pembolehubah yang digunakan Peraturan dalamannya ialah meletakkan pembolehubah tempatan fungsi itu sendiri di Di hadapan, letakkan pembolehubah dalam fungsi induknya sendiri kedua, letakkan pembolehubah dalam fungsi peringkat tinggi lebih jauh ke belakang, dan seterusnya sehingga objek global. Apabila nilai pembolehubah perlu disoal dalam fungsi, jurubahasa js akan mencari dalam rantaian skop, bermula dengan pembolehubah tempatan di hadapan Jika pembolehubah yang sepadan tidak dijumpai, ia akan mencari dalam rantaian peringkat seterusnya . Setelah pembolehubah ditemui, jangan teruskan lagi. Jika pembolehubah yang diperlukan tidak ditemui pada penghujung, penterjemah kembali tidak ditentukan.
2. Mekanisme pengumpulan sampah Javascript: Dalam Javascript, jika objek tidak lagi dirujuk, maka objek tersebut akan dikitar semula oleh GC. 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. Kerana fungsi a dirujuk oleh b, dan b dirujuk oleh c di luar a, inilah sebabnya fungsi a tidak akan dikitar semula selepas pelaksanaan. Bina penutupan. Pembolehubah ini tidak akan dikitar semula oleh pengumpul memori Hanya apabila fungsi dalaman tidak dipanggil, penutupan akan dimusnahkan, dan tiada pembolehubah yang dirujuk oleh penutupan akan dikitar semula pada permulaan.
3. Dengan penutupan, struktur fungsi bersarang boleh berfungsi
4. Gunakan penutupan js untuk melaksanakan peristiwa mengikat gelung

<html> 
<head> 
  <title>闭包</title> 
</head> 
<body> 
  <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
  </ul> 
  <script type="text/javascript"> 
    function tt(nob) { 
      this.clickFunc = function() { 
        alert("这是第" + (nob + 1) + "记录"); 
      } 
    } 
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
    for (var i = 0; i<= list_obj.length; i++){ 
      console.log(list_obj[i]) 
      list_obj[i].onmousemove = function(){ 
        this.style.backgroundColor = "#cdcdcd"; 
      } 
      list_obj[i].onmouseout = function() { 
        this.style.backgroundColor = "#FFFFFF"; 
      } 
      //list_obj[i].onclick = function() { 
      // alert("这是第" + i + "记录"); //不能正常获取 alert出来的都是：“这是第6记录” 
      //} 
      var col = new tt(i); //调用tt函数 
      list_obj[i].onclick = col.clickFunc; //执行clickFunc函数 
    } 
  </script> 
</body> 
</html>

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.