Hoisting trong JavaScript là một hành vi trong đó một hàm hoặc biến có thể được sử dụng trước khi khai báo. Ví dụ,
// using test before declaring
console.log(test); // undefined
var test;
Chương trình trên hoạt động và đầu ra sẽ là undefined. Chương trình trên hoạt động như sau:
// using test before declaring
var test;
console.log(test); // undefined
Vì biến test chỉ được khai báo và không có giá trị, nên giá trị undefined
được gán cho nó.
Lưu Ý : Trong hiện tượng nâng lên (hoisting), mặc dù có vẻ như khai báo đã được di chuyển lên trong chương trình, thực tế xảy ra là các khai báo hàm và biến được thêm vào bộ nhớ trong giai đoạn biên dịch.
Hiện Tượng Nâng Lên Của Biến
Về mặt biến và hằng số, từ khóa var
được nâng lên (hoisted) và let
cùng const
không cho phép hiện tượng nâng lên.
Ví dụ,
// program to display value
a = 5;
console.log(a);
var a; // 5
Trong ví dụ trên, biến a được sử dụng trước khi khai báo. Và chương trình hoạt động và hiển thị đầu ra là 5. Chương trình hoạt động như sau:
// program to display value
var a;
a = 5;
console.log(a); // 5
Tuy nhiên, trong JavaScript, việc khởi tạo không được hiện lên (hoisted). Ví dụ,
// program to display value
console.log(a);
var a = 5;
Đầu Ra
undefined
Chương trình trên hoạt động như sau:
var a;
console.log(a);
a = 5;
Chỉ có phần khai báo được di chuyển vào bộ nhớ trong giai đoạn biên dịch. Do đó, giá trị của biến a là undefined
vì a được in ra mà không khởi tạo.
Ngoài ra, khi biến được sử dụng bên trong hàm, biến chỉ được nâng lên (hoisted) lên đầu của hàm. Ví dụ,
// program to display value
var a = 4;
function greet() {
b = 'hello';
console.log(b); // hello
var b;
}
greet(); // hello
console.log(b);
Đầu Ra
hello
Uncaught ReferenceError: b is not defined
Trong ví dụ trên, biến b được nâng lên đầu của hàm greet
và trở thành biến cục bộ. Do đó, biến b chỉ có thể truy cập trong hàm. b không trở thành biến toàn cầu.
Lưu Ý : Trong hiện tượng nâng lên (hoisting), khai báo biến chỉ có thể truy cập được trong phạm vi ngay lập tức.
Nếu một biến được sử dụng với từ khóa let
, thì biến đó không được nâng lên. Ví dụ,
// program to display value
a = 5;
console.log(a);
let a; // error
Đầu Ra
Uncaught ReferenceError: Cannot access 'a' before initialization
Khi sử dụng let
, biến phải được khai báo trước.
Hiện Tượng Nâng Lên của Hàm
Một hàm có thể được gọi trước khi khai báo. Ví dụ,
// program to print the text
greet();
function greet() {
console.log('Hi, there.');
}
Đầu Ra
Hi, there
Trong chương trình trên, hàm greet
được gọi trước khi khai báo và chương trình hiển thị đầu ra. Điều này là do hiện tượng nâng lên.
Tuy nhiên, khi một hàm được sử dụng như một biểu thức , một lỗi sẽ xảy ra vì chỉ có các khai báo được nâng lên. Ví dụ;
// program to print the text
greet();
let greet = function() {
console.log('Hi, there.');
}
Đầu Ra
Uncaught ReferenceError: greet is not defined
Nếu var
được sử dụng trong chương trình trên, lỗi sẽ là:
Uncaught TypeError: greet không phải là một hàm
Lưu Ý : Thường thì hiện tượng nâng lên không được thực hiện trong các ngôn ngữ lập trình khác như Python, C, C++, Java.
Hiện tượng nâng lên có thể gây ra các kết quả không mong muốn trong chương trình của bạn. Và tốt nhất là khai báo biến và hàm trước khi sử dụng và tránh hiện tượng nâng lên.
Trong trường hợp biến, tốt hơn là sử dụng let
thay vì var
.
- Bài viết blog này được xuất bản ban đầu tại:https://www.programiz.com/