Cách Sử Dụng Javascript Class - VNTALKING

Javascript là ngôn ngữ lập trình dựa trên nguyên mẫu (prototype-based language). Và tất cả các object trong Javascript có một thuộc tính ẩn gọi là Prototype, nó cho phép bạn mở rộng các thuộc tính và method của một Object. Bạn có thể đọc thêm bài viết này: Object Prototype Javascript – Công cụ hỗ trợ OOP cho JS.

Mặc dù trong bản đặc tả ES6, họ đã cố gắng để JS có thể hỗ trợ lập trình hướng đối tượng bằng việc cho ra khái niệm Class. Tuy nhiên, Class trong javascript không thực sự đúng ý nghĩa như trong các ngôn ngữ OOP như Java, C#…

Để các bạn hiểu rõ hơn về Javacript Class , xem nó khác với khái niệm Class trong Java, C#… như thế nào? Cách sử dụng ra sao?

Mời các bạn đọc bài viết này nhé.

Nội dung chính của bài viết

• Bản chất Class trong Javascript là một hàm
• Định nghĩa một Class
• Viết các method trong class
• Kế thừa một class
  • Tạm kết

Bản chất Class trong Javascript là một hàm

Theo một cách hiểu thì javascript class là một kiểu của hàm. Một class được định nghĩa với từ khóa class thay vì function.

Dưới đây là hai ví dụ về các định nghĩa một hàm và một class.

// Initializing a function with a function expression const day_la_ham = function() {} // Initializing a class with a class expression const day_la_class = class {}

Bạn có thể truy xuất vào Prototype của một object thông qua hàm: Object.getPrototypeOf()

Giờ chúng ta sẽ thử với hàm rỗng vừa tạo ở trên nhé.

Object.getPrototypeOf(day_la_ham); Output ƒ () { [native code]

Kết quả tương tự nếu bạn thử với class day_la_class vừa tạo ở trên.

Đoạn code khai báo với cả hai từ khóa function và function đều trả về một function [[Prototype]]. Với Prototypes thì bất kỳ hàm nào cũng trở thành hàm khởi tạo một đối tượng thay vì phải sử dụng từ khóa new.

const x = function() {} // Initialize a constructor from a function const constructorFromFunction = new x(); console.log(constructorFromFunction); //Output x {} constructor: ƒ () Tương tự với class: const y = class {} // Initialize a constructor from a class const constructorFromClass = new y(); console.log(constructorFromClass); //Output y {} constructor: class

Định nghĩa một Class

Ngoài cách định nghĩa một class kiểu như hàm ở trên, bạn có thể sử dụng constructor để định nghĩa các thuộc tính của class.

// Initializing a class definition class Hero { constructor(name, level) { this.name = name; this.level = level; } }

Viết các method trong class

Việc định nghĩa các method trong một class cũng rất đơn giản, giống như các ngôn ngữ khác thôi.

constructor(name, level) { this.name = name; this.level = level; } // Adding a method to the constructor greet() { return ${this.name} says hello.; } }

Để tạo một instance của một class, chúng ta dùng từ khóa new và gán giá trị cho một biến.

const hero1 = new Hero('Varg', 1);

Nếu chúng ta thử in những thông tin trong biến vừa nhận được bằng lệnh: console.log(hero1). Bạn có thể thấy chi tiết các thông tin và hiểu được điều gì đang xảy ra.

Output Hero {name: "Varg", level: 1} __proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

Kế thừa một class

Mục đích của người ta khi nhồi nhét khái niệm Class vào Javascript đó chính là để hạn chế việc phải lặp lại code quá nhiều. Cũng giống như các ngôn ngữ khác, người ta muốn tái sử dụng code Js càng nhiều càng tốt.

Các hàm constructor có thể được tạo từ class cha bằng cách sử dụng hàm call(). Trong ví dụ dưới đây, mình sẽ tạo thêm một class Mage, sẽ kế thừa các thuộc tính  từ class Hero.

// Creating a new constructor from the parent function Mage(name, level, spell) { // Chain constructor with call Hero.call(this, name, level); this.spell = spell; }

Sau này, khi bạn tạo đối tượng instance mới của Mage, nó sẽ mang đầy đủ các thuộc tính của Hero cộng thêm thuộc tính mới của chính nó nữa.

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Bạn thử in thông tin của đối tượng hero2 bằng lệnh console.log(hero2) mà xem.

Output Mage {name: "Lejon", level: 2, spell: "Magic Missile"} __proto__: ▶ constructor: ƒ Mage(name, level, spell)

Từ ES6, bạn sẽ thấy cú pháp kế thừa được thiết kế gần giống với Java. Tức là sử dụng từ khóa extends, và super().

// Creating a new class from the parent class Mage extends Hero { constructor(name, level, spell) { // Chain constructor with super super(name, level); // Add a new property this.spell = spell; } }

Tạm kết

Qua bài viết này, chúng ta đã hiểu được bản chất và cách định nghĩa, sử dụng Class trong javascript. Hiểu về cách kế thừa trong class cũng là cách để viết code hiểu quả hơn. Việc làm quen với Class trong JS là việc vô cùng cần thiết. Vì sao như vậy?

Vì các frameworks, thư viện hiện đại như React, Vue… sử dụng class rất nhiều.

Các bạn cảm nhận thế nào về class trong JS? Để lại dưới phần bình luận bên dưới nhé.

💥 Đọc thêm:

• 7 khái niệm Javascript cơ bản không thể bỏ qua
• Series tự học Javascript trong 10 tiếng
• Làm việc với Date/Time trong Javascript – Tưởng dễ mà khó không tưởng

​​Nhận sách ​​học Flutter qua 65 ứng dụng

​Flutter là nền tảng lập trình đa nền tảng (Android & iOS) do Google chống lưng. Nếu bạn muốn học Flutter thì không nên bỏ qua cuốn sách này. Hiện sách này đang bán trên Amazon với giá 19,99 $ và giờ VNTALKING miễn phí cho bạn.

DOWNLOAD