Đã đăng vào thg 11 27, 2017 3:11 SA 3 phút đọc
1. Javacript Hoisting?
Bắt đầu với ví dụ 1 nào [len]
#Ex1:
console.log[a];
Kết quả không có gì lạ: raise lỗi a is not define
, bởi biến a
chưa được khai báo ở đâu cả
Ví dụ 2:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
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: a is not define
Ví dụ 3:
#Ex3:
var a;
console.log[a];
Output sẽ là undefined
vì a
đã được khai báo nhưng vẫn chưa được gán giá trị
Ví dụ 4
#Ex4:
console.log[a];
var a;
Thật tình cờ và thật bất ngờ, kết quả ra trùng với Ex3
, đều là undefined
Tại sao lại như vậy ???
Định nghĩa
Hoisting 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 Ex5
và phần giải thích làm rõ hơn cho ví dụ 4.
#Ex5
console.log[a];
var a = 'Hello Hoisting'
#Output = ???
Kết quả sẽ được diễn giải theo sơ đồ sau:
Trình biên dịch của Javascript sẽ phân tách phần
var a = 'Hello Hoisting'
thành 2 phần là khai báo và gán giá trị- Khai báo:
var a
- Gán giá trị
a = 'Hello Hoisting'
- Khai báo:
Theo Hoisting, Javascipt sẽ chuyển phần khai báo lên trên top. Vì vậy, sẽ chỉ có phần khai báo được chuyển lên trên top, còn phần gán giá trị vẫn giữ nguyên thứ tự nên vẫn ở dưới Vậy nên Output sẽ là
undefined
2. Hoisting of function?
Định nghĩa
Trì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:
say_something['YOLO'];
function say_something[a]{
console.log[a];
}
Output cũng giống như với phần biến YOLO
Ví dụ 7:
#Ex7:
do_something[];
function do_something[]{
console.log[a];
var a = 'fly';
}
Kết quả sẽ được diễn giải theo sơ đồ sau:
Giải thích:
- Cũng giống như với phần 1, phần bên trong của hàm
do_something
cũng được trình biên dịch sử dụnghoisting
. - Nhưng phần khai báo chỉ được chuyển lên trên top của hàm
do_something
chứ không phải của chương trình
Vậy nên, Output sẽ là undefined
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:
var show_me;
show_me[];
function show_me[] {
console.log['Money'];
}
show_me = function[] {
console.log['Diamond'];
}
Theo định nghĩa trên, output sẽ là Money
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:
var show_me;
show_me[];
function show_me[]{
console.log['Money'];
}
show_me = function[]{
console.log['Diamond'];
}
function show_me[]{
console.log['Gem'];
}
Output sẽ là Gem
4. Tổng kết
- Trình biên dịch của Javascript sẽ chuyển phần khai báo của biến và hàm lên trên top, nó được gọi là Hoisting
- Chỉ có phần khai báo được đưa lên top, không phải phần gán giá trị
- Phần khai báo hàm được đưa lên trước phần khai báo của biến
5. Tài liệu tham khảo
//github.com/getify/You-Dont-Know-JS/blob/master/scope %26 closures/ch4.md - You don't know JS //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
someString = "myString";
console.log[someString];
var someString;
Theo bạn thì console.log sẽ in ra gì ?
- Uncaught ReferenceError: myName is not defined
- Sunil
- undefined
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.log[someString];
var someString = "myString";
Console sẽ print ra undefined chứ không ra "myString" vì JS chỉ hoisting declaration của variable
Hoisting function
Một Ví dụ đơn giản khác của hoisted function là như sau
var doSomething;
doSomething[];
function doSomething[] {
console.log['Money'];
}
doSomething = function[] {
console.log['Diamond'];
}
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 expression
Arrow function và function expression không được javascript hoisted
doSomething[]
somefunc[]
const doSomething = function somefunc[] {
console.log[123]
}
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 samescope
Chú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ì
function testHoisting[] {
var test = "someString";
function test[] {
return "String in function";
}
return test[];
}
console.log[testHoiting[]];
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
function testHoisting[] {
function test[] {
return "String in function";
}
test = "someString";
return test[];
}
console.log[testHoiting[]];
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:
- Khai báo tất cả các biến ở đầu của mỗi function
- Tránh sử dụng var để khai báo các biến
- Chỉ sử dụng một câu lệnh let hoặc const để khai báo biến trong 1 function. Ex:
let one, two, three, four;
vs
let one;
let ...
- Luôn khai báo các biến trước khi sử dụng chúng
Conclusion
- Hoisting là việc JS engine đưa declaration của variable và function lên top của scope chúng được declare
- Arrow function và function expression không được hoisted
- Nếu có nhiều declaration trùng identifier thì hoisting của variable sẽ bị bỏ qua
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