Thấy group mình toàn là C#, mình xin chia sẻ 1 ít về Javscript cho phong phú hơn.

Javascript được bình chọn là ngôn ngữ của năm 2017 và nó được dùng rất nhiều trong ngày nay. Nhưng để học được nó là 1 vấn đề không dễ dàng đối với mình cũng như người khác, 1 người đã học C++/C# bao lâu nay. Mình đang học Javscript và có tham khảo nhiều nguồn trên mạng nên dự định mình sẽ làm loạt bài về Javascript.

Vấn đề đầu tiên và cũng là căn bản mình muốn nhắc đến đó chính là Hoisting trong Javascript

1.      Hoisting in Javascript

Để tiếp cận vấn đề 1 cách dễ dàng thì mình xin đưa ra ví dụ:

Ở VD3 này thì kết quả khá là dễ hiểu, vì chẳng có biến test3 nào ở đây cả

Ở ví dụ đầu tiên trả về kết quả undefined khá là dễ hiểu vì chúng ta đã khai báo nhưng chưa có gán giá trị.

Nhưng vấn đề là ở VD2, những người thường dùng C# như mình mới qa dùng JS thì sẽ bị “ngáo” ngay chỗ này. Tại vì biến test2 được khai báo sau nhưng lại dùng được, đáng lẽ lết quả phải ra “test2 is not define” chứ? => Đây là chính vấn đề Hoisting của JS Engine

Tiếp theo là hàm:

Ở VD4 thì đơn giản rồi, ai cũng  biết

Nhưng VD5 thì có vấn đề? Ủa kì vậy ta, mình đâu có khai báo Function trước đâu mà dùng được, như bên C# thì thua rồi đó nhưng bên C# muốn dùng kiểu này thì mình phải khai báo prototype. ? => Đây là chính vấn đề Hoisting của JS Engine

ĐỊNH NGHĨA: “hoisting teaches that variable and function declarations are physically moved to the top of your code, but this is not what happens at all. What does happen is that variable and function declarations are put into memory during the compile phase, but stays exactly where you typed it in your coding.” Trích MDN.

Cái này hiểu nôm na là hoisting sẽ đưa phần khai báo của hàm và biến lên trên, nó sẽ cấp được phát vùng nhớ nhưng chưa có giá trị. Giá trị đó sẽ đợi chúng ta gán giá trị.

2.      Hoisting variable

QÚA TRÌNH HOẠT ĐỘNG: Khi chúng ta thực hiện lệnh này

Nhưng thực chất thì nó hoạt động như thế này:

ð Kết quả là “undefined” vì chỉ khai báo và cấp phát vùng nhớ, chưa gán giá trị

3.      Hoisting function:

QÚA TRÌNH HOẠT ĐỘNG: VD5 vừa rồi thật chất ra nó cũng sẽ hoạt động như thế này

Chúng ta sẽ đến 1 ví dụ khó hơn:

LƯU Ý: Kết quả là “undefined” vì “var name” chỉ được khai báo bên trong hàm,trước console.log chứ không phải khai báo thành biến Global. Cái này là cơ chế hoạt động của Excution Context (khái niệm này các bạn có thể không cần quan tâm cũng được, nhưng biết về nó càng tốt, sẽ hiểu cơ chế hoạt động JS Engine hơn). Các bạn tạm hiểu nó hoạt động đến này,còn Excution Context mình sẽ có 1 bài viết về nó, đại khái là khi 1 function hoạt động thì nó sẽ tạo 1 Excution Context và Excution Context này sẽ nằm trên Global Excution Context của  và nó sẽ hoạt động theo cơ chế Stack.

Các bạn có thể tham khảo tại đây: http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/

Mình mới học và cũng lần đầu chia sẽ nên có gì bất cập mong mọi người góp ý. Xin cảm ơn.

Mọi người ghé thăm blog của mình: https://nthaihai.wordpress.com/2017/12/09/series-javascript-javascript-hoisting/

Bài viết mình có tham khảo:

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

https://viblo.asia/p/javascript-hoisting-explained-DljMbVKJMVZn