Lesson 07 — Bảng ký hiệu & Phạm vi (Symbol Table & Scope)

Ba công cụ tương tác chạy bằng logic scope thật viết bằng JavaScript: Scope Visualizer (chạy từng dòng, push/pop ngăn xếp scope, tra biến qua scope chain), Shadowing demo (cùng tên ở nhiều mức → mỗi print ra giá trị nào), và Error detector (bắt undefined & redeclaration).

Quy ước cú pháp giả: { mở khối · } đóng khối · let x = ... khai báo MỚI ở scope hiện tại · x = ... gán vào biến đã tra được · print x in giá trị tra được. Một lệnh / một dòng.

1. Scope Visualizer — chạy từng dòng

Nhập code khối lồng rồi bấm Bước tiếp → để thực thi từng dòng. Cột phải là ngăn xếp scope (đỉnh ở trên cùng): { đẩy scope mới, } bật scope ra. Mỗi scope hiện các entry của nó. Tra biến (lookup) tô xanh scope tìm thấy — minh hoạ shadowing.

{ let x = 1;
  { let x = 2;
    print x;
  }
  print x;
}

Mẫu:

Mã nguồn

Ngăn xếp scope

Nhật ký thực thi

Tra cứu thủ công (lookup)

Khi đang chạy giữa chừng, gõ tên biến để xem lookup đi qua những scope nào, dừng ở đâu (hoặc thất bại → undefined).

2. Shadowing demo — cùng tên ở nhiều mức

Biến x được khai báo ở nhiều tầng lồng nhau. Mỗi print x đặt ở một tầng sẽ tra ra giá trị gần nhất từ trong ra ngoài. Đổi giá trị từng tầng (hoặc tắt khai báo) để thấy print nào "đổi nghĩa".

Tầng 1 (ngoài cùng): let x =

Tầng 2: let x =

Tầng 3 (trong cùng): let x =

3. Error detector — undefined & redeclaration

Quét code từng dòng giống một resolution pass: tại nút khai báo kiểm tra trùng tên trong chính scope hiện tại (redeclaration); tại nút sử dụng gọi lookup trên scope chain — thất bại là undefined variable. Vế phải của let được resolve TRƯỚC khi thêm tên (nên let x = x tra x ngoài).

{
  let x = 1;
  let x = 2;
  { let y = z; }
  print total;
}

Mẫu: