JavaScript Hoisting - Nâng lên trong JavaScript
Nâng lên(hoisting) là hành vi mặc định của JavaScript khi di chuyển các khai báo lên đầu.
Các khai báo trong JavaScript được nâng lên(JavaScript Declarations are Hoisted)
Trong JavaScript, một biến có thể được khai báo sau khi nó đã được sử dụng.
Nói cách khác; một biến có thể sử dụng trước khi nó được khai báo.
Ví dụ 1 cho kết quả giống với ví dụ 2:
ví dụ 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 xx = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
var x; // Declare xví dụ 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<!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>
Để hiểu được điều này, bạn phải hiểu thuật ngữ "nâng lên(hoisting)".
Nâng lên(hoisting) là một hành động mặc định của việc di chuyển các khai báo lên trên đầu của phạm vi hiện tại (đến đầu của tập lệnh hiện tại hoặc hàm hiện tại).
Từ khóa let và const(The let and const Keywords)
Các biến và các hằng được khai báo với let hoặc const sẽ không được nâng lên!
Đọc nhiều hơn về let và const trong JavaScript Let/Const.
Các khởi tạo JavaScript không được nâng lên(JavaScript Initializations are Not Hoisted)
JavaScript chỉ nâng lên các khai báo, không phải các khởi tạo.
Ví dụ 1 không cho kết quả giống với ví dụ 2:
ví dụ 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<!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>
ví dụ 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<!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>
Nó có ý nghĩa gì không nếu y là undefined trong ví dụ cuối cùng?
Điều này bởi vì chỉ có sự khai báo (var y), không phải sự khởi tạo (=7) được nâng lên đầu.
Bởi vì sự nâng lên, y đã được khai báo trước khi nó được dùng, nhưng bởi vì sự khởi tạo không được nâng lên, giá trị của y là undefined.
Ví dụ 2 được viết giống thế này:
ví dụ 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> Khai báo các biến của bạn ở trên đầu!
Nâng lên (đối với nhiều nhà phát triển) là một hành vi chưa biết hoặc bị bỏ qua của JavaScript.
Nếu nhà phát triển không hiểu về nâng lên, chương trình có thể chứa các lỗi.
Để tránh các lỗi, luôn khai báo tất cả các biến ở đầu của mỗi phạm vi.
Từ khi đây là cách mà JavaScript giải mã code, nó luôn là một quy tắc tốt.
JavaScript trong chế độ nghiêm ngặt(strict) không cho phép các biến được sử dụng nếu nó chưa đựa khai báo.
Học về "dùng strict" trong chương sau.
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
