JavaScript Hoisting
Hoisting เป็นพฤติกรรมเริ่มต้นของ JavaScript ในการย้ายการประกาศไปด้านบน
ประกาศ JavaScript ถูกยกขึ้น
ใน JavaScript สามารถประกาศตัวแปรได้หลังจากใช้งานแล้ว
กล่าวอีกนัยหนึ่ง; ตัวแปรสามารถใช้ได้ก่อนที่จะมีการประกาศ
ตัวอย่างที่ 1ให้ผลลัพธ์เหมือนกับตัวอย่างที่ 2 :
ตัวอย่าง 1
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;
// Display x in the element
var x; // Declare x
ตัวอย่าง 2
var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;
// Display x in the element
เพื่อให้เข้าใจสิ่งนี้ คุณต้องเข้าใจคำว่า "การชักรอก"
Hoisting เป็นพฤติกรรมเริ่มต้นของ JavaScript ในการย้ายการประกาศทั้งหมดไปที่ด้านบนสุดของขอบเขตปัจจุบัน (ไปที่ด้านบนสุดของสคริปต์ปัจจุบันหรือฟังก์ชันปัจจุบัน)
ให้และ cons คำหลัก
ตัวแปรที่กำหนดด้วยlet
และconst
ถูกยกขึ้นไปที่ด้านบนของบล็อก แต่ไม่ได้กำหนดค่าเริ่มต้น
ความหมาย: บล็อกของรหัสรับรู้ถึงตัวแปร แต่ไม่สามารถใช้ได้จนกว่าจะมีการประกาศ
การใช้let
ตัวแปรก่อนที่จะประกาศจะส่งผลให้ไฟล์
ReferenceError
.
ตัวแปรอยู่ใน "เขตตายชั่วคราว" ตั้งแต่เริ่มต้นบล็อกจนกว่าจะมีการประกาศ:
ตัวอย่าง
ซึ่งจะส่งผลให้ReferenceError
:
carName = "Volvo";
let carName;
การใช้const
ตัวแปรก่อนที่จะมีการประกาศ เป็นข้อผิดพลาดทางไวยากรณ์ ดังนั้นโค้ดจะไม่ทำงาน
ตัวอย่าง
รหัสนี้จะไม่ทำงาน
carName = "Volvo";
const carName;
อ่านเพิ่มเติมเกี่ยวกับ let และ const ในJS Let / Const
การเริ่มต้น JavaScript ไม่ได้ถูกยกขึ้น
JavaScript ยกการประกาศเท่านั้น ไม่ใช่การเริ่มต้น
ตัวอย่างที่ 1ไม่ให้ผลลัพธ์เหมือนกับ ตัวอย่างที่ 2 :
ตัวอย่าง 1
var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
ตัวอย่าง 2
var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
var y = 7; // Initialize y
สมเหตุสมผลหรือไม่ที่ y ไม่ได้กำหนดไว้ในตัวอย่างที่แล้ว
นี่เป็นเพราะเฉพาะการประกาศ (var y) ไม่ใช่การเริ่มต้น (=7) ถูกยกขึ้นด้านบน
เนื่องจากการยก y ได้รับการประกาศก่อนที่จะใช้ แต่เนื่องจากการเริ่มต้นไม่ได้ถูกยกขึ้น ค่าของ y จึงไม่ถูกกำหนด
ตัวอย่างที่ 2 เหมือนกับการเขียน:
ตัวอย่าง
var x = 5; // Initialize x
var y; // Declare y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
y = 7; // Assign 7 to y
ประกาศตัวแปรของคุณที่ด้านบน!
การชักรอกเป็น (สำหรับนักพัฒนาหลายๆ คน) พฤติกรรมที่ไม่รู้จักหรือมองข้ามของ JavaScript
หากนักพัฒนาไม่เข้าใจการติตตั้ง โปรแกรมอาจมีข้อบกพร่อง (ข้อผิดพลาด)
เพื่อหลีกเลี่ยงจุดบกพร่อง ให้ประกาศตัวแปรทั้งหมดที่จุดเริ่มต้นของทุกขอบเขตเสมอ
เนื่องจากนี่คือวิธีที่ JavaScript ตีความโค้ด จึงเป็นกฎที่ดีเสมอ
JavaScript ในโหมดเข้มงวดไม่อนุญาตให้ใช้ตัวแปรหากไม่ได้ประกาศไว้
ศึกษา"ใช้อย่างเข้มงวด"ในบทต่อไป