Home Công nghệ Giới thiệu Temporal Dead Zone trong Javascript

Giới thiệu Temporal Dead Zone trong Javascript

1132
Bạn đã biết hoisted? Bạn cần biết thêm khái niệm Temporal Dead Zone là đủ một cặp

Khu vực tự trị, ngoài vòng pháp luật.

Đoạn code bên dưới sẽ cho kết quả thế nào, đố bạn

hoặc gọi một hàm trước khi nó được khai báo

Đáp án là, với trường hợp sử dụng một class chưa được khai báo, kết quả là ReferenceError, còn sử dụng hàm chưa khai báo, chạy bình thường 😂😓🤔

Temporal Dead Zone (TDZ – khu vực tự trị) là nơi quản lý tính khả thi của letconstclass

Bắt đầu với khai báo const

Trước khi có sự xuất hiện của const white = '#FFFFFF', biến white sẽ nằm trong khu vực tự trị (TDZ)

Chúng ta không thể truy cập vào khu vực tự trị này, nên nó sẽ trả về lỗi ReferenceError: Cannot access 'white' before initialization

Khái niệm này giúp tránh sự lằng nhằng trong javascript trước đây, được phép sử dụng trước khi khai báo. Vì nó chỉ được thêm vào sau này, nên chỉ có hiệu lực trên các từ khóa sau này mới có là letconstclass

Nó cũng giải thích luôn tại sao chúng ta phải gọi super trong class trước khi gọi this, vì this tạm thời nằm trong khu TDZ khi chưa gọi super

Chúng ta phải dùng this. sau khi gọi super

Với những cách khai báo cũ là varfunction nó không chịu chung số phận phải sống trong khu tự trị, nó sẽ chịu khái niệm Hoisting.

Hoisting là một cơ chế hoạt động gây khó dễ anh em chúng ta đã bao nhiêu thập kỷ nay.

Anh em ra đường gặp một em chưa hề quen biết, chúng ta nhẹ nhàng tới hỏi “Em nhà ở đâu thế?”, nhận được câu trả lời anh lên phường tra cứu, lên đến phường, “chẳng ai biết ẻm là ai”, phường chỉ lên quận tra cứu, quận lại bảo “có mà lên ủy ban thành phố chú ạ”, lỡ mà xui xui chúng ta phải lên đến trung ương để biết rằng em đã đăng ký hộ khẩu ở đâu.

// chạy như thường, nhưng đừng viết gì nhá
value; // => undefined
var value;

greet(‘VuiLapTrinh’); // => ‘Hello, VuiLapTrinh!’
function greet(who) {
return Hello, ${who}!;
}
greet(‘Andy’); // => ‘Hello, Andy!’

Cho nên bạn có thể làm được việc này, xài trước, import sau

TDZ còn phụ thuộc vào từng thành phố, mỗi thành phố sẽ có khu vực tự trị khác nhau

Lấy ví dụ

TopDev via Vuilaptrinh