Bincangkan proses pelaksanaan kemahiran JavaScript statements_javascript

Tanpa berlengah lagi, mari kita terus ke intinya. Prinsip operasi javascript diringkaskan seperti berikut:

1. Jalankan kod javascript dalam susunan aliran dokumen html

Pelayar secara beransur-ansur menghuraikan struktur halaman dan maklumat dari atas ke bawah mengikut aliran dokumen Kod javascript ialah skrip terbenam dan komponen dokumen html, jadi susunan pelaksanaan kod javascript semasa memuatkan juga berdasarkan. pada teg skrip

Jika fail .js luaran diperkenalkan melalui atribut src bagi teg skrip , maka ia juga akan dilaksanakan mengikut susunan penyataannya muncul dan proses pelaksanaan adalah sebahagian daripada pemuatan dokumen. Pelaksanaan tidak akan ditangguhkan kerana ia adalah fail js luaran.

2. Hubungan antara prapenyusunan dan perintah pelaksanaan

Pertama lihat kod berikut:

<script type="text/javascript">
function hello() {
alert("hello");
}
hello();
function hello() {
alert("hello world");
}
hello();
</script>

Hasil keluaran kod js di atas ialah hello world, hello world, bukannya mengeluarkan hello dahulu dan kemudian hello world. Ini kerana JavaScript tidak ditafsirkan dan dilaksanakan sepenuhnya mengikut tertib, tetapi JavaScript telah dikompilasi sebelum tafsiran Semasa proses pra-penyusunan, fungsi yang ditentukan akan dilaksanakan terlebih dahulu, dan semua pembolehubah var akan dibuat Secara lalai untuk meningkatkan kecekapan pelaksanaan program. Dalam erti kata lain, kod di atas sebenarnya telah dikompilasi oleh enjin JS ke dalam yang berikut:

<script type="text/javascript">
var hello = function() {
alert("hello");
};
hello = function() {
alert("hello world");
};
hello();
hello();
</script>

Anda boleh melihat dengan jelas daripada kod di atas bahawa fungsi sebenarnya pembolehubah dan fungsi boleh diberikan nilai. Untuk mengelakkan situasi sebelumnya daripada berlaku, ia boleh ditakrifkan kepada dua fail js seperti berikut:

<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
<script type="text/javascript">
function hello() {
alert("hello world");
}
hello();
</script>

Dalam fail pertama di atas, saya meletakkan hello() di hadapan fungsi, dan hasil yang betul boleh menjadi output.

<script type="text/javascript">
hello();
var hello = function() {
alert("hello");
};
// hello();
</script>

Jika anda menggunakan kaedah di atas untuk mentakrifkan fungsi fungsi, ralat akan dilaporkan Mesej ralat adalah seperti yang ditunjukkan dalam Rajah 1 di bawah:

Ralat hello bukan fungsi dilaporkan di sini Ini kerana semasa prapengumpulan, walaupun pembolehubah yang diisytiharkan dengan var diproses terlebih dahulu, nilai pembolehubah tidak ditentukan. Kemudian apabila menjalankan hello(), memandangkan hello sebelumnya tidak ditentukan dan jenisnya tidak ditentukan, di sini hello bukan fungsi. Walaupun fungsi ini ditakrifkan dalam program, lokasi definisi diletakkan selepas panggilan, jadi apabila panggilan dibuat, program tidak berjalan di sini, jadi ia tidak berguna.

Lihat sekeping kod berikut:

<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>

Walaupun kod di atas dipanggil sebelum definisi fungsi, ia ditakrifkan dengan kata kunci fungsi Apabila ditakrifkan dengan fungsi, ia berbeza daripada var Apabila fungsi ditakrifkan, nilai fungsi telah ditetapkan lalu, jadi ia boleh dijalankan di sini.

Ringkasan:

Apabila enjin JavaScript menghuraikan skrip, ia akan memproses semua pembolehubah dan fungsi yang diisytiharkan semasa pra-penyusunan. Pemprosesan adalah seperti berikut:

(1) Operasi "pra-penyusun" yang serupa akan dilakukan sebelum pelaksanaan: pertama, objek aktif dalam persekitaran pelaksanaan semasa akan dibuat dan pembolehubah yang diisytiharkan dengan var akan ditetapkan sebagai atribut objek aktif, tetapi pada masa ini ini Tugasan pembolehubah semuanya tidak ditentukan, dan fungsi yang ditakrifkan dengan fungsi juga ditambah sebagai sifat objek aktif, dan nilainya adalah tepat takrifan fungsi.

(2) Semasa fasa tafsiran dan pelaksanaan, apabila pembolehubah perlu dihuraikan, ia akan terlebih dahulu dicari dari objek aktif persekitaran pelaksanaan semasa Jika ia tidak ditemui dan pemilik persekitaran pelaksanaan mempunyai atribut prototaip, ia akan dicari dari rantaian prototaip, jika tidak, ia akan dicari mengikut rantaian skop. Apabila pernyataan seperti var a = ... ditemui, pembolehubah yang sepadan akan diberikan nilai (nota: penetapan pembolehubah selesai semasa fasa tafsiran dan pelaksanaan. Jika pembolehubah digunakan sebelum ini, nilainya akan tidak ditentukan).

(3) Kesimpulannya, ringkasan dalam satu ayat ialah: pengisytiharan pembolehubah berada dalam tempoh pra-penyusunan, dan permulaan pembolehubah berada dalam masa jalan.

<script type="text/javascript">
alert(a); // 在预编译期间a变量已经加载，但是用var定义，所以赋值为undefined先，故这里输出undefined。
var a = 1; // 这里给前面的没有赋值的a进行赋值为1
alert(a); // 这里输出的a已经是前面赋值过的，所以输出1。
</script>

Untuk kod di atas, hasil output ialah: undefined ialah output dahulu, dan kemudian 1 ialah output Untuk analisis, lihat catatan kod.

Walaupun pengisytiharan pembolehubah dan fungsi boleh berada di mana-mana dalam dokumen, amalan yang baik untuk mengisytiharkan pembolehubah dan fungsi global sebelum semua kod JavaScript, dan untuk memulakan dan menetapkan pembolehubah. Dalam fungsi, pembolehubah diisytiharkan dahulu dan kemudian dirujuk.

3. Jalankan kod javascript dalam blok

Blok kod yang dipanggil ialah segmen kod yang dipisahkan oleh tag Apabila jurubahasa JavaScript melaksanakan skrip, ia melaksanakannya dalam blok. Dalam istilah orang awam, jika penyemak imbas menemui teg semasa menghuraikan aliran dokumen HTML, jurubahasa JavaScript akan menunggu sehingga blok kod dimuatkan, menyusun semula blok kod dan kemudian melaksanakannya. Selepas pelaksanaan, penyemak imbas terus menghuraikan aliran dokumen HTML di bawah dan jurubahasa JavaScript bersedia untuk memproses blok kod seterusnya. Memandangkan JavaScript dilaksanakan dalam blok, jika anda memanggil pembolehubah atau fungsi yang diisytiharkan dalam blok berikutnya dalam blok JavaScript, ralat sintaks akan digesa.

<script>
alert(a);
</script>
<script>
var a = 1;
</script>

上面的这段代码，由于是两个代码块，先执行完第一个代码块，再执行第二个代码块。执行第一个代码块的时候，变量a没有声明，所以报错，报错信息是：a is not defined。

<script>
var a = 1;
</script>
<script>
alert(a);
</script>

虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。所以，上面的这两个代码块运行的时候，虽然是两个代码块，但是第一段运行以后，a变量就存在了全局作用域中，此时运行到第二个代码块，输出的a变量就可以调用全局作用域中的a，所以没有问题。

4、借助事件机制改变javascript执行顺序

由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>

windows.onload = function()表示先在触发事件上加一个函数，并不立即执行，而是在整个页面都加载完成以后再开始执行该事件，及function。所以，在windows.onload执行之前，就已经把一些变量加载到了全局区中，所以没有问题。上面的输出结果是：先输出bb，再输出cc，最后输出a。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
// 上面的onload不会执行，只会执行下面的onload
window.onload = function() {
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>

如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的(如上面的代码所示)，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，如下面的代码所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
// 放到一起
alert(a);
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>

5、javascript输出脚本的执行顺序

在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的