การยกเป็นพฤติกรรมเริ่มต้นของ JavaScript ในการย้ายการประกาศไปที่ สูงสุด.
ใน JavaScript ตัวแปรสามารถประกาศได้หลังจากใช้งานแล้ว
กล่าวอีกนัยหนึ่ง; สามารถใช้ตัวแปรก่อนที่จะมีการประกาศได้
ตัวอย่างที่ 1 ให้ผลลัพธ์เหมือนกับ ตัวอย่างที่ 2:
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ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
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
</script>
</body>
</html>
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ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
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
</script>
</body>
</html>
หากต้องการเข้าใจสิ่งนี้ คุณต้องเข้าใจคำว่า "การยก"
การยกเป็นพฤติกรรมเริ่มต้นของ JavaScript ในการย้ายการประกาศทั้งหมดไปที่ ด้านบนของขอบเขตปัจจุบัน (ไปที่ด้านบนของสคริปต์ปัจจุบันหรือฟังก์ชันปัจจุบัน)
ตัวแปรที่กำหนดด้วย let และ const จะถูกยกขึ้นไปด้านบน ของบล็อก แต่ไม่ได้ เริ่มต้น.<p>ความหมาย: บล็อกของโค้ดทราบถึง ตัวแปร แต่ไม่สามารถใช้งานได้จนกว่าจะมีการประกาศ <p>การใช้ตัวแปร let ก่อนที่จะประกาศจะส่งผลให้ ReferenceError.
ตัวแปรอยู่ใน "โซนตายชั่วคราว" ตั้งแต่เริ่มต้น ของบล็อกจนกว่าจะมีการประกาศ:
carName = "Volvo";
let carName;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>
<script>
try {
carName = "Saab";
let carName = "Volvo";
}
catch(err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
การใช้ตัวแปร const ก่อนที่จะประกาศ ถือเป็นข้อผิดพลาดทางไวยากรณ์ ดังนั้นโค้ดจะไม่ทำงาน
รหัสนี้จะไม่ทำงาน
carName = "Volvo";
const carName;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>
<p id="demo"></p>
<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
อ่านเพิ่มเติมเกี่ยวกับ let และ const ใน JS Let/Const
JavaScript จะดึงการประกาศเท่านั้น ไม่ใช่การเริ่มต้น
ตัวอย่างที่ 1 ไม่ ให้ผลลัพธ์เหมือนกับ ตัวอย่างที่ 2:
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ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
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
</script>
</body>
</html>
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ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = "x is " + x + " and y is " + y; // Display x and y
var y = 7; // Initialize y
</script>
</body>
</html>
มันสมเหตุสมผลไหมที่ 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 ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
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
</script>
</body>
</html>
Hoisting (สำหรับนักพัฒนาจำนวนมาก) เป็นพฤติกรรมที่ไม่รู้จักหรือถูกมองข้ามของ จาวาสคริปต์
หากนักพัฒนาไม่เข้าใจการยก โปรแกรมอาจมีจุดบกพร่อง (ข้อผิดพลาด)<p> เพื่อหลีกเลี่ยงข้อผิดพลาด ให้ประกาศตัวแปรทั้งหมดที่จุดเริ่มต้นของเสมอ ทุกขอบเขต<p> เนื่องจากนี่คือวิธีที่ JavaScript ตีความ รหัส มันเป็นกฎที่ดีเสมอ
JavaScript ในโหมดเข้มงวดไม่อนุญาตให้ใช้ตัวแปรหากเป็นเช่นนั้น ไม่ได้ประกาศ
ศึกษา "use strict" ในบทถัดไป