MN
MN

Cách khởi tạo Class trong JavaScript

Tổng quan

Trong JavaScript, bạn có thể khởi tạo một lớp (class) bằng cách sử dụng từ khóa class. Dưới đây là một ví dụ cơ bản về cách khởi tạo một lớp trong JavaScript:

// Định nghĩa một lớp có tên là Person
class Person {
  // Hàm khởi tạo được gọi khi một đối tượng mới được tạo
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // Phương thức của lớp
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// Tạo một đối tượng từ lớp Person
const person1 = new Person("John", 25);

// Gọi phương thức sayHello của đối tượng
person1.sayHello(); // Output: Hello, my name is John and I'm 25 years old.

Trong ví dụ trên:

  • class Person là cách để định nghĩa một lớp mới có tên là “Person”.
  • constructor là một phương thức đặc biệt trong lớp được gọi khi một đối tượng mới được tạo. Nó được sử dụng để khởi tạo thuộc tính của đối tượng.
  • this.name và this.age là thuộc tính của đối tượng.
  • sayHello là một phương thức của lớp, và nó được gọi để in ra một thông điệp chào hỏi.

Để tạo đối tượng mới từ lớp, bạn sử dụng từ khóa new như trong ví dụ const person1 = new Person("John", 25);.

Lịch sử Class của JavaScript

Lịch sử của việc hỗ trợ lập trình hướng đối tượng (OOP) trong JavaScript bắt đầu từ phiên bản ECMAScript 2015 (ES6). Trước ES6, JavaScript không có cú pháp chính thức để định nghĩa lớp nhưng thay vào đó sử dụng hàm constructor và prototype để mô phỏng các khái niệm OOP.

Dưới đây là một số cập nhật quan trọng trong lịch sử của JavaScript liên quan đến việc hỗ trợ lớp:

  1. ECMAScript 3 (ES3):
    • Đây là phiên bản JavaScript được định nghĩa bởi ECMA International vào năm 1999.
    • Mô hình lập trình hướng đối tượng trong ES3 chủ yếu dựa trên các hàm constructor và prototype.
  2. ECMAScript 5 (ES5):
    • Được phát hành vào năm 2009, ES5 tiếp tục sử dụng hàm constructor và prototype cho lập trình hướng đối tượng.
    • Phổ biến trong thời kỳ này là việc sử dụng các thư viện như Prototype và jQuery để giúp quản lý code OOP.
  3. ECMAScript 2015 (ES6):
    • ES6 (còn được gọi là ES2015) mang lại một số tính năng mới, bao gồm cú pháp lớp (class) chính thức.
    • Tính năng lớp trong ES6 cung cấp một cú pháp rõ ràng hơn cho lập trình hướng đối tượng, giúp code trở nên dễ đọc và hiểu hơn.

Dưới đây là ví dụ về cú pháp lớp trong ES6:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // Output: Buddy barks.

Tính năng lớp đã giúp JavaScript trở nên mạnh mẽ hơn trong việc hỗ trợ lập trình hướng đối tượng và giảm sự phụ thuộc vào các mô hình trước đó sử dụng hàm constructor và prototype.

Các trình duyệt hỗ trợ Class của JavaScript

Các trình duyệt hiện đại đều hỗ trợ cú pháp lớp (class) của JavaScript theo chuẩn ECMAScript 2015 (ES6) và các phiên bản mới hơn. Điều này bao gồm các trình duyệt phổ biến như Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, và Opera. Dưới đây là một số phiên bản của các trình duyệt và mức độ hỗ trợ cho tính năng lớp:

  1. Google Chrome:
    • Chrome hỗ trợ tốt cho cú pháp lớp và nhiều tính năng ECMAScript 2015.
  2. Mozilla Firefox:
    • Firefox cũng có hỗ trợ đầy đủ cho cú pháp lớp và các tính năng ES6.
  3. Safari:
    • Safari của Apple hỗ trợ cú pháp lớp và các tính năng ES6.
  4. Microsoft Edge:
    • Microsoft Edge hỗ trợ cú pháp lớp và các tính năng ECMAScript 2015.
  5. Opera:
    • Opera cũng hỗ trợ đầy đủ cú pháp lớp và các tính năng ES6.

Vui lòng lưu ý rằng một số tính năng cụ thể có thể có sự khác biệt nhỏ giữa các trình duyệt hoặc giữa các phiên bản của chúng. Để đảm bảo tính di động và tương thích, nên kiểm tra tài liệu của ECMAScript và MDN Web Docs để biết thông tin chi tiết và cập nhật.

Các bài liên quan khác:

  1. So sánh JavaScript và TypeScript
  2. So sánh JavaScript và VBScript, JScript
  3. Lịch sử JavaScript
  4. Tổng quan về ECMAScript
  5. Tổng quan JavaScript
  6. Viết một đoạn code JavaScript trong đó dùng Promise để đảm bảo cả 3 tiến trình cùng hoàn thành
  7. JavaScript là ngôn ngữ đồng bộ hay bất đồng bộ?