Hướng đối tượng trong ECMAScript

27/05/2019 | Mai Đức Thạch | 636 xem

Hướng đối tượng là một mô hình phát triển phần mềm theo mô hình thế giới thực. Trong hướng đối tượng, bao gồm một chương trình như một tập hợp các đối tượng mà tiếp cận đến chúng thông qua các phương thức. ECMAScript cũng hỗ trợ mô hình này.

KHÁI QUÁT CHUNG VỀ LỚP VÀ ĐỐI TƯỢNG

1. LỚP (class) là một phác thảo chi tiết để tạo ra các đối tượng. Nó đóng gói dữ liệu cho đối tượng.

Ví dụ sau đây khởi tạo một lớp Tugiac trong ECMAScript:
// Khai báo một lớp có thể ở dạng class Name_class{ } hoặc var Name_class = class Name_class{} class Tugiac{ // Hàm khởi tạo chịu trách nhiệm phân bổ bộ nhớ cho các đối tượng lớp; không bắt buộc khai báo trong lớp. constructor(name, type){ this.name = name; this.type = type; } // Phương thức (method) là các hàm đại diện cho các hành động mà đối tượng tạo ra từ nó có thể hoạt động; và tất cả các phương thức này được gọi là thành viên dữ liệu (member) của lớp. Lưu ý: phần thân của lớp không thể chứa các thuộc tính dữ liệu. getName(){ return this.name; } // Từ khóa static có thể được áp dụng cho các thành viên dữ liệu trong một lớp. static getInfo(){ console.log(‘Đây là tứ giác’); } }
2. ĐỐI TƯỢNG (object) là một biểu diễn thực của một thực thể nào đó.

Ví dụ sau đây khởi tạo một đối tượng hinh1 từ lớp đã khai báo ở trên:
// – Định danh (identity) dùng để phân biệt đối tượng đó với các đối tượng tương tự var hinh1 = new Tugiac(‘Hình 1’, ‘Tứ giác thường’); // – Trạng thái (state) mô tả bởi thuộc tính của đối tượng var type = hinh1.type; console.log(type); // – Hành vi (behavior) mô tả cách mà đối tượng đó hành động var hinh1_name = hinh1.getName(); console.log(hinh1_name); // – Hành vi của một đối tượng được khai báo trong lớp là static được tham chiếu sử dụng tên lớp var info = Tugiac.getInfo(); // – Để kiểm tra một đối tượng thuộc loại chỉ định hay không sử dụng toán tử instanceof var isTypeClass = hinh1 instanceof Tugiac; console.log(‘Hình 1 là tứ giác: ‘ + isTypeClass);

KẾ THỪA LỚP (EXTENDS) TRONG ECMASCRIPT

Kế thừa (extends) là khả năng một lớp được tạo ra từ một lớp đã tồn tại.
– Lớp được mở rộng để tạo ra các lớp mới gọi là Lớp cha hay siêu lớp.
– Lớp mới được tạo ra được gọi là lớp con. Lớp con này kế thừa tất cả các thuộc tính và phương thức của lớp cha, ngoại trừ hàm khởi tạo.

1. Một lớp chỉ có thể kế thừa một lớp

Ví dụ sau đây tạo một Lớp Hinhchunhat kế thừa từ lớp Tugiac
class HinhChuNhat extends Tugiac{ getType(){ return ‘Đây là hình chữ nhật’; } }

Bây giờ sẽ tạo một đối tượng hcn1 và gọi đến các thuộc tính, phương thức của lớp Hinhchunhat và Tugiac
var hcn1 = new HinhChuNhat(‘Hình chữ nhật 1’, ‘Hình chữ nhật’); HinhChuNhat.getInfo(); console.log(hcn1.type); console.log(hcn1.getName()); console.log(hcn1.getType());

2. Một lớp có thể kế thừa theo kiểu đa cấp

Ví dụ sau đây tiếp tục khai báo một lớp Hinhvuong kế thừa lớp Hinhchunhat đã khai báo ở trên
class HinhVuong extends HinhChuNhat{ // – Phương thức ghi đè là phương thức định nghĩa lại phương thức ở lớp cha getType(){ // Để gọi một thành viên dữ liệu của lớp cha sử dụng từ khóa super console.log(super.getType()); return ‘Đây là hình vuông’; } }

Bây giờ sẽ tạo một đối tượng vuong1 và gọi đến các thuộc tính, phương thức của lớp Hinhvuong, Hinhchunhat và Tugiac
var vuong1 = new HinhVuong(‘Hình vuông 1’, ‘Hình vuông’); console.log(vuong1.getName()); console.log(vuong1.getType()); console.log(vuong1.type);

Lưu tất cả các nội dung trên vào tập tin class.js. Sau đó tạo tập tin index.html có nội dung như sau:
<html> <head> <meta charset="utf-8"> <title>Tìm hiểu Class ECMA</title> <script src="class.js"></script> </head> <body data-rsssl=1></body> </html>

Kết quả xuất ra khi chạy tập tin index.html trên trình duyệt Chrome có kết quả như sau:
Kết quả thực thi tập tin class.js

Facebook