Mengapa debugger Chrome menganggap variabel lokal tertutup tidak terdefinisi?

Dengan kode ini:

function baz() {
  var x = "foo";

  function bar() {
    debugger;
  };
  bar();
}
baz();

Saya mendapatkan hasil yang tidak terduga ini:

Ketika saya mengubah kode:

function baz() {
  var x = "foo";

  function bar() {
    x;
    debugger;
  };
  bar();
}

Saya mendapatkan hasil yang diharapkan:

Juga, jika ada panggilan ke evaldalam fungsi dalam, saya dapat mengakses variabel saya seperti yang saya ingin lakukan (tidak peduli apa yang saya berikan eval).

Sementara itu, alat pengembang Firefox memberikan perilaku yang diharapkan dalam kedua keadaan.

Ada apa dengan Chrome yang berperilaku debugger kurang nyaman daripada Firefox? Saya telah mengamati perilaku ini selama beberapa waktu, hingga dan termasuk Versi 41.0.2272.43 beta (64-bit).

Apakah itu mesin javascript Chrome "meratakan" fungsi ketika itu bisa?

Menariknya jika saya menambahkan variabel kedua yang adalah direferensikan dalam fungsi batin, xvariabel masih terdefinisi.

Saya mengerti bahwa sering ada quirks dengan cakupan dan definisi variabel ketika menggunakan debugger interaktif, tetapi menurut saya berdasarkan spesifikasi bahasa seharusnya ada solusi "terbaik" untuk quirks ini. Jadi saya sangat ingin tahu apakah ini karena Chrome lebih mengoptimalkan daripada Firefox. Dan juga apakah optimasi ini dapat dengan mudah dinonaktifkan selama pengembangan (mungkin mereka harus dinonaktifkan ketika alat dev terbuka?).

Juga, saya dapat mereproduksi ini dengan breakpoints serta debuggerpernyataannya.

Saya telah menemukan laporan masalah v8 yang tepatnya tentang apa yang Anda minta.

Sekarang, Untuk meringkas apa yang dikatakan dalam laporan masalah itu ... v8 dapat menyimpan variabel yang lokal ke fungsi di stack atau dalam objek "konteks" yang hidup di heap. Ini akan mengalokasikan variabel lokal pada stack selama fungsi tersebut tidak mengandung fungsi bagian dalam yang merujuk padanya. Ini adalah optimasi . Jika ada fungsi dalam yang merujuk ke variabel lokal, variabel ini akan diletakkan di objek konteks (yaitu di heap, bukan di stack). Kasus evalkhusus: jika dipanggil sama sekali oleh fungsi dalam, semua variabel lokal dimasukkan ke dalam objek konteks.

Alasan untuk objek konteks adalah bahwa secara umum Anda bisa mengembalikan fungsi dalam dari yang luar dan kemudian tumpukan yang ada sementara fungsi luar berlari tidak akan tersedia lagi. Jadi apapun yang diakses fungsi bagian dalam harus selamat dari fungsi luar dan hidup di heap daripada di stack.

Debugger tidak dapat memeriksa variabel-variabel yang ada di tumpukan. Mengenai masalah yang ditemukan dalam debugging, salah satu Anggota Proyek mengatakan :

Satu-satunya solusi yang dapat saya pikirkan adalah bahwa setiap kali devtools aktif, kami akan membatalkan semua kode dan mengkompilasi ulang dengan alokasi konteks yang dipaksakan. Itu akan secara dramatis menurunkan kinerja dengan devtools yang diaktifkan.

Berikut adalah contoh dari "jika ada fungsi dalam merujuk pada variabel, letakkan di objek konteks". Jika Anda menjalankan ini, Anda akan dapat mengakses xpada debuggerpernyataan meskipun xhanya digunakan dalam foofungsi, yang tidak pernah dipanggil !

function baz() {
  var x = "x value";
  var z = "z value";

  function foo () {
    console.log(x);
  }

  function bar() {
    debugger;
  };

  bar();
}
baz();

Seperti @Louis mengatakan itu disebabkan oleh optimasi v8. Anda dapat melintasi tumpukan panggilan ke bingkai tempat variabel ini terlihat:

Atau ganti debuggerdengan

eval('debugger');

eval akan membatalkan potongan saat ini

Saya juga memperhatikan ini di nodejs. Saya percaya (dan saya akui ini hanya tebakan) bahwa ketika kode dikompilasi, jika xtidak muncul di dalam bar, itu tidak xtersedia di dalam lingkup bar. Ini mungkin membuatnya sedikit lebih efisien; masalahnya adalah seseorang lupa (atau tidak peduli) bahwa bahkan jika tidak ada xdi bar, Anda mungkin memutuskan untuk menjalankan debugger dan karenanya masih perlu akses xdari dalam bar.

Wow, sangat menarik!

Seperti yang disebutkan orang lain, ini sepertinya berkaitan dengan scope , tetapi lebih khusus, berkaitan dengan debugger scope. Ketika skrip yang disuntikkan dievaluasi dalam alat pengembang, sepertinya akan menentukan a ScopeChain, yang menghasilkan quirkiness (karena terikat pada lingkup inspektur / debugger). Variasi dari apa yang Anda poskan adalah ini:

(EDIT - sebenarnya, Anda menyebutkan ini dalam pertanyaan awal Anda, ya, salahku! )

function foo() {
  var x = "bat";
  var y = "man";

  function bar() {
    console.log(x); // logs "bat"

    debugger; // Attempting to access "y" throws the following
              // Uncaught ReferenceError: y is not defined
              // However, x is available in the scopeChain. Weird!
  }
  bar();
}
foo();

Untuk yang ambisius dan / atau ingin tahu, lingkup (heh) keluar sumber untuk melihat apa yang terjadi:

https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/inspector https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/debugger

Saya menduga ini ada hubungannya dengan variabel dan fungsi mengangkat. JavaScript membawa semua deklarasi variabel dan fungsi ke bagian atas fungsi tempat mereka didefinisikan. Info lebih lanjut di sini: http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

Saya bertaruh bahwa Chrome memanggil break point dengan variabel tidak tersedia untuk lingkup karena tidak ada yang lain dalam fungsi. Ini sepertinya berhasil:

function baz() {
  var x = "foo";

  function bar() {
    console.log(x); 
    debugger;
  };
  bar();
}

Seperti ini:

function baz() {
  var x = "foo";

  function bar() {
    debugger;
    console.log(x);     
  };
  bar();
}

Semoga ini, dan / atau tautan di atas membantu. Ini adalah jenis pertanyaan SO favorit saya, BTW :)