หากคุณไม่เข้าใจกลไกการทำงานของภาษาจาวาสคริปต์หรือเพียงแค่ใส่คุณไม่สามารถควบคุมคำสั่งการดำเนินการของ JavaScript ได้คุณก็เป็นเหมือน bole ที่ไม่สามารถควบคุมม้าหนึ่งพันไมล์ได้ รอบๆ.
JavaScript แยกวิเคราะห์ได้อย่างไร? คำสั่งดำเนินการคืออะไร? ก่อนที่เราจะเข้าใจสิ่งเหล่านี้ก่อนอื่นให้เข้าใจคำสำคัญสองสามข้อ:
1. บล็อกรหัส
บล็อกรหัสใน JavaScript หมายถึงส่วนโค้ดหารด้วยแท็ก <Script> ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
การแจ้งเตือน ("นี่คือรหัสหนึ่งรหัส");
</script>
<script type = "text/javascript">
การแจ้งเตือน ("นี่คือรหัสสองรหัส");
</script>
JS ถูกรวบรวมและดำเนินการตามบล็อกรหัส ตัวอย่างเช่นคุณจะเข้าใจ:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
การแจ้งเตือน (str); // เนื่องจากไม่ได้กำหนด STR เบราว์เซอร์จะมีข้อผิดพลาดและต่อไปนี้ไม่สามารถเรียกใช้ได้
การแจ้งเตือน ("I Am Code Block One"); // ไม่ทำงานที่นี่
var test = "ฉันเป็นตัวแปรบล็อกรหัส";
</script>
<script type = "text/javascript">
การแจ้งเตือน ("I AM Code Block Two");
การแจ้งเตือน (ทดสอบ);
</script>
ในรหัสข้างต้นการดำเนินการของ Code Block 1 รายงานข้อผิดพลาด แต่จะไม่ส่งผลกระทบต่อการดำเนินการของ Code Block 2 นี่คือความเป็นอิสระระหว่างบล็อกโค้ด
2. ฟังก์ชั่นการประกาศและฟังก์ชั่นการมอบหมาย
คำจำกัดความของฟังก์ชั่นใน JS แบ่งออกเป็นสองประเภท: ฟังก์ชั่นการประกาศและฟังก์ชั่นการมอบหมาย
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่น fn () {// ฟังก์ชั่นการประกาศ
-
var fn = ฟังก์ชั่น {// ฟังก์ชันการกำหนด
-
</script>
ความแตกต่างระหว่างฟังก์ชั่นการประกาศและฟังก์ชั่นการมอบหมายคือในช่วงระยะเวลาการเปรียบเทียบล่วงหน้าของ JS ฟังก์ชันการประกาศจะถูกแยกออกก่อนจากนั้นรหัส JS จะถูกดำเนินการตามลำดับ
3. ระยะเวลาและระยะเวลาการดำเนินการล่วงหน้า
ในความเป็นจริงกระบวนการแยกวิเคราะห์ของ JS แบ่งออกเป็นสองขั้นตอน: ระยะเวลาการเปรียบเทียบล่วงหน้า (การประมวลผลล่วงหน้า) และระยะเวลาการดำเนินการ
ในช่วงระยะเวลา precompilation JS จะประมวลผลตัวแปรและฟังก์ชั่นที่ประกาศทั้งหมดในบล็อกรหัสนี้ (คล้ายกับการรวบรวม C) แต่ควรสังเกตว่าในเวลานี้สิ่งเดียวที่จัดการกับฟังก์ชั่นคือการประกาศและตัวแปรคือ ประกาศเท่านั้น
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
fn ();
ฟังก์ชั่น fn () {// ฟังก์ชั่น 1
การแจ้งเตือน ("ฟังก์ชั่น 1 ถูกดำเนินการ");
-
ฟังก์ชั่น fn () {// ฟังก์ชั่น 2
การแจ้งเตือน ("ฟังก์ชั่น 2 ถูกดำเนินการ");
-
</script>
<script type = "text/javascript">
FN ();
ฟังก์ชั่น fn () {// ฟังก์ชั่นการประกาศ
การแจ้งเตือน ("ฟังก์ชั่นประกาศดำเนินการ");
-
var fn = function () {// ฟังก์ชันการกำหนด
การแจ้งเตือน ("เรียกใช้ฟังก์ชันการกำหนด");
-
</script>
// รหัสบล็อกหนึ่ง
<script type = "text/javascript">
การแจ้งเตือน (str); // ข้อผิดพลาดของเบราว์เซอร์รายงาน แต่หน้าต่างข้อมูลไม่ได้ปรากฏขึ้น
</script>
// รหัสบล็อกสอง
<script type = "text/javascript">
การแจ้งเตือน (str);
var str = "aaa";
</script>
// JS ประกาศตัวแปรในช่วงระยะเวลาประมวลผลล่วงหน้า แต่ไม่ได้เริ่มต้นและกำหนดค่าซึ่งนำไปสู่ตัวแปรในรหัส 2 ที่ไม่ได้รับการแก้ไขในขณะที่ตัวแปรในรหัสหนึ่งไม่มีอยู่เลยดังนั้นเบราว์เซอร์จึงรายงานข้อผิดพลาด
หลังจากทำความเข้าใจกับข้อกำหนดข้างต้นฉันเชื่อว่าคุณมีความประทับใจอย่างมากเกี่ยวกับกลไกการทำงานของ JS
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
fn ();
</script>
<script type = "text/javascript">
ฟังก์ชั่น fn () {// ฟังก์ชั่น 1
การแจ้งเตือน ("ฟังก์ชั่น 1 ถูกดำเนินการ");
-
</script>
เหตุใดเบราว์เซอร์จึงรายงานข้อผิดพลาดเมื่อเรียกใช้รหัสด้านบน ฟังก์ชั่นการประกาศไม่ได้ประมวลผลในช่วงระยะเวลาการประมวลผลล่วงหน้า ในความเป็นจริงนี่เป็นจุดที่เข้าใจผิด รหัส
ตอนนี้มาสรุปและจัดระเบียบ:
การคัดลอกรหัสมีดังนี้:
ขั้นตอนที่ 1. อ่านบล็อกรหัสแรก
ขั้นตอนที่ 2. การวิเคราะห์ไวยากรณ์
ขั้นตอนที่ 3. ทำ "การประมวลผล precompilation" ของตัวแปร VAR และคำจำกัดความของฟังก์ชั่น (จะไม่มีการรายงานข้อผิดพลาดเนื่องจากการประกาศที่ถูกต้องเท่านั้นที่แยกวิเคราะห์)
ขั้นตอนที่ 4. ดำเนินการเซ็กเมนต์รหัสและหากมีข้อผิดพลาดใด ๆ ข้อผิดพลาดจะถูกรายงาน (เช่นตัวแปรไม่ได้กำหนด)
ขั้นตอนที่ 5 หากมีส่วนโค้ดอื่นให้อ่านเซ็กเมนต์รหัสถัดไปและทำซ้ำขั้นตอนที่ 2
ขั้นตอนที่ 6.
ตามลำดับการดำเนินการของสตรีมเอกสาร HTML รหัส JS ที่ต้องดำเนินการก่อนที่จะแสดงองค์ประกอบหน้าควรวางไว้ในบล็อก <Script> ด้านหน้า <body> และ JS หลังจากองค์ประกอบหน้าถูกโหลด ถูกวางไว้ใน </body> หลังจากองค์ประกอบเหตุการณ์ ONLOAD ของแท็กตัวถังจะถูกดำเนินการในตอนท้าย
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
การแจ้งเตือน ("First");
ฟังก์ชั่น fn () {
การแจ้งเตือน ("สาม");
-
</script>
<body onload = "fn ()">
</body>
<script type = "text/javascript">
การแจ้งเตือน ("สอง");
</script>