IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Hoisting - Nâng lên trong JavaScript

JavaScript Hoisting - Nâng lên trong JavaScript

by GokiSoft.Com - 09:46 19/05/2020 2,130 Lượt Xem

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 x
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


ví 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.



Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!