Kuasai sepenuhnya proses prapenyusun JavaScript

Artikel ini membawakan anda pengetahuan yang berkaitan tentang pra-penyusunan dalam javascript Ia terutamanya memperkenalkan isu-isu berkaitan pra-penyusunan melalui contoh.

Fasa (tiga)

1. Analisis leksikal dan sintaksis: Analisis leksikal dan sintaksis adalah untuk memeriksa sama ada kod JavaScript mempunyai tatabahasa tahap rendah ralat
2. Pra-penyusunan: Artikel ini terutamanya membincangkan tentang
3. Kod pelaksanaan: Kod pelaksanaan ialah enjin JS yang menghuraikan kod, menghuraikan dan melaksanakan setiap baris

Bab ini terutamanya bercakap tentangPra-penyusunan Proses

Proses pra-penyusunan

Pra-penyusunan juga dibahagikan kepada 2 titik dalam masa:

1. Yang pertama adalah sebelum kod JavaScript dilaksanakan
2. Yang kedua adalah sebelum fungsi tersebut dilaksanakan.

Tetapi sebelum kod JavaScript, prapenyusunan sebelumnya hanya berlaku sekali dan prapenyusunan sebelum pelaksanaan fungsi adalah beberapa kali.

1. Pra-penyusunan sebelum kod JavaScript dilaksanakan

1. Sebelum kod JavaScript dilaksanakan, objek global akan dibuat terlebih dahulu, yang boleh difahami sebagai window objek atau Untuk objek GO (Global Object), kita tidak dapat melihat (tidak dapat mencetak)
2. dan kemudian semua diisytiharkan pembolehubah global , tidak digunakan. pembolehubah var yang diisytiharkan oleh let dan diletakkan dalam objek GO dan diberikan nilai undefined (mengingati "promosi pembolehubah")
3. menganalisis pengisytiharan fungsi **: ** dan kemudian Semua pengisytiharan fungsi juga diletakkan dalam objek GO, dan nilai diberikan kepada badan fungsi fungsi itu sendiri (Nama fungsi ialah nama atribut dan nilai ialah badan fungsi. Jika nama fungsi dan nama pembolehubah adalah sama, mereka akan ditimpa dengan kejam)

Perihalan Kes

<script>
    var a = 1;
    console.log(a);
    console.log(b);
    var b = 10;
    function fun (a) {
        console.log(b);
        var a = b = 2;
        var c = 123;
        console.log(a);
        console.log(b);
    }
    var a2 = 20
    fun(1);
 
</script>

Digabungkan dengan langkah-langkah yang disebutkan di atas:

1. Pertama sekali, GO akan dibuat sebelum kod dalam <script></script> dilaksanakan Objek (objek tetingkap)

   GO = {
   	//自带的属性都不写
   }

2. meletakkan semua pembolehubah global yang diisytiharkan dan pembolehubah tidak diisytiharkan menggunakan var dan let ke dalam objek GO, dan memberikan nilai kepada undefined

   GO = {
   	a : undefined,
   	b : undefined,
   	a2 : undefined
   }

3. AnalisisPengisytiharan fungsi, nama fungsinya ialah nama atribut dan nilainya ialah badan fungsi Jika nama fungsi dan nama pembolehubah adalah sama, ia akan ditimpa dengan kejam

   GO = {
   	a : undefined,
   	b : undefined,
   	a2 : undefined,
   	function fun (a) {
       var a = b = 2;
       var c = 123;
     }
   }

4. Pada masa ini, pra- proses penyusunan sebelum pelaksanaan kod js selesai, dan pelaksanaan kod js bermula, a diberikan nilai 1, yang juga dalam objek GO akan dibuat :

   GO = {
   	a : 1,
   	b : undefined,
   	a2 : undefined,
   	function fun (a) {
       var a = b = 2;
       var c = 123;
     }
   }

5. dan kemudian a akan dicetak Pada masa ini, pembolehubah a akan ditemui pada objek GO, dan nilai a pada masa ini ialah 1, jadi console.log(a) bersamaan dengan 1. Kemudian cetak b, dan juga cari pada objek GO Nilai b didapati undefined, jadi console.log(b) adalah sama dengan undefined.

6. Kemudian laksanakan pernyataan tugasan: b = 10; Pada masa ini, nilai b dalam objek GO menjadi 10

   GO = {
   	a : 1,
   	b : 10,
   	a2 : undefined,
   	function fun (a) {
   		var a = b = 2;
   		var c = 123;
   	}
   }

7. Barisan kod seterusnya ialah fungsi **fun, yang tidak akan dilaksanakan pada masa ini**, kerana ia sebenarnya diletakkan di hujung hadapan kod semasa pra sebelumnya -proses kompilasi Ini adalah pernyataan legenda terlebih dahulu, jadi saya mengabaikannya. Kemudian lakukan operasi penugasan : kepada a2 = 20a2, dan objek GO juga berubah:

   GO = {
   	a : 1,
   	b : 10,
   	a2 : 20,
   	function fun (a) {
   		var a = b = 2;
   		var c = 123;
   	}
   }

8. Kemudian fungsi fun dilaksanakan, sebagai disebutkan di atas Pra-penyusunan berlaku pada masa yang lain, iaitu sebelum melaksanakan fungsi Sekarang mari kita bercakap tentang pra-penyusunan sebelum pelaksanaan fungsi.

2. Pra-penyusunan sebelum pelaksanaan fungsi

1. Panggilan fungsi juga akan menjana skopnya sendiri (**AO: **Objek Pengaktifan, konteks pelaksanaan)AO objek aktif. Apabila fungsi dipanggil, ia dijana seketika sebelum pelaksanaan Jika terdapat berbilang panggilan fungsi, berbilang AO

   1. objek AO yang dihasilkan akan dijana. : Sesaat sebelum fungsi dilaksanakan, objek aktif AO
   2. dianalisis dan menjana atribut AO : cari parameter formal dan pengisytiharan pembolehubah dan masukkannya ke dalam objek AO , tugasan ialah undefined
   3. Analisis pengisytiharan fungsi : Cari pengisytiharan fungsi dan letakkan ke dalam objek AO dan tetapkan ia sebagai badan fungsi. Nama fungsi ialah nama atribut, dan nilainya ialah badan fungsi;

   Laksanakan baris demi baris.

2. Perihalan Kes

Contoh kod di atas diambil.

Langkah pertama ialah mencipta objek AO

1. Cari

   parameter formal

   AO{
   
   }

   dan
pembolehubah Isytiharkan
2. ke dalam objek AO dan tetapkan nilai kepada

   ; Nota: b dalam fungsi tidak diisytiharkan oleh var, jadi ia adalah global berubah-ubah dan tidak akan diletakkan dalam undefined pada AO.

   funfun

   Tetapkan

   parameter sebenar

   AO{
   	a: undefined,//形参a与局部变量a同名
   	c: undefined
   }

   kepada
parameter formal

3. Cari pengisytiharan fungsi dan masukkannya ke dalam objek AO dan tetapkan ia sebagai badan fungsi Fungsi keseronokan tidak mempunyai pengisytiharan fungsi, jadi abaikan langkah ini.

4. 函数执行之前的预编译完成，开始执行语句

5. 执行代码

   1. 首先执行打印变量b，而此时fun的AO里边并没有变量b，所以会去GO对象里边找，此时的GO对象b的值为10，所以第一行代码打印出10；

   2. 第二行代码首先要看的是b = 2，然后GO对象里边b的值就被改为2了。

      GO = {
      	a : 1,
      	b : 10,
      	a2 : 20,
      	function fun (a) {
      		var a = b = 2;
      		var c = 123;
      	}
      }

   3. 然后b再赋值给a，变量a是属于局部变量a，所以fun的AO对象里边a的值被改为2。

      AO{
      	a: 2,
      	c: undefined,
      }

   4. 接着下一个赋值语句是c = 123，所以AO对象中c的值被改为了123

      AO{
      	a: 2,
      	c: 123,
      }

   5. 此时再执行console.log(a)的值就是AO对象里边a的值 2；执行console.log(b)的值就是GO对象b的值 2，至此函数fun执行完毕，紧跟着fun的AO也会被销毁。

6. 综上所述，依次打印出来的值为：1，undefined，10，2，2。

总结

预编译两个小规则：

1. 函数声明整体提升(无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
2. 变量声明提升(无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

预编译前奏

1. imply global(暗示全局变量-专业术语) 即：任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是window，这里再一次说明了JavaScript是基于对象的语言，base on window)
2. 一切声明的全局变量，全是window的属性；var a=12;等同于window.a = 12;(会造成window这个对象特别臃肿)
3. 函数预编译发生在函数执行前一刻(懒加载机制)

相关推荐：javascript学习教程、web前端开发视频教程

Atas ialah kandungan terperinci Kuasai sepenuhnya proses prapenyusun JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!