Hoisting là một trong những thuật ngữ thông dụng mà lập trình viên JS đều phải nghe qua. Vậy Hoisting là gì trong javascript mà nó lại biến thành một thuật ngữ được tìm kiếm nhiều đến vậy.
Hoisting là gì?
Nếu bạn là một người mới tiếp cận với ngôn ngữ JavaScript (JS), bạn có thể bắt gặp những hành vi "kỳ lạ" như khi gán một biến trước khi khai báo chúng. Đó được gọi là Hoisting và Hoisting thường được giải thích là đặt các biến và hàm lên đầu tệp nhưng không, đó không phải là những gì thực sự xảy ra, nhưng hành vi có thể giống như vậy.
Khi JS Engine thực thi, điều đầu tiên là thiết lập bộ nhớ cho dữ liệu trong mã của chúng ta. Không có mã nào được thực thi tại thời điểm này, nó chỉ đơn giản là chuẩn bị mọi thứ sau đó mới thực thi. Cách khai báo hàm và biến được lưu trữ khác nhau. Các hàm được lưu trữ với một tham chiếu đến toàn bộ hàm.
Với biến, nó có một chút khác biệt. Giới thiệu chút về ES6 ta có 2 dạng khai báo mới là let và const. Những biến khái báo với let hoặc const được lưu trữ chưa khởi tạo stored unitialized.
Những biến khai báo với var sẽ được lưu trữ với giá trị mặc định là undefined.
Bây giờ giai đoạn thiết lập đã xong, đến phần thực thi các đoạn mã trong mã nguồn của bạn. Hãy xem xét điều gì sẽ xảy ra nếu chúng ta đặt console.log lên đầu tệp mã javascript, trước khi chúng ta khai báo các function hoặc bất kì biến nào khác.
Các function được lưu trự dưới dạng tham chiếu đến toàn bộ mã của hàm, chúng ta có thể gọi chúng ngay cả trước khi dòng mà chúng ta tạo ra chúng.
Khi chúng ta tham chiếu đến một biến được khai báo với var trước khi chúng được khai báo, đơn giản nó sẽ trả về kết quả undefined đã được lưu trữ trong quá trình thiết lập. Tuy nhiên, điều này cũng có thể dẫn đến kết quả unexpected. Trong hầu hết các trường hợp, điều này có nghĩa là bạn đang vô tình tham chiếu đến nó (có thể bạn không muốn nó thực sự có giá trị không xác định).
Để tránh việc có thể vô tình tham chiếu đến một biến undefined, giống như chúng ta có thể làm với từ khoá var, một ReferenceError sẽ xuất hiện bất cứ khi nào chúng ta cố gắng truy cập vào các biến chưa được khởi tạo. "Vùng" trước khi khai báo thực tế của chúng, được gọi là vùng chết tạm thời: bạn không thể tham chiếu các biến (điều này bao gồm cả các lớp ES6!) trước khi khởi tạo chúng
Khi JS Engine thực thi đến dòng mà chúng ta đã khai báo các biến, các giá trị trong bộ nhớ sẽ được ghi đè bằng các giá trị mà chúng ta gán cho chúng
Có thể bạn sẽ cần
- Phiên dịch từ: Bài đọc gốc