Tìm hiểu JavaScript Hoisting - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Tìm hiểu JavaScript Hoisting

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript.

Hoisted trong Javascript

Trong JavaScript, một biến có thể được khai báo sau khi đã được sử dụng. Nói cách khác, một biến có thể được sử dụng trước khi nó được khai báo.

Ví dụ 1 cho kết quả tương tự như ví dụ 2:

Ví dụ 1:

x = 5; // gán 5 cho x

elem = document.getElementById(“demo”); // Tìm một phần tử
elem.innerHTML = x;                     // Hiển thị x in phần tử

var x; // Khai báo x

Ví dụ 2:

var x; // Khai báo x
x = 5; // gán 5 cho x

elem = document.getElementById(“demo”); // Tìm một phần tử
elem.innerHTML = x;                     // Hiển thị x in phần tử

Để hiểu điều này, bạn phải hiểu thuật ngữ “hoisting”. Hoisting là hành vi mặc định của JavaScript để di chuyển tất cả các khai báo lên đầu phạm vi hiện tại (lên đầu tập lệnh hiện tại hoặc hàm hiện tại).

Không phải hoisted trong Javascript

Trong Javascript hoists chỉ tồn tại khi bạn khai báo biến chứ không tồn tại khi gán giá trị ban đầu cho biến. Ví dụ 1 không cho kết quả tương tự như ví dụ 2.

Ví dụ 1:

var x = 5; // Khởi tạo x
var y = 7; // Khởi tạo y

elem = document.getElementById(“demo”); // Tìm một phần tử
elem.innerHTML = x + ” ” + y;           // Hiển thị x và y

Ví dụ 2:

var x = 5; // Khởi tạo x

elem = document.getElementById(“demo”); // Tìm một phần tử
elem.innerHTML = x + ” ” + y;           // Hiển thị x và y

var y = 7; // Khởi tạo y

Điều này là do chỉ có khai báo (var y) chứ không phải khởi tạo (= 7) được đưa lên trên. Bởi vì hoisting, y đã được tuyên bố trước khi nó được sử dụng, nhưng vì khởi tạo không hoisted nên giá trị của y là undefined. Ví dụ 2 cũng có thể được viết như sau:

var x = 5; // Khởi tạo x
var y;     // Khai báo y

elem = document.getElementById(“demo”); // Tìm một phần tử
elem.innerHTML = x + ” ” + y;           // Hiển thị x và y

y = 7;    // Gán 7 cho y

Khai báo biến trên đầu

Hoisting là (cho nhiều nhà phát triển) một hành vi không rõ hoặc bị bỏ qua của JavaScript. Nếu một nhà phát triển không hiểu tời hoisting, các chương trình có thể chứa lỗi (lỗi).

Để tránh lỗi, hãy luôn khai báo tất cả các biến ở đầu mỗi phạm vi. Vì đây là cách JavaScript diễn giải mã, luôn luôn là một quy tắc tốt.