Hoisting cho phép chúng ta gọi hàm và biến (khai báo với var) trước khi chúng được định nghĩa bằng cách di chuyển chúng lên đầu phạm vi (scope) của chúng trước khi thực thi mã bắt đầu.
Dưới đây là mã minh họa hoisting cho biến và hàm trong JavaScript:
Ví dụ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result,.sample { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>Hoisting in JavaScript</h1> <div class="sample"> Calling functions and variables before they are defined </div> <div style="color: green;" class="result"></div> <button class="btn">CLICK HERE</button> <h3> Click on the above button to see hoisting in action </h3> <script> let btnEle = document.querySelector(".btn"); let resEle = document.querySelector(".result"); btnEle.addEventListener("click", () => { resEle.innerHTML = "retString() : " + retString() + "<br>"; resEle.innerHTML += "var a = " + a + "<br>"; try { resEle.innerHTML += "let b = " + b + "<br>"; } catch (err) { resEle.innerHTML += err; } let b = 55; var a = 22; function retString() { return "Hello world"; } }); </script> </body> </html>Kết quả
Mã trên sẽ tạo ra đầu ra sau:
Khi nhấn nút 'CLICK HERE':
