Đã đăng vào thg 11 27, 2017 3:11 SA 3 phút đọc 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
#Ex2:
console.log[a];
a = 'Hello Hoisting';
8, bởi biến #Ex2:
console.log[a];
a = 'Hello Hoisting';
9 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:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
8Ví dụ 3:
#Ex3:
var a;
console.log[a];
Output sẽ là
#Ex3:
var a;
console.log[a];
1 vì #Ex2:
console.log[a];
a = 'Hello Hoisting';
9 đã đượ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:
var a;
console.log[a];
3, đều là #Ex3:
var a;
console.log[a];
1 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
#Ex3:
var a;
console.log[a];
5 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: Giải thích:
Trình biên dịch của Javascript sẽ phân tách phần
6 thành 2 phần là khai báo và gán giá trị#Ex3: var a; console.log[a];
- Khai báo:
7#Ex3: var a; console.log[a];
- Gán giá trị
8#Ex3: var a; console.log[a];
- 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à
1#Ex3: var a; console.log[a];
2. Hoisting of function?
Đị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
say_something['YOLO'];
function say_something[a]{
console.log[a];
}
Chúng ta sẽ tiếp tục làm
#Ex3:
var a;
console.log[a];
5 và phần giải thích làm rõ hơn cho ví dụ 4.Kết quả sẽ được diễn giải theo sơ đồ sau: Giải thích:
#Ex7:
do_something[];
function do_something[]{
console.log[a];
var a = 'fly';
}
Trình biên dịch của Javascript sẽ phân tách phần
#Ex3:
var a;
console.log[a];
6 thành 2 phần là khai báo và gán giá trịKhai báo:
#Ex3:
var a;
console.log[a];
7- Gán giá trị
8#Ex3: var a; console.log[a];
- 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à
1phần khai báo chỉ được chuyển lên trên top của hàm#Ex3: var a; console.log[a];
1 chứ không phải của chương trình#Ex4: console.log[a]; var a;
2. Hoisting of function?
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:
Output cũng giống như với phần biến #Ex4:
console.log[a];
var a;
0
#Ex4:
console.log[a];
var a;
Ví dụ 7: Ví dụ 8:
var show_me;
show_me[];
function show_me[] {
console.log['Money'];
}
show_me = function[] {
console.log['Diamond'];
}
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
#Ex4:
console.log[a];
var a;
1 cũng được trình biên dịch sử dụng #Ex4:
console.log[a];
var a;
2.var show_me;
show_me[];
function show_me[]{
console.log['Money'];
}
show_me = function[]{
console.log['Diamond'];
}
function show_me[]{
console.log['Gem'];
}
Nhưng phần khai báo chỉ được chuyển lên trên top của hàm
#Ex4:
console.log[a];
var a;
1 chứ không phải của chương trìnhVậy nên, Output sẽ là #Ex3:
var a;
console.log[a];
1
#Ex3:
var a;
console.log[a];
- 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à #Ex4:
console.log[a];
var a;
5
#Ex4:
console.log[a];
var a;
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:
Đã đăng vào thg 9 13, 2021 3:08 SA 3 phút đọc 3 phút đọc
Mở đầu
Những người mới bắt đầu tìm hiểu về Javascript sẽ thắc mắc khi gặp một số trường hợp sử dụng biến rồi mới khai báo sau. Vì theo quy tắc chung của đa số các ngôn ngữ lập trình, để sử dụng một biến thì ta phải khai báo nó trước. Làm được như thế vì trong Javascript có cơ chế Hoisting, trong bài viết này chúng ta sẽ tìm hiểu cơ chế Hoisting trong Javascript. Để hiểu về Hoisting trước tiên phải bạn phải hiểu về Scope trong Javascript.
Làm được như thế vì trong Javascript có cơ chế Hoisting, trong bài viết này chúng ta sẽ tìm hiểu cơ chế Hoisting trong Javascript. Để hiểu về Hoisting trước tiên phải bạn phải hiểu về Scope trong Javascript.
Hoisting là gì ?
Hoisting là cơ chế mặc định của JavaScript để di chuyển tất cả các biến và hàm khi khai báo lên đầu scope trước khi chúng được thực thi. Lưu ý đối với cơ chế này nó chỉ di chuyển khai báo, còn việc gán giá trị thì giữ nguyên.
Lưu ý đối với cơ chế này nó chỉ di chuyển khai báo, còn việc gán giá trị thì giữ nguyên.
Hoisting variables
Vòng đời của biến trong javascript bao gồm các giai đoạn sau:
- Khai báo
- Khởi tạo giá trị mặc định
- Gán một giá trị cho biến được khởi tạo Tuy nhiên, vì Javascript cho phép ta gán giá trị ngay khi khai báo biến. Đây là cách chúng ta thường làm:
Tuy nhiên, vì Javascript cho phép ta gán giá trị ngay khi khai báo biến. Đây là cách chúng ta thường làm:
var hoist = 500;
Các bạn thử đoán xem kết quả của đoạn code sau đây là gì:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
0Mình đoán sẽ có nhiều người nghĩ rằng kết quả là
#Ex4:
console.log[a];
var a;
7 vì ta đang truy cập vào một biến chưa được khai báo trước đó. Nhưng không, kết quả của đoạn code trên là #Ex3:
var a;
console.log[a];
1. LOL vì sao lại thế ??? Cơ chế Hoisting của Javasript đã đưa khai báo biến lên trên cùng. Dưới đây mình sẽ mô tả những gì đã xảy ra. LOL vì sao lại thế ???
Cơ chế Hoisting của Javasript đã đưa khai báo biến lên trên cùng. Dưới đây mình sẽ mô tả những gì đã xảy ra.
#Ex2:
console.log[a];
a = 'Hello Hoisting';
1Nếu bạn sẽ thắc mắc khai báo được đưa lên trên cùng, trên cùng là ở đâu. Trên cùng là vị trí cao nhất trong scope hện tại [current scope]. Ví dụ:
Ví dụ:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
2Function trên tương tự như thế này:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
3Hoisting functions
Trong Javascript có hai loại hàm là:
- Khai báo hàm [Function Declaration]
- Biểu thức hàm [Function Expression] Với function declarations thì bạn khai báo bắt đầu là function operator, sau đó gán cho nó một cái tên như ví dụ dưới đây:
Với function declarations thì bạn khai báo bắt đầu là function operator, sau đó gán cho nó một cái tên như ví dụ dưới đây:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
4Còn với function expressions thì bạn tạo một variable sau đó gán cho nó với một anonymous function như ví dụ sau đây:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
5Trong Javascript thì Function declarations có thuộc tính Hoisting, còn Function expression thì không. Chúng ta cùng xem các ví dụ sau đây:
Chúng ta cùng xem các ví dụ sau đây:
#Ex2:
console.log[a];
a = 'Hello Hoisting';
6#Ex2:
console.log[a];
a = 'Hello Hoisting';
7Haizzz... tới đây bạn cảm thấy Hoisting như thế nào. Cá nhân mình thì thấy Hositing có thể dẫn để code của chúng ta cẩu thả và khó quản lý. Và phiên bản ES6 sinh ra nhằm cải tiến các vấn đề Javascript gặp phải.
Tổng kết
Trên đây mình đã giải thích về Hoisting trong Javascript. Chỉ ra một phần sự khác nhau giữa Function expression và Function declaration.Function expression và Function declaration.
Tham khảo
//dmitripavlutin.com/variables-lifecycle-and-why-let-is-not-hoisted/ //xdevclass.com/hieu-sau-ve-hoisting-scope-trong-javascript/
All rights reserved