Kế thừa javascript

Lập trình hướng đối tượng trong javascript

12/05/2021

Lập trình hướng đối tượng trong hướng javascript hướng dẫn bạn cách tạo đối tượng trong javavascript và các vấn đề trong OPP

A. Ý niệm hướng đối tượng

Javascript được thiết kế dựa trên đơn giản đối tượng mô hình. Mỗi đối tượng chứa nhiều thuộc tính

Thuộc tính có thể là 1 biến hoặc 1 hàm, hàm bên trong đối tượng còn được gọi là phương thức

Có những đối tượng có sẵn trong javascript như Date, Number, String, Boolean, Array, Math, RegExp… Và bạn cũng có thể tạo ra các đối tượng mới để sử dụng

Lập trình hướng đối tượng trong javascript tức là xử lý các yêu cầu bằng cách đối tượng hóa các dữ liệu cần xử lý

Có các cách để bạn tạo đối tượng trong javascript là Object literals và Object constructor functions

B. Use Object Literals

Tạo đối tượng bằng chữ đối tượng là cách tạo đơn giản , thu gọn, nhanh. Đối tượng được biểu diễn bằng cặp dấu {} , bên trong là các cặp tên-giá trị, các cặp này cách nhau bởi dấu phẩy. Ví dụ

var url = {
    protocol: "https",
    domain: "longnv.name.vn",
    full: function[] { return this.protocol + "://" + this.domain }
}

Việc sử dụng các đối tượng theo kiểu chữ đối tượng thế này rất dễ dàng. Vì nó giúp gom các giá trị và hàm lại với nhau trong 1 biến. Code nhờ đó dễ đọc hơn. Sau đây là 1 ví dụ khác

sv1 = {
    ho: "Nguyễn văn",
    ten: "Tèo",
    hoten: function[] { return this.ho + " " + this.ten},
    emails: ["meomeo@gomeo.com",  "teonv@gmail.com" ]
}

Hiển thị giá trị thuộc tính/gọi phương thức

console.log[sv1.ten]; //Tèo
console.log[sv1.hoten[]]; //Nguyễn văn Tèo
console.log[sv1.emails[0]]; //meomeo@gomeo.com

Thay đổi giá trị của thuộc tính

sv1.ho ="Phan Thị";
sv1.ten="Lượm";
sv1.emails[1] ="huhu@giahu.com";

console.log[sv1.hoten[]]; //Phan Thị Lượm
console.log[sv1.emails[1]]; //huhu@giahu.com

Bên cạnh việc tạo đối tượng bằng cặp { }, bạn có thể tạo bằng lệnh new Object[]

var ptb2 = new Object[];
ptb2.a = 1;
ptb2.b = 5;    
ptb2.c = -4; 
ptb2.nhap = function[]{
    this.a = prompt["Nhập a"];
    this.b = prompt["Nhập b"];
    this.c = prompt["Nhập c"];
};
ptb2.tinhdelta = function[]{
    return this.b*this.b - 4*this.a*this.c;
};
ptb2.xem = function[] {
    console.log[this.a, this.b, this.c]; 
    console.log[this.tinhdelta[]];
}



    ptb2.xem[]; 

Bạn có thể tạo các đối tượng như trên ở bất kỳ đâu. Tuy nhiên cách này cũng có những hạn chế. Chế độ thứ nhất là không hỗ trợ khả năng hóa đối tượng [khởi tạo], hạn chế 2 là không có tính chất kế thừa [kế thừa]

Mời bạn thực hiện. Tạo 1 đối tượng sinh viên bằng cách sử dụng ký tự đối tượng. Bao gồm các thuộc tính/phương thức. ma_sinh_vien, ho_va_ten, lop, ngay_nhap_hoc, diem_trung_binh, tinhHocLuc[], thoiGianRaTruong[]

• Phương thức tinhHocLuc[] trả về học lực của sinh viên theo thang điểm. < 5. Học lực yếu, Từ 5 đến < 7 điểm. Học lực Trung bình, Từ 7 đến 8. Học lực Khá, Từ 8 đến 10. Học lực học
• Phương thức thờiGianRaTruong[] trả về số tháng còn lại theo dự kiến ​​tổng thời gian học là 28 tháng. Ví dụ nhập học ngày 01/04/2019 thì dự kiến ​​kiến ​​trúc sẽ còn 17 tháng nữa sẽ ra trường

C. Tạo đối tượng vào hàm khởi tạo đối tượng

Hàm tạo đối tượng hoặc tạo khuôn mẫu cho đối tượng bằng cách sử dụng hàm [khởi tạo]. Cách này có điểm ưu tiên sau

• Có thể thực hiện hóa các đối tượng [khởi tạo]
• Có thể kế thừa hoặc cho phép kế thừa [kế thừa]

Tạo đối tượng bằng cách sử dụng hàm tạo đối tượng

function Khachhang[ht, dc, dt]{
    this.hoten = ht;
    this.diachi = dc;
    this.dienthoai = dt;
    this.thongtin = function[]{
        console.log[this.hoten , this.diachi, this.dienthoai];
    }
}

var k1 = new Khachhang["Lấp la lấp lánh", "123 tp Trăng Vàng", 0918123456];
k1.tuoi = 50;
k1.thongtin[]; //Lấp la lấp lánh 123 tp Trăng Vàng 918123456
console.log[k1];//{hoten: "Lấp la lấp lánh", diachi: "123 tp Trăng Vàng", dienthoai: 918123456, tuoi: 50, thongtin: ƒ}

Cách tạo đối tượng bằng các hàm tạo đối tượng như trên tương ứng với các ngôn ngữ Java, C#, PHP… khác nhau ở vị trí sử dụng hàm thay thế cho lớp

Chú thích. Từ khóa này – con trỏ đến thực thể [ví dụ] vừa được tạo ra bởi cú pháp mới

Để kế thừa giữa các lớp đối tượng, bạn cần sử dụng phương thức call[]. Hàm call[] giúp viết phương thức 1 lần. Sau đó kế thừa nó trong các đối tượng khác mà không được viết lại. Sau đây là ví dụ sử dụng hàm call[] để thực hiện kế thừa giữa 2 đối tượng

    function Khachhang[ht, dc, dt]{
        this.hoten=ht;
        this.diachi = dc;
        this.dienthoai = dt;
        this.thongtin = function[]{
            console.log[this.hoten , this.diachi, this.dienthoai];
        }
    }
    function KhachhangVIP[ht, dc,dt, ns] {
        Khachhang.call[this,ht, dc, dt];
        this.ngaysinh = ns;
    }

var k2 = new KhachhangVIP[ "Hằng Nga" , "tp Trăng Vàng", 0918123456, "27/4/2001"]; 
console.log[k2.ngaysinh]; // 27/4/2001
k2.thongtin[]; //Hằng Nga tp Trăng Vàng 918123456

Mời bạn thực hiện thử nhé. tạo lớp VanDongVien bằng cách các hàm khởi tạo đối tượng. Bao gồm các thuộc tính. ma_VDV, hoten, ngay_sinh, giai_thuong, kiemTraDieuKien[], themGiaiThuong[], danhSachGiaiThuong[]. in which

Phương thức kiemTraDieuKien[] return true/false,Nhận 2 tham số là. Chuỗi ngày tháng năm [ngày tổ chức giải đấu tiếp theo], Số tuổi đủ điều kiện tham gia cuộc đấu tranh

=> Yêu cầu 1. viết mã cho hàm để kiểm tra xem với ngày tháng năm sinh của mình, vận động viên có đủ điều kiện tham gia thi đấu hay không?

Thuộc tính giai_thuong là 1 mảng chứa các chuỗi kiểu phần tử để lưu lại các giải thưởng của vận động viên đạt được

Phương thức themGiaiThuong[] trả về số lượng giải thưởng của vận động viên, tham số nhận là chuỗi tên giải thưởng của vận động viên đã nhận được

=> Yêu cầu 2. viết mã cho phương thức giai_thuong[] để bổ sung phần tử cho thuộc tính giai_thuong

=> Yêu cầu 3. viết mã cho phương thức danhSachGiaiThuong[] để hiển thị danh sách các giải thưởng mà vận động viên đã đạt được

Sử dụng kế thừa nguyên mẫu

Ý nghĩa nguyên mẫu

Prototype là khuôn mẫu cho các đối tượng trong javascript. Các đối tượng kế thừa các thuộc tính và phương thức từ nguyên mẫu của mình. Nếu bạn bổ sung thuộc tính hoặc phương thức vào nguyên mẫu thì các đối tượng cũng sẽ có

Trong ví dụ BaiTho là nguyên mẫu của t1

function BaiTho[tua, nd]{
    this.tua = tua;
    this.noidung = nd;
}

var t1 = new BaiTho["Lục Vân Tiên", "Trước đèn xem chuyện Tây Minh"];
t1.gia=12000;

console.log[t1]; 
//BaiTho {tua: 'Lục Vân Tiên', noidung: 'Trước đèn xem chuyện Tây Minh', gia: 12000}

Nếu phần bổ sung thuộc tính hoặc hàm cho nguyên mẫu thì trường hợp của nó sẽ được sử dụng ngay. Ví dụ dưới là cách bổ sung dodai và tacgia vào nguyên mẫu

sv1 = {
    ho: "Nguyễn văn",
    ten: "Tèo",
    hoten: function[] { return this.ho + " " + this.ten},
    emails: ["meomeo@gomeo.com",  "teonv@gmail.com" ]
}

Kế thừa nguyên mẫu với __proto__

Chỉ thị __proto__ dưới đây cũng là cách bạn có thể sử dụng khi cần chỉ định 1 đối tượng khác làm nguyên mẫu để kế thừa cho đối tượng của mình

sv1 = {
    ho: "Nguyễn văn",
    ten: "Tèo",
    hoten: function[] { return this.ho + " " + this.ten},
    emails: ["meomeo@gomeo.com",  "teonv@gmail.com" ]
}

Đối tượng laptop1 ngoài các thuộc tính của mình [cannang] còn có đủ các thuộc tính và hàm kế thừa từ nguyên mẫu sanpham

Như vậy có thể tạo trước 1 khung sườn [nguyên mẫu]. Sau đó sử dụng __proto__ để gắn khung sườn đó cho đối tượng. Các đối tượng kế thừa có thể sử dụng các phương thức/thuộc tính được định nghĩa từ các khung sườn

Xem thêm ví dụ sau để biết kế thừa nguyên mẫu nhiều lần

sv1 = {
    ho: "Nguyễn văn",
    ten: "Tèo",
    hoten: function[] { return this.ho + " " + this.ten},
    emails: ["meomeo@gomeo.com",  "teonv@gmail.com" ]
}

D. Create object with Javascript class

Bạn có thể tạo 1 khuôn mẫu cho các đối tượng sắp tạo bằng từ khóa class. Trong lớp phải khai báo 1 tên hàm là hàm tạo. Hàm này là hàm khởi tạo giá trị cho các thuộc tính

Ngoài hàm tạo bắt buộc phải có, các hàm khác là tùy chọn khai báo để sử dụng theo nhu cầu. Các hàm không có chức năng chữ ở đầu, không cách nhau bởi dấu phẩy. Cú pháp xem như sau

sv1 = {
    ho: "Nguyễn văn",
    ten: "Tèo",
    hoten: function[] { return this.ho + " " + this.ten},
    emails: ["meomeo@gomeo.com",  "teonv@gmail.com" ]
}

Ví dụ cách tạo lớp với hàm tạo và các phương thức

sv1 = {
    ho: "Nguyễn văn",
    ten: "Tèo",
    hoten: function[] { return this.ho + " " + this.ten},
    emails: ["meomeo@gomeo.com",  "teonv@gmail.com" ]
}

Chú thích. giữa các hàm không có dấu phẩy

Tạo đối tượng theo lớp đã khai báo

sv1 = {
    ho: "Nguyễn văn",
    ten: "Tèo",
    hoten: function[] { return this.ho + " " + this.ten},
    emails: ["meomeo@gomeo.com",  "teonv@gmail.com" ]
}

Lập trình hướng các đối tượng trong javascript tức thì các đối tượng hóa các đơn vị dữ liệu đang được xử lý [khách hàng, sinh viên, sách, điện thoại, laptop, tin tức…… ] thành các đối tượng xử lý trong Javascript. Mỗi đối tượng có nhiều thuộc tính [biến, hàm]. Bài viết đã hướng dẫn các cách tạo đối tượng, bạn có thể tùy ý sử dụng theo nhu cầu

E. So sánh mảng và đối tượng

Mảng và đối tượng giống nhau ở vị trí. cả hai đều là biến và chứa nhiều giá trị. Nhưng mảng thì đơn giản hơn, mảng chứa nhiều giá trị nhưng các giá trị đánh theo số chỉ [từ 0 ] còn các giá trị bên trong 1 đối tượng có tên [như giá, tựa sách…] nên dễ hình dung hơn. hơn nữa trong 1 đối tượng bạn có thể lập hàm tính toán để tạo ra những giá trị mới dựa trên những giá trị cũ đang có

The but at the simple mode when you need 1 variable only to contain many value. then you used array forựa thích hợp hơn. Tham khảo bài viết về mảng ở đây nhé Mang trong javascript