Giới thiệu Temporal Dead Zone trong Javascript
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
// có chạy được ko, chưa khai báo `Car`
new Car('red');
class Car {
constructor(color) {
this.color = color;
}
}
hoặc gọi một hàm trước khi nó được khai báo
// có chạy được ko, chưa khai báo greet
greet('VuiLapTrinh');
function greet(who) {
return `Hello, ${who}!`;
}
Đá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 let, const, class
Bắt đầu với khai báo const
white; // throws `ReferenceError` const white = '#FFFFFF'; white;
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à let, const, class
count; // throws `ReferenceError`
let count;
count = 10;
const myNissan = new Car('red'); // throws `ReferenceError`
class Car {
constructor(color) {
this.color = color;
}
}
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
class MuscleCar extends Car {
constructor(color, power) {
this.power = power;
super(color);
}
}
const myCar = new MuscleCar('blue', '300HP'); // `ReferenceError`
Chúng ta phải dùng this. sau khi gọi super
Với những cách khai báo cũ là var, function 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.
Tham khảo tuyển dụng javascript lương cao trên Station D
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
myFunction();
import { myFunction } from './myModule';
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ụ
function doSomething(someVal) {
// Function scope
typeof variable; // => undefined
if (someVal) {
// Inner block scope
typeof variable; // throws `ReferenceError`
let variable;
}
}
doSomething(true);
Station D via Vuilaptrinh
Tham khảo thêm các vị trí tuyển ngành IT trên Station D
