Sử dụng Prototype trong Javascript

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

Trong bài chia sẻ trước anh đã chia sẻ về tính kế thừa (inheritance) trong JavaScript, đây cũng chính là cách thức làm việc của một Prototype trong lập trình web.

Trong phạm vi bài viết này, anh sẽ chia sẻ về Prototype. Hi vọng qua đó giúp các bạn hiểu được Prototype trong ngôn ngữ lập trình web JavaScript là gì? Cũng như học được cách sử dụng Prototype trong lập trình web như cách prototype gán giá trị.

1. Prototype là gì

Javascript là ngôn ngữ động chúng ta có thể thêm thuộc tính mới với Object bất cứ lúc nào. Chúng ta hãy xem ví dụ sau:

1
2
3
4
5
6
7
8
9
10
11
function Student() {
    this.name = 'John';
    this.gender = 'Male';
}

var studObj1 = new Student();
studObj1.age = 15;
alert(studObj1.age); // 15

var studObj2 = new Student();
alert(studObj2.age); // undefined

Anh có một đối tượng là Student có 2 thuộc tính là name và gender. Nhưng các em thấy ở đối tượng studObj1 anh có thêm 1 thuộc tính mới là age. Thuộc tính này ban đầu không có trong đối tượng Student.

1
2
var studObj1 = new Student();
studObj1.age = 15;

Tuy nhiên đối tượng studObj2 không có thuộc tính age, chính vì vậy khi get giá trị từ biến age là báo lỗi.

Như vậy khi muốn thêm một thuộc tính mới và đối tượng có sẵn ta dùng Prototype.

Prototype được cài đặt mặc định trong tất cả function và đối tượng của Javascript. Được sử dụng để ta có thể lấy thêm và chỉnh sửa các giá trị trong đối tượng và function.

## 2. Prototype gán giá trị

Như các em thấy ở ví dụ 1 biến age chỉ có ở đối tượng studObj1, có cách nào để nó có thể có cho tất cả các đối tượng khác được không. Trong trường hợp này là studObj2. Để làm được việc này ta khai báo như sau.

1
2
3
4
5
6
7
8
9
10
11
12
function Student() {
    this.name = 'John';
    this.gender = 'M';
}

Student.prototype.age = 15;

var studObj1 = new Student();
alert(studObj1.age); // 15

var studObj2 = new Student();
alert(studObj2.age); // 15

Như các bạn thấy chúng ta có dòng Student.prototype.age = 15; để thêm giá trị age cho tất cả các đối tượng là Student. Bây giờ studObj2 không bị lỗi giống như ví dụ 1.

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