Lesson 10 — Hàm & Closures

Ba công cụ tương tác chạy trên một interpreter JS thật có hàm/closure: (1) Call stack visualizer cho đệ quy phình/xẹp, (2) Closure explorer xem hàm "nhớ" biến, (3) Closure loop bug minh họa lỗi bắt biến lặp.

1. Call Stack Visualizer — đệ quy phình rồi xẹp

Chọn hàm đệ quy, nhập n, rồi "Chạy từng bước" để xem mỗi lời gọi push một frame, mỗi return pop và lan giá trị ngược lên.


    

      
      
      
      sẵn sàng
    

    

      Bước: 0
      Độ sâu hiện tại: 0 frame
      Độ sâu tối đa: 0 frame
      Kết quả: —
    

    

      

        
Call stack (đỉnh ở trên)

        
stack rỗng — bấm "Bước tiếp"

      

      

        
Nhật ký push / pop

        
(chưa chạy)

      

    

  


  
  
2. Closure Explorer — hàm "nhớ" biến

  
makeAdder(x) trả về một hàm con bắt giữ x. Tạo vài adder với x khác nhau, rồi gọi chúng để thấy mỗi closure tra x từ environment captured của riêng nó.

  

    
fn makeAdder(x) {
  fn inner(n) { return n + x; }   // x là biến tự do, bắt từ makeAdder
  return inner;
}

    

      
      
      
      
    

    

    
  


  
  
3. Closure Loop Bug — bắt biến, không bắt giá trị

  
Vòng lặp tạo nhiều closure. Nếu cả vòng dùng một biến lặp chung (bug), mọi closure trỏ cùng ô nhớ → in cùng giá trị cuối. Bật/tắt để so sánh với bản đã sửa (biến mới mỗi vòng).

  

    

      
        
        
      
      
      
      
    

    

    
Kết quả khi gọi từng closure: