Hướng dẫn hoisting javascript
Show
Đã đăng vào thg 11 27, 2017 3:11 SA 3 phút đọc Bài viết hôm nay của mình để cập đến một tính chất của Javascript đó là Hoisting, vậy Hoisting là gì ?? Hoisting của biến và của hàm khác gì nhau ?? Chúng ta sẽ làm rất rất nhiều ví dụ bên dưới để hiểu rõ hơn nhé (ok)1. Javacript Hoisting?Bắt đầu với ví dụ 1 nào (len)
Kết quả không có gì lạ: raise lỗi Ví dụ 2:
Ví dụ này có vẻ phức tạp hơn ví dụ trên "rất nhiều" nhưng kết quả vẫn chỉ có một: Ví dụ 3:
Output sẽ là Ví dụ 4
Thật tình cờ và thật bất ngờ, kết quả ra trùng với Định nghĩaHoisting là hành động mặc định của Javascript, nó sẽ chuyển phần khai báo lên phía trên top Trong Javascript, một biến (variable) có thể được khai báo sau khi được sử dụng Chúng ta sẽ tiếp tục làm
Kết quả sẽ được diễn giải theo sơ đồ sau: Giải thích:
2. Hoisting of function?Định nghĩaTrình biên dịch Javascript sẽ chuyển phần khai báo lên trên top giống như cách làm với biến. Ví dụ 6:
Output cũng giống như với phần biến Ví dụ 7:
Kết quả sẽ được diễn giải theo sơ đồ sau: Giải thích:
Vậy nên, Output sẽ là 3. Hoisting function vs Hoisting variableĐịnh nghĩa:Trình biên dịch Javascript sẽ chuyển phần đinh nghĩa của hàm trước phần khai báo của biến Ví dụ 8:
Theo định nghĩa trên, output sẽ là Những hàm khai báo sau nếu trùng tên sẽ ghi đè lên hàm khai báo trước Ví dụ 9:
Output sẽ là 4. Tổng kết
5. Tài liệu tham khảohttps://github.com/getify/You-Dont-Know-JS/blob/master/scope %26 closures/ch4.md - You don't know JS https://viblo.asia/p/javascript-hoisting-explained-DljMbVKJMVZn - JavaScript Hoisting Explained - Lê Minh Tuấn - Viblo All rights reserved Đã đăng vào thg 12 5, 2018 8:15 SA 3 phút đọc Hôm nay mình sẽ giới thiệu về hoisting trong Javascript, một vấn đề không còn mới nhưng với những ai mới bắt đầu với JS thì sẽ gặp nhiều khó khăn khi không hiểu rõ được bản chất vấn đề. Hoisting là gìVề cơ bản thì khi Javascript Engine compile code của chúng ta, tất cả các biến được định nghĩa bằng toán tử var sẽ được hoisted/lifted lên phía trên scope hiện tại mà nó được định nghĩa, cụ thể là function nếu nó được định nghĩa trong function, và global scope nếu được định nghĩa bên ngoài function mà không có quan tâm đến vị trí ta khai báo. Ví đơn giản như sau
Theo bạn thì console.log sẽ in ra gì ?
Như được đề cập ở trên thì console sẽ in ra màn hình "myString". Định nghĩa biến someString được đưa lên đầu, ta có thể access và assign giá trị cho nó. someString sẽ có giá trị undefined khi mới chỉ được hoisted. Và các bạn nên phân biệt giữa null và undefined. Undefined là variable đã được declare nhưng chưa được assign giá trị, còn null là nonexist value. Javascript chỉ hoisting variable declaration.
Console sẽ print ra undefined chứ không ra "myString" vì JS chỉ hoisting declaration của variable Hoisting functionMột Ví dụ đơn giản khác của hoisted function là như sau
Kết quả in ra màn hình sẽ là Money bởi: Chỉ phần declaration của doSomething được hoisted lên trên đầu, phần assign value cho doSomething( print ra diamond ) không được hoisted. Arrow function and funciton expressionArrow function và function expression không được javascript hoisted
Nếu bạn chạy đoạn code trên thì sẽ có lỗi runtime somefunc, doSomething is not defined. Lý do bởi vì function expression không được Javascript hoisted Multiple declartion in samescopeChúng ta đã biết hoisting là gì, vậy hãy đoán xem kết quả của đoạn code sau là gì
Thoạt nhìn có lẽ sẽ đoán là print ra "String in function". Nhưng thực tế khi run thì sẽ print ra Error test is not function. Bởi vì với multiple declaration trong cùng 1 scope(cả varaible và function) thì hoisting của variable bị ignore và đoạn code trên sẽ được JS engine thực hiện như sau
Preventing scope problemsĐể hạn chế các vấn đề problem về phạm vi sử dụng scope của các variable, chúng ta có một số cách sau:
Conclusion
Trên đây là một số hiểu biết của mình về hoisting, rất mong nhận được góp ý của các bạn ! All rights reserved |