Sử dụng kế thừa trong Javascript

Giới thiệu nội dung bài viết

Ngôn ngữ lập trình web JavaScript là một ngôn ngữ lập trình hướng đối tượng (OOP), mà một OOP thì thường bao gồm các tính chất: tính đa hình, đóng gói, trừu tượng và kế thừa. Một trong những tính chất nổi trội đó chính là tính kế thừa.

Trong những chia sẻ dưới đây anh sẽ giúp các bạn hiểu được tính kế thừa trong ngôn ngữ lập trình web JavaScript là gì. Đồng thời hướng dẫn cách sử dụng nó để áp dụng được vào quá trình thực hành. Bài viết có kèm theo ví dụ minh hoạ hoàn chỉnh về tính kế thừa để bạn tham khảo thêm trong quá trình học.

1. Kế thừa là gì

Kế thừa là một khái niệm quan trọng trong lập trình hướng đối tượng. Một đối tượng kế thừa một đối tượng khác thì nó sẽ có thuộc tính và phương thức có sẵn của đối tượng mà nó kế thừa.

Trong Javascript, kế thừa được hỗ trợ khi ta dùng Prototype.

Hãy xem ví dụ sau về đối tượng Student kế thừa từ đối tượng Person.

1
2
3
4
5
6
7
8
function Person(firstName, lastName) {
    this.FirstName = firstName || "unknown";
    this.LastName = lastName || "unknown";
};

Person.prototype.getFullName = function () {
    return this.FirstName + " " + this.LastName;
}

Ở ví dụ trên ta định nghĩa lớp Person có 2 thuộc tính là firstName và lastName. Đồng thời chúng ta sử dụng prototype tạo thêm phương thức getFullName cho đối tượng Person.

Bây giờ chúng ta sẽ tạo đối tượng Student kế thừa đối tượng Person và mặc định nó sẽ kế thừa 2 thuộc tính là firstName, lastName và phương thức getFullName của Person.

1
2
3
4
5
6
7
8
9
10
function Student(firstName, lastName, schoolName, grade)
{
    Person.call(this, firstName, lastName);

    this.SchoolName = schoolName || "unknown";
    this.Grade = grade || 0;
}

Student.prototype = new Person();
Student.prototype.constructor = Student

Chúng ta sử dụng Student.prototype để tạo ra đối tượng Person.

2. Ví dụ hoàn chỉnh về kế thừa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Person(firstName, lastName) {
    this.FirstName = firstName || "unknown";
    this.LastName = lastName || "unknown";            
}

Person.prototype.getFullName = function () {
    return this.FirstName + " " + this.LastName;
}
function Student(firstName, lastName, schoolName, grade)
{
    Person.call(this, firstName, lastName);

    this.SchoolName = schoolName || "unknown";
    this.Grade = grade || 0;
}
//Student.prototype = Person.prototype;
Student.prototype = new Person();
Student.prototype.constructor = Student;

var std = new Student("James","Bond", "XYZ", 10);
            
alert(std.getFullName()); // James Bond
alert(std instanceof Student); // true
alert(std instanceof Person); // true

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments