Rumah hujung hadapan web tutorial js Bincangkan proses pelaksanaan kemahiran JavaScript statements_javascript

Bincangkan proses pelaksanaan kemahiran JavaScript statements_javascript

May 16, 2016 pm 03:17 PM

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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

<script>
var a = 1;
</script>
<script>
alert(a);
</script>
Salin selepas log masuk

虽然说,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>
Salin selepas log masuk

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>
Salin selepas log masuk

如果在一个页面中存在多个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>
Salin selepas log masuk

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

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Siapa yang dibayar lebih banyak Python atau JavaScript? Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Demystifying JavaScript: Apa yang berlaku dan mengapa penting Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Apr 04, 2025 pm 05:09 PM

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido? atau: Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Apr 04, 2025 pm 05:36 PM

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Adakah JavaScript sukar belajar? Adakah JavaScript sukar belajar? Apr 03, 2025 am 12:20 AM

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Apr 04, 2025 pm 05:12 PM

Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...

Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end? Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end? Apr 04, 2025 pm 02:06 PM

Terokai pelaksanaan fungsi seretan panel dan drop panel seperti VSCode di bahagian depan. Dalam pembangunan front-end, bagaimana untuk melaksanakan vscode seperti ...

See all articles