Class trong Javascript

Dẫn nhập

Trong bài viết hôm nay, Kteam sẽ giới thiệu cho các bạn về Class trong Javascript

Nội dung

Để theo dõi bài này tốt nhất, bạn nên xem qua bài:

• Sổ tay Javascript
• ECMAScript là gì?
• Node.js là gì?
• Cơ chế bất đồng bộ trong Javascript
• Node.js hoạt động như thế nào?
• Promise là gì?
• Async/Await là gì?
• Var, Let và Const

Bài này sẽ giới thiệu những nội dung sau:

• Bản chất hướng đối tượng trong Javascript
• Sử dụng khai báo Class ES6
• Một số kiến thức Class Javascript

Bản chất hướng đối tượng trong Javascript

Javascript là ngôn ngữ hướng nguyên mẫu (prototype-based language), mỗi đối tượng trong Javascript có một property ẩn bên trong gọi là Prototype, nó được dùng để mở rộng các thuộc tính và phương thức.

Trước đây, các lập trình viên thường dùng cách khai báo hàm để làm tượng trưng cho kiến trúc hướng đối tượng.Class trong Javascript chính là kiểu function, nếu các bạn code Javascript từ ES5 về trước, ta sẽ khai báo bằng function.

function Person(name) {
  this.name = name
  this.greeting = function() {
    console.log("Hi! I'm " + this.name + '.')
  }
}
a = new Person('Chau')
a.greeting()
1
2
3
4
5
6
7
8

Sử dụng khai báo Class ES6

Từ phiên bản ES6 trở đã tạo ra từ khóa ‘Class’ để giúp ta lập trình giống lập trình hướng đối tượng hơn, thực tế nó không phải là tính năng bổ sung, mà là giúp ta thực hiện về prototype và thừa kế sao cho clean hơn và cú pháp gọn gàng hơn.

Ví dụ: sử dụng class thì ta có phương thức constructor là phương thức khởi tạo đối tượng

class Person {
  constructor(name) {
    this.name = name
  }
  greeting() {
    console.log("Hi! I'm " + this.name + '.')
  }
}

a = new Person('Chau')
a.greeting()
1
2
3
4
5
6
7
8
9
10
11

Ta cũng có thể sử dụng super và extends để có phát triển khả năng kế thừa trong hướng đối tượng:

class Person {
  constructor(name) {
    this.name = name
  }
  greeting() {
    console.log("Hi! I'm " + this.name + '.')
  }
}

class Student extends Person {
  constructor(name, university) {
    super(name)
    this.university = university
  }
  greeting() {
    super.greeting()
    console.log("I was studied " + this.university)
  }
}
a = new Student('Chau', 'UTE')
a.greeting()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Một số kiến thức Class Javascript

Prototype methods

Có những thuộc tính mà kết quả phụ thuộc vào kết quả của giá trị thuộc tính khác thì ta sẽ dùng Prototype để tạo ra các thuộc tính động đó. Ví dụ: diện tích hình chữ nhật là chiều dài x chiều rộng

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }
  // viết từ khóa get phía trước
  get area() {
    return this.height * this.width
  }
}
const a = new Rectangle(10, 10)
// Ta gọi erea theo cách gọi thuộc tính bìn thường
console.log(a.area)

a.height = 5

console.log(a.area)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Static methods

Static methods là phương thức có thể gọi trực tiếp từ class mà không cần phải thông qua instance (đối tượng) khai báo nào.

class Person {
  constructor(name) {
    this.name = name
  }
  greeting() {
    console.log("Hi! I'm " + this.name + '.')
  }
  static info() {
    console.log("class describe person")
  }
}
// Có thể gọi ra bình thường
Person.info()
// Sẽ báo lỗi vì đây là phương thức thông qua đối tượng
Person.greeting()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Kết

Như vậy Kteam đã giới thiệu về Class trong Javascript

Ở bài tiếp theo, Kteam sẽ giới thiệu cho các bạn Arrow Function trong Javascript

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Class trong Javascript dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK