- TechDailyFeed - Your Daily Dose of Tech News, AI, Programming, and More

Tưởng tượng bạn có một đống mèo. Mỗi con mèo đều có tên, tuổi, màu lông và sở thích là… làm chủ nhân của bạn. Thay vì mỗi lần tạo mèo mới lại phải viết đi viết lại cái đống đặc điểm đó, bạn thở dài và nghĩ: “Không lẽ cứ copy-paste mãi như thế này sao?”. Chào mừng bạn đến với thế giới của Class trong JavaScript – nơi bạn có thể sản xuất mèo phiên bản chuẩn chỉnh mà không phải gõ lại từng dòng code như một con bot lập trình. Vấn đề đầu tiên: Lặp lại code – cơn ác mộng của dân dev Giả sử bạn tạo mèo thế này: const meo1 = { ten: 'Tâm', tuoi: 3, mauLong: 'xam', keu: function() { console.log('Meooo'); } }; const meo2 = { ten: 'Gia Huy' // Ờ thì Gia Huy là chuột, nhưng kệ đi tuoi: 2, mauLong: 'trang', keu: function() { console.log('Meooo'); } }; Trông thì ổn, nhưng rồi bạn nhận ra: “Ủa, sao cái hàm keu mình lại viết y chang cho mỗi con mèo?”. Và rồi bạn bắt đầu thấy… mỏi tay. Giải pháp: Class xuất hiện như một siêu anh hùng Người thông minh như bạn chắc chắn sẽ nghĩ ra rằng: “Chắc JavaScript có cách nào giúp mình làm cái này gọn hơn chứ?”. Và đúng vậy, bạn đã chạm tới Class – nơi mọi con mèo đều được sinh ra từ một mẫu gốc hoàn hảo (blueprint). class Meo { constructor(ten, tuoi, mauLong) { this.ten = ten; this.tuoi = tuoi; this.mauLong = mauLong; } keu() { console.log(`${this.ten} keu: Meooo`); } } const tom = new Meo('Tâm', 3, 'xám'); const jerry = new Meo('Gia Huy', 2, 'trắng'); tom.keu(); // Tom keu: Meooo Chỉ cần định nghĩa một lần class, bạn có thể tạo bao nhiêu đối tượng (objects) tùy thích. Mèo cũng có quy trình sản xuất công nghiệp hẳn hoi. Nhưng khoan! Một vấn đề khác xuất hiện: Tính kế thừa Tưởng tượng giờ bạn muốn có một lớp MeoSieuNhan, ngoài kêu ra còn biết… bay (vì sao không?). Bạn không muốn viết lại toàn bộ constructor và keu vì bạn còn phải đi ăn trưa nữa. Người thông minh như bạn chắc chắn sẽ nghĩ ra rằng: “Có kế thừa không nhỉ?”. Và vâng, có luôn! class MeoSieuNhan extends Meo { bay() { console.log(`${this.ten} bay lên trời!`); } } const doraemon = new MeoSieuNhan('Doraemon', 2112, 'xanh dương'); doraemon.keu(); // Doraemon keu: Meooo doraemon.bay(); // Doraemon bay lên trời! Bạn thấy không? MeoSieuNhan kế thừa mọi thứ từ Meo, rồi cộng thêm năng lực đặc biệt của riêng mình. Không chỉ tiết kiệm thời gian, mà còn khiến bạn trông...ngầu hơn (hoặc ít nhất là người viết bài post này thấy vậy XD ). Tổng kết tập 1: Lập trình có class, cuộc đời có style Class giúp bạn định nghĩa cấu trúc chung cho đối tượng (object). Dùng constructor để khởi tạo thông tin khi tạo mới một object. Gắn hành vi (method) vào class một cách gọn gàng và logic. Kế thừa (extends) giúp bạn tái sử dụng mã và mở rộng chức năng một cách sang chảnh. Cuối cùng, hãy nhớ: Class không chỉ là cú pháp, mà là một lối sống. Một lối sống có tổ chức, có thần thái, và không lặp code một cách vô vọng nữa. Nếu bạn từng sợ lập trình hướng đối tượng trong JavaScript, thì giờ hãy coi nó như việc nuôi mèo – miễn là bạn biết cách, thì nó chỉ kêu "meo" thôi chứ không cào đâu! "Chào thân ái và quyết thắng"_duythenights

Apr 14, 2025 - 04:53

Tưởng tượng bạn có một đống mèo. Mỗi con mèo đều có tên, tuổi, màu lông và sở thích là… làm chủ nhân của bạn. Thay vì mỗi lần tạo mèo mới lại phải viết đi viết lại cái đống đặc điểm đó, bạn thở dài và nghĩ: “Không lẽ cứ copy-paste mãi như thế này sao?”.

Chào mừng bạn đến với thế giới của Class trong JavaScript – nơi bạn có thể sản xuất mèo phiên bản chuẩn chỉnh mà không phải gõ lại từng dòng code như một con bot lập trình.

Vấn đề đầu tiên: Lặp lại code – cơn ác mộng của dân dev

Giả sử bạn tạo mèo thế này:

const meo1 = {
  ten: 'Tâm',
  tuoi: 3,
  mauLong: 'xam',
  keu: function() {
    console.log('Meooo');
  }
};

const meo2 = {
  ten: 'Gia Huy' // Ờ thì Gia Huy là chuột, nhưng kệ đi
  tuoi: 2,
  mauLong: 'trang',
  keu: function() {
    console.log('Meooo');
  }
};

Trông thì ổn, nhưng rồi bạn nhận ra: “Ủa, sao cái hàm keu mình lại viết y chang cho mỗi con mèo?”. Và rồi bạn bắt đầu thấy… mỏi tay.

Giải pháp: Class xuất hiện như một siêu anh hùng

Người thông minh như bạn chắc chắn sẽ nghĩ ra rằng: “Chắc JavaScript có cách nào giúp mình làm cái này gọn hơn chứ?”. Và đúng vậy, bạn đã chạm tới Class – nơi mọi con mèo đều được sinh ra từ một mẫu gốc hoàn hảo (blueprint).

class Meo {
  constructor(ten, tuoi, mauLong) {
    this.ten = ten;
    this.tuoi = tuoi;
    this.mauLong = mauLong;
  }

  keu() {
    console.log(`${this.ten} keu: Meooo`);
  }
}

const tom = new Meo('Tâm', 3, 'xám');
const jerry = new Meo('Gia Huy', 2, 'trắng');

tom.keu(); // Tom keu: Meooo

Chỉ cần định nghĩa một lần class, bạn có thể tạo bao nhiêu đối tượng (objects) tùy thích. Mèo cũng có quy trình sản xuất công nghiệp hẳn hoi.

Nhưng khoan! Một vấn đề khác xuất hiện: Tính kế thừa

Tưởng tượng giờ bạn muốn có một lớp MeoSieuNhan, ngoài kêu ra còn biết… bay (vì sao không?). Bạn không muốn viết lại toàn bộ constructor và keu vì bạn còn phải đi ăn trưa nữa.

Người thông minh như bạn chắc chắn sẽ nghĩ ra rằng: “Có kế thừa không nhỉ?”. Và vâng, có luôn!

class MeoSieuNhan extends Meo {
  bay() {
    console.log(`${this.ten} bay lên trời!`);
  }
}

const doraemon = new MeoSieuNhan('Doraemon', 2112, 'xanh dương');
doraemon.keu(); // Doraemon keu: Meooo
doraemon.bay(); // Doraemon bay lên trời!

Bạn thấy không? MeoSieuNhan kế thừa mọi thứ từ Meo, rồi cộng thêm năng lực đặc biệt của riêng mình. Không chỉ tiết kiệm thời gian, mà còn khiến bạn trông...ngầu hơn (hoặc ít nhất là người viết bài post này thấy vậy XD ).

Tổng kết tập 1: Lập trình có class, cuộc đời có style

Class giúp bạn định nghĩa cấu trúc chung cho đối tượng (object).
Dùng constructor để khởi tạo thông tin khi tạo mới một object.
Gắn hành vi (method) vào class một cách gọn gàng và logic.
Kế thừa (extends) giúp bạn tái sử dụng mã và mở rộng chức năng một cách sang chảnh.

Cuối cùng, hãy nhớ: Class không chỉ là cú pháp, mà là một lối sống. Một lối sống có tổ chức, có thần thái, và không lặp code một cách vô vọng nữa.

Nếu bạn từng sợ lập trình hướng đối tượng trong JavaScript, thì giờ hãy coi nó như việc nuôi mèo – miễn là bạn biết cách, thì nó chỉ kêu "meo" thôi chứ không cào đâu!

"Chào thân ái và quyết thắng"_duythenights