Học Javascript 5: Execution Stack là gì?

Tại sao cần biết cái khỉ Execution Stack này?

Oke, một lần nữa, để hiểu mấy cái sau như Scope Chain thì việc hiểu Execution Stack này rất quan trọng.

Invoke hàm

Lập trình viên để cool hơn khi thuyết trình hay chém gió cần 'chêm' thấy từ tiếng Anh vô. Ví dụ lập trình hướng đối tượng ta sẽ nói là Ôu ôu pi. Lớp ta sẽ đọc là cờ lát sì, hàm ta sẽ gọi là phân sần.

Giỡn thui, chứ tại mấy ông pro hay đọc nhiều sách, xem nhiều video nên hay bị quen miệng nên lâu lâu bắn tiếng Anh là bình thường.

Quay lại vấn đề để gọi hàm ( chạy hàm ) tiếng Anh là ìn vâu kờ ( invoke  )

Ủa? Đang học Javascript mà ông?

Oke, sau khi khai báo hàm, để chạy ta dùng 2 dấu ( ) sau tên của hàm đó, ví dụ:

function a(){ console.log('niviki.com'); }

a() // invoke hàm

Cái này dễ ẹt, ai không biết?

Sau này có mấy khái niệm dựa trên cái gọi hàm này nè, đừng có kinh nha, tới lúc đó tại sao không nhắc trước, chẳng hạn như đống này:

Invoke hàm mà còn có kiểu function()() như vậy ư, thấy syntax lạ chưa ?

Ngạc nhiên chưa?

Thôi, quay lại bài học nào. Cho ví dụ sau, hỏi Execution Context được tạo như thế nào:

function b(){ var b } function a(){ b() // invoke hàm }

a() // invoke hàm

Execution Stack

Khi chạy, trước tiên Global Execution Context sẽ được tạo trước, tiếp theo là các Execution Context khác được tạo và bỏ vào một stack gọi là Execution Stack

Tức là khi mỗi một hàm thực thi ( invoke function ) sẽ có một Execution Context được tạo ra và xếp vào một stack.

Khi hàm chạy xong,  Execution Context chứa hàm đó sẽ bị pop ra ngoài.

Variable Environment

Cũng đoạn code trên, ta thêm một chút:

function b(){ var myVar } function a(){ b() // invoke hàm var myVar = 69 }

var myVar = 0 a() // invoke hàm

Khi Execution Context được tạo, nó sẽ chứa luôn các biến bên trong nó.

Như ví dụ trên, myVar được khởi tạo 3 lần ở 3 Execution Context khác nhau, mỗi nơi nó một giá trị khác nhau.

Khi hàm chạy xong, Execution Context bị pop ra hết khỏi Execution Stack và chỉ còn 1 Global Execution Context. Vì thế giá trị của myVar sau khi chạy hàm a() là 0

Hình minh họa

Bài tập

var text = 'outside'; function show(){ console.log(text); var text = 'inside'; }; show();

Kết quả in ra là gì? Bạn có thể giải thích được không? Comment bên dưới nhé

Kết

Thiệt ra cái này khi giải thích, mọi người cứ hay nói là scope và người nghe vẫn hiểu đại ý là thư thế.

Nhưng ý mình muốn các bạn hiểu rõ chi tiết, cách nó hoạt động bên trong. Có 2 lợi ích khi hiểu việc này là:

• Để hiểu Scope Chain
• Thứ hai là trong Javascript có function scope và block scope. Hiểu được Execution Stack thì có thể chém gió, giải thích tại sao code nó chạy như thế này, như thế kia dễ dàng hơn => dễ debug hơn