Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Adakah import es6 akan menggalakkan pembolehubah?

Adakah import es6 akan menggalakkan pembolehubah?

青灯夜游
Lepaskan: 2023-01-18 19:44:41
asal
1405 orang telah melayarinya

Import ES6 akan menyebabkan promosi berubah-ubah. Pengangkat boleh ubah ialah promosi pengisytiharan berubah-ubah ke awal skopnya. js perlu melalui fasa kompilasi dan pelaksanaan Semasa fasa kompilasi, semua pengisytiharan pembolehubah akan dikumpul dan pembolehubah diisytiharkan terlebih dahulu, manakala penyataan lain tidak akan mengubah susunannya, semasa fasa penyusunan, langkah pertama sudah dilaksanakan, dan bahagian kedua dilaksanakan hanya apabila pernyataan dilaksanakan dalam fasa pelaksanaan.

Adakah import es6 akan menggalakkan pembolehubah?

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Promosi boleh ubah

JavaScript ialah bahasa satu benang, jadi pelaksanaan mesti teratur. Tetapi ia tidak dianalisis dan dilaksanakan baris demi baris, tetapi dianalisis dan dilaksanakan sekeping demi sekeping Fasa penyusunan akan dilakukan terlebih dahulu dan kemudian fasa pelaksanaan. Semasa fasa penyusunan, beberapa milisaat sebelum kod sebenarnya dilaksanakan, semua pembolehubah dan pengisytiharan fungsi dikesan dan ditambah pada ingatan dalam struktur data JavaScript yang dipanggil Persekitaran Leksikal. Jadi pembolehubah dan fungsi ini boleh digunakan sebelum ia benar-benar diisytiharkan.

Mari kita mulakan dengan contoh mudah:

 a = 2;
 var a;
 console.log(a);
Salin selepas log masuk

Apakah yang akan dikeluarkan oleh kod di atas Jika kod ini dilaksanakan dari atas ke bawah, ia pasti akan dikeluarkan tanpa definisi bukan bahasa yang dilaksanakan dari atas ke bawah. Output kod ini ialah 2, adakah ia tidak dijangka? Jadi, mengapa ini berlaku? Perkara utama terletak pada--Promosi boleh ubah. Ia akan menaikkan pengisytiharan semua pembolehubah dalam skop semasa ke bahagian atas program Oleh itu, kod di atas adalah bersamaan dengan kod berikut.

 var a;
 a = 2;
 console.log(a);
Salin selepas log masuk

Kemudian mari kita lihat contoh lain:

 console.log(a);
 var a = 2;
Salin selepas log masuk

Apakah yang akan dikeluarkan oleh kod ini? Keluaran 2? Malah, kod ini akan mengeluarkan undefined. kenapa ni? Seperti yang saya baru katakan, JavaScript akan mempromosikan pengisytiharan pembolehubah ke bahagian atas, tetapi pernyataan tugasan tidak akan dinaikkan pangkat Untuk js, var a = 2 dibahagikan kepada penghuraian dua langkah :

<. 🎜>
var a;
a = 2;
Salin selepas log masuk
Dan js hanya akan mempromosikan ayat var a, jadi pernyataan tadi adalah bersamaan dengan:

 var a;
 console.log(a);
 a = 2;
Salin selepas log masuk

Jadi, mengapakah terdapat promosi berubah-ubah?

Mengapa fenomena promosi berubah-ubah berlaku? Kerana js, seperti bahasa lain, perlu melalui peringkat kompilasi dan pelaksanaan. Apabila js berada dalam peringkat penyusunan, ia akan mengumpulkan semua pengisytiharan pembolehubah dan mengisytiharkan pembolehubah terlebih dahulu, dan penyataan lain tidak akan mengubah susunannya Oleh itu, semasa peringkat penyusunan, langkah pertama telah dilaksanakan, dan yang kedua Bahagian itu dilaksanakan. hanya apabila pernyataan itu dilaksanakan dalam fasa pelaksanaan.

Promosi pembolehubah import ES6

Import ES6 akan menyebabkan promosi berubah-ubah.

Sebagai contoh, dalam kod ujian berikut,

// a.js
console.log(&#39;I am a.js...&#39;)
import { foo } from &#39;./b.js&#39;;
console.log(foo);
// b.js
console.log(&#39;I am b.js...&#39;)
export let foo = 1;
Salin selepas log masuk
menjalankan a.js dan

// node -r esm a.js 
I am b.js...
I am a.js...
1
Salin selepas log masuk
mencetak keputusan 'Saya b. js' pertama ...', dan kemudian 'Saya a.js...' muncul lagi.

Ini kerana ES6 melaksanakan fungsi modul pada tahap standard bahasa, jadi apabila a.js dipra-disusun dan import kata kunci ditemui, b.js dimuatkan dahulu, jadi 'saya b. ..'.

Seluruh prosesnya ialah,

Adakah import es6 akan menggalakkan pembolehubah?

Penjanaan promosi berubah-ubah sebenarnya berkaitan dengan proses penciptaan objek berubah-ubah.

Proses Penciptaan Objek Pembolehubah

Penciptaan objek pembolehubah (Objek Pembolehubah) melalui langkah-langkah berikut mengikut urutan.

Adakah import es6 akan menggalakkan pembolehubah?

  • Semak pengisytiharan fungsi konteks semasa, iaitu fungsi yang diisytiharkan menggunakan kata kunci fungsi. Cipta atribut dengan nama fungsi dalam objek pembolehubah, dan nilai atribut ialah rujukan kepada alamat memori di mana fungsi itu terletak. Jika atribut nama fungsi sudah wujud, atribut akan ditimpa oleh rujukan baharu.

  • Semak pengisytiharan pembolehubah dalam konteks semasa Setiap kali perisytiharan pembolehubah ditemui, cipta atribut dengan nama pembolehubah dalam objek pembolehubah dan nilai atribut tidak ditentukan. Jika atribut nama pembolehubah sudah wujud, untuk mengelakkan fungsi dengan nama yang sama daripada diubah suai kepada tidak ditentukan, ia akan dilangkau terus dan nilai atribut asal tidak akan diubah suai.

Pengisytiharan fungsi akan mempunyai keutamaan yang lebih tinggi daripada perisytiharan var.

function test() {
  console.log(a);
  console.log(foo());

  var a = 1;
  function foo() {
    return 2;
  }
}

test();
Salin selepas log masuk
Mula memahami secara langsung daripada konteks pelaksanaan test().

// 创建过程
testEC = {
    // 变量对象
    VO: {},
    // 作用域链
    scopeChain: {}
}

// VO 为 Variable Object 的缩写,即变量对象
VO = {
    arguments: {...},
    foo: <foo reference>    // 表示foo的地址引用
    a: undefined
}
Salin selepas log masuk
Hasil pelaksanaan test() ialah,

// node -r esm demo01.js 
undefined
2
Salin selepas log masuk
Malah, kod demo01.js di atas menjadi urutan pelaksanaan ini,

function test() {
    function foo() {
        return 2;
    }
    var a;
    console.log(a);
    console.log(foo());
    a = 1;
}
test();
Salin selepas log masuk
[Cadangan berkaitan:

tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Adakah import es6 akan menggalakkan pembolehubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan