Chào anh em Viblo! 👋
Khi thế giới JavaScript chuyển mình lên chuẩn ES6, cú pháp Class (Lớp) ra đời đã thay đổi hoàn toàn cách chúng ta viết code theo tư duy Lập trình hướng đối tượng (OOP). Thay vì phải ngồi "vò đầu bứt tai" cấu hình các chuỗi Prototype (prototype chaining) loằng ngoằng và dễ lỗi như ngày xưa, bây giờ chúng ta có thể ung dung dùng từ khóa extends để kế thừa class một cách cực kỳ thanh thoát.
Thế nhưng, đi kèm với sự tiện lợi của extends là sự xuất hiện của một từ khóa "bắt buộc" mà bất kỳ ai làm việc với Class cũng phải gõ: super.
Hồi mới chuyển từ viết hàm thuần sang viết Class, mình cứ nghĩ super chỉ là một thủ tục khai báo rườm rà cho vui mắt. Cho đến một ngày, mình quên gõ nó trong hàm khởi tạo (constructor) của một Class con, hệ thống lập tức ném ngay một lỗi đỏ chót phá hỏng toàn bộ ứng dụng: ReferenceError: Must call super constructor in derived class before accessing 'this'.
Hôm nay, hãy cùng mình mổ xẻ tường tận từ khóa super để hiểu rõ cơ chế chạy ngầm bên dưới cánh gà của JavaScript, và tại sao nó lại là quyền lực tối thượng giúp lớp con giao tiếp với lớp cha nhé!
1. Bản chất của từ khóa super là gì?
Trong tiếng Anh, "super" mang ý nghĩa là cấp cao hơn, thượng đẳng hơn. Trong lập trình, super là một từ khóa đặc biệt đóng vai trò như một chiếc cầu nối (pointer/reference) trỏ thẳng từ Lớp con (Derived Class / Subclass) lên Lớp cha (Base Class / Superclass) của nó.
Từ khóa super có đúng hai cách đứng trong code tương ứng với hai nhiệm vụ thực chiến hoàn toàn khác nhau:
- Dạng 1: Gọi như một hàm super(...) $\rightarrow$ Dùng duy nhất bên trong constructor của lớp con để kích hoạt hàm khởi tạo của lớp cha.
- Dạng 2: Gọi như một đối tượng super.methodName(...) $\rightarrow$ Dùng bên trong các phương thức của lớp con để triệu hồi các hàm hoặc thuộc tính của lớp cha.
2. Hai tuyệt chiêu sử dụng super trong thực tế
Để anh em dễ hình dung, chúng ta hãy cùng xây dựng một kịch bản làm hệ thống quản lý nhân sự (HRM) đơn giản với hai Class: lớp cha Employee (Nhân viên tổng quát) và lớp con Developer (Nhân viên lập trình).
Tuyệt chiêu 1: Dùng super() để nạp năng lượng cho lớp cha Khi một Developer được sinh ra, anh ta vừa có các thuộc tính riêng (như ngôn ngữ lập trình language), nhưng đồng thời cũng phải sở hữu các thuộc tính cơ bản của một nhân viên thông thường (như name và salary). Thay vì phải viết lại logic gán this.name, this.salary một lần nữa gây trùng lặp code, ta giao việc đó cho lớp cha xử lý thông qua super().
// 🏢 LỚP CHA: Nhân viên tổng quát
class Employee {
constructor(name: string, salary: number) {
this.name = name;
this.salary = salary;
console.log(`Khai báo nhân viên: ${this.name}`);
}
}
// 💻 LỚP CON: Kế thừa từ Employee
class Developer extends Employee {
constructor(name: string, salary: number, language: string) {
// 🚀 BẮT BUỘC: Gọi super() để kích hoạt constructor của lớp cha
super(name, salary);
// Sau đó mới được định nghĩa thuộc tính riêng của lớp con
this.language = language;
console.log(`Chuyên môn: Lập trình ${this.language}`);
}
}
const dev = new Developer('Hoàng', 2000, 'TypeScript');
// 👉 Kết quả in ra:
// Khai báo nhân viên: Hoàng
// Chuyên môn: Lập trình TypeScript
Tuyệt chiêu 2: Dùng super.method() để mở rộng tính năng (Method Overriding)
Giả sử lớp cha Employee có một phương thức tính toán công việc hàng ngày tên là work(). Đối với Developer, anh ta cũng làm việc giống nhân viên thường nhưng muốn bổ sung thêm hành vi "Fix Bug". Thay vì ghi đè xóa sạch code của cha, ta dùng super.work() để thừa kế lại toàn bộ hành vi cũ rồi cộng thêm tính năng mới.
class Employee {
work() {
return "Đang chấm công và làm việc văn phòng.";
}
}
class Developer extends Employee {
work() {
// Gọi lại hàm work() gốc của lớp cha
const baseWork = super.work();
// Cộng thêm hành vi đặc thù của lớp con
return `${baseWork} Thêm: Đang gõ code và fix bug lòi mắt! 💻⚡`;
}
}
const dev = new Developer();
console.log(dev.work());
// 👉 Kết quả: Đang chấm công và làm việc văn phòng. Thêm: Đang gõ code và fix bug lòi mắt! 💻⚡
3. Những "Vết sẹo" thực chiến và cạm bẫy chí mạng với super
Cạm bẫy 1: Lỗi "this trước super sau" (The Reference Error)
Đây là lỗi kinh điển nhất của các bạn mới làm quen với Class. Bạn viết code gán giá trị cho lớp con trước rồi mới gọi super() ở cuối hàm:
// ❌ CODE SAI LẦM: Gây sập ứng dụng ngay lập tức
constructor(name, salary, language) {
this.language = language; // Lỗi ngay tại dòng này!
super(name, salary);
}
Tại sao JavaScript lại nghiêm khắc như vậy? Trong các ngôn ngữ truyền thống như C++ hay Java, khi bạn tạo lớp con, bộ nhớ của lớp cha sẽ được cấp phát trước một cách tự động. Nhưng trong JavaScript, cơ chế vận hành hoàn toàn ngược lại: Lớp con có nhiệm vụ tự tạo ra thực thể đối tượng (this), nhưng nó không biết cách tạo thế nào cho đúng cấu trúc của lớp cha, nên nó bắt buộc phải gọi super() trước để lớp cha khởi tạo vùng nhớ và trả về thực thể this chuẩn chỉnh. Chỉ sau khi super() chạy xong, biến this mới chính thức hợp pháp để bạn nhào nặn ở lớp con.
Cạm bẫy 2: Lạm dụng super trong hàm Static (Tĩnh)
Hàm tĩnh static là hàm thuộc về chính cái khung Class chứ không thuộc về thực thể new Class(). super vẫn có thể dùng được trong hàm static, nhưng nó sẽ trỏ đến Hàm Static của lớp cha chứ không phải hàm thông thường.
class Parent {
static hello() { return "Chào từ cha static"; }
hello() { return "Chào từ cha thường"; }
}
class Child extends Parent {
static test() {
// 👉 Nó sẽ gọi hàm static hello() của cha, chứ không sờ được vào hàm thường!
console.log(super.hello());
}
}
Child.test(); // In ra: Chào từ cha static
Nếu bạn gọi super.hello() bên trong một hàm thường (instance method) của lớp con, nó mới trỏ đến hàm thường của lớp cha. Hãy ghi nhớ ranh giới cô lập này để không bị râu ông nọ cắm cằm bà kia nhé!
Đúc kết lại quy tắc sinh tồn khi dùng super
Để viết code Class sạch sẽ, chuẩn OOP và không bao giờ dính lỗi runtime, anh em chỉ cần bỏ túi 3 quy tắc vàng sau:
- Đã extends thì phải super(): Nếu Class con của bạn có định nghĩa constructor, dòng đầu tiên của hàm đó bắt buộc phải là super(...). Nếu Class con không cần viết constructor, bạn có thể bỏ qua hoàn toàn, JavaScript sẽ tự động gọi super() ngầm cho bạn.
- Luôn đặt super() lên trên cùng: Tuyệt đối không để bất kỳ dòng code nào chứa từ khóa this đứng trước lệnh super().
- Thừa kế thay vì hủy diệt: Khi ghi đè phương thức (Method Overriding), hãy luôn cân nhắc dùng super.methodName() để tận dụng lại logic đã viết ở lớp cha, giúp code tuân thủ nguyên tắc DRY (Don't Repeat Yourself), giảm thiểu rủi ro phát sinh bug khi lớp cha cập nhật logic.
Hy vọng bài viết mổ xẻ chi tiết này giúp anh em hiểu rõ bản chất "vì sao lại thế" của từ khóa super và tự tin làm chủ cấu trúc OOP trong các dự án JavaScript/TypeScript lớn sắp tới.
Chúc anh em tối ưu code thành công! Happy Coding!
