javascript - Mengenai pembolehubah yang diisytiharkan oleh let, bagaimana ia berfungsi dalam kod ini?

Question

Sekeping kod yang digunakan untuk meningkatkan paparan adalah seperti berikut:

for(var i=0;i<aLi.length;i++){
    var oldColor=null;
    aLi[i].onmouseover=function(){
        oldColor=this.style.backgroundColor;
        this.style.backgroundColor="#ccc";
    }
    aLi[i].onmouseout=function(){
        this.style.backgroundColor=oldColor;
    }
}

Di sini this.style tidak boleh digantikan dengan aLi[i].style, kerana saya telah menyelesaikan kitaran
Tetapi jika nilai i diisytiharkan dengan let, ia adalah berbeza sama sekali, dan nilai i juga boleh tepat; dipanggil dalam fungsi acara:

for(let i=0;i<aLi.length;i++){
    var oldColor=null;
    aLi[i].onmouseover=function(){
        oldColor=this.style.backgroundColor;
        consol.log(i);
        aLi[i].style.backgroundColor="#ccc";
    }
    aLi[i].onmouseout=function(){
        this.style.backgroundColor=oldColor;
    }
}

Apabila fungsi acara dicetuskan, bukankah ia sepatutnya menjadi ralat bahawa saya tidak dapat ditemui? Kenapa ia boleh berjalan dengan jayanya

Answer 1

ES6 menambah perintah let untuk mengisytiharkan pembolehubah. Penggunaannya adalah serupa dengan var, tetapi pembolehubah yang diisytiharkan hanya sah dalam blok kod tempat perintah let berada.

    {
      let a = 10;
      var b = 1;
    }
    a // ReferenceError: a is not defined.
    b // 1

Kod di atas berada dalam blok kod dan mengisytiharkan dua pembolehubah menggunakan let dan var masing-masing. Kemudian kedua-dua pembolehubah ini dipanggil di luar blok kod Akibatnya, pembolehubah yang diisytiharkan oleh let melaporkan ralat, dan pembolehubah yang diisytiharkan oleh var mengembalikan nilai yang betul. Ini menunjukkan bahawa pembolehubah yang diisytiharkan oleh let hanya sah dalam blok kod di mana ia berada.

Untuk kaunter gelung, sangat sesuai menggunakan arahan let.

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

Dalam kod di atas, kaunter i hanya sah dalam kandungan gelung for dan ralat akan dilaporkan jika ia dirujuk di luar gelung.

Jika kod berikut menggunakan var, output akhir ialah 10.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

Dalam kod di atas, pembolehubah i diisytiharkan oleh perintah var dan sah dalam skop global, jadi hanya terdapat satu pembolehubah i secara global. Setiap kali gelung gelung, nilai pembolehubah i akan berubah, dan console.log(i) di dalam fungsi yang diberikan kepada tatasusunan a dalam gelung menghala ke i global. Dalam erti kata lain, semua i dalam ahli tatasusunan titik ke i yang sama, menyebabkan output pusingan terakhir i pada masa jalan, iaitu 10.

Jika anda menggunakan let, pembolehubah yang diisytiharkan hanya sah dalam skop peringkat blok dan output akhir ialah 6.

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

Dalam kod di atas, pembolehubah i diisytiharkan oleh let Arus i hanya sah dalam kitaran ini, jadi i dalam setiap kitaran sebenarnya adalah pembolehubah baru, jadi output akhir ialah 6. Anda mungkin bertanya, jika pembolehubah i diisytiharkan semula dalam setiap pusingan gelung, maka bagaimanakah ia mengetahui nilai pusingan sebelumnya dan dengan itu mengira nilai pusingan ini? Ini kerana enjin JavaScript akan mengingati secara dalaman nilai gelung sebelumnya, dan apabila memulakan pembolehubah i pusingan ini, pengiraan akan dilakukan berdasarkan gelung sebelumnya.

Selain itu, terdapat satu lagi ciri istimewa bagi gelung for, iaitu bahagian yang menetapkan pembolehubah gelung ialah skop induk, dan bahagian dalam badan gelung ialah skop kanak-kanak yang berasingan.

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

Kod di atas berjalan dengan betul dan mengeluarkan abc 3 kali. Ini menunjukkan bahawa pembolehubah i di dalam fungsi dan pembolehubah gelung i tidak berada dalam skop yang sama, tetapi mempunyai skop yang berasingan.