Trong bài viết này, ta sẽ tìm hiểu về Prototype trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.

Trước khi tìm hiểu về các Prototype (nguyên mẫu), các bạn có thể xem lại các bài trước để nắm rõ hơn về Prototype:

Đối tượng trong JavaScript tại đây.
Hàm tạo trong JavaScript tại đây.

Prototype trong JavaScript

Như đã biết,ta có thể tạo một đối tượng trong JavaScript bằng cách sử dụng một hàm tạo đối tượng.

Ví dụ:

function sinh_vien() {
    this.ten = 'Nam',
    this.ID = 100
}
const sv1 = new sinh_vien();
const sv2 = new sinh_vien();

function sinh_vien() {

this.ten = 'Nam',

this.ID = 100

}

const sv1 = new sinh_vien();

const sv2 = new sinh_vien();

Trong ví dụ trên, hàm sinh_vien() là một hàm tạo đối tượng. Chúng ta đã tạo hai đối tượng sv1 và sv2 từ hàm này.

Prototype (Nguyên mẫu)

Trong JavaScript, mọi hàm và đối tượng đều có thuộc tính có tên là prototype(nguyên mẫu) theo mặc định.

Ví dụ:

function sinh_vien () {
    this.ten = 'Nam',
    this.ID = 100
}
const sv = new sinh_vien();
console.log(sinh_vien.prototype);

function sinh_vien () {

this.ten = 'Nam',

this.ID = 100

}

const sv = new sinh_vien();

console.log(sinh_vien.prototype);

Trong ví dụ trên, chúng ta đang cố gắng truy cập thuộc tính prototype của một hàm tạo sinh_vien. Vì thuộc tính prototype không có giá trị, do đó, nó sẽ hiển thị một đối tượng rỗng {…}.

Kế thừa Prototype

Trong JavaScript, một Prototype có thể được sử dụng để thêm các thuộc tính và phương thức vào một hàm khởi tạo. Và các đối tượng kế thừa các thuộc tính và phương thức từ một Prototype.

Ví dụ:

function sinh_vien () {
    this.ten = 'Nam',
    this.ID = 100
}
const sv1 = new sinh_vien();
const sv2 = new sinh_vien();
sinh_vien.prototype.truong_hoc = 'Dai hoc Luat';
console.log(sinh_vien.prototype);
console.log(sv1.truong_hoc);
console.log(sv2.truong_hoc);

function sinh_vien () {

this.ten = 'Nam',

this.ID = 100

}

const sv1 = new sinh_vien();

const sv2 = new sinh_vien();

sinh_vien.prototype.truong_hoc = 'Dai hoc Luat';

console.log(sinh_vien.prototype);

console.log(sv1.truong_hoc);

console.log(sv2.truong_hoc);

Kết quả:

sinh_vien { truong_hoc: 'Dai hoc Luat' }
Dai hoc Luat
Dai hoc Luat

sinh_vien { truong_hoc: 'Dai hoc Luat' }

Dai hoc Luat

Trong chương trình trên, chúng ta đã thêm một thuộc tính mới vào hàm tạo sinh_vien bằng cách sử dụng:

sinh_vien.prototype.truong_hoc = 'Dai hoc Luat';

1	sinh_vien.prototype.truong_hoc = 'Dai hoc Luat';

Sau đó đối tượng sv1 và sv2 kế thừa thuộc tính từ thuộc tính nguyên mẫu của hàm khởi tạo sinh_vien. Do đó, cả hai đối tượng sv1 và sv2 đều có thể truy cập thuộc tính mới này.

Chú ý: Cú pháp để thêm thuộc tính vào một hàm tạo đối tượng như sau:

objectConstructorName.prototype.khóa = 'giá trị';

1	objectConstructorName.prototype.khóa = 'giá trị';

Prototype được sử dụng để cung cấp thuộc tính bổ sung cho tất cả các đối tượng được tạo từ một hàm khởi tạo.

Thêm các phương thức vào một hàm tạo bằng Prototype

Ta cũng có thể thêm các phương thức mới vào một hàm khởi tạo bằng cách sử dụng Prototype.

Ví dụ:

function sinh_vien () {
    this.ten = 'Nam',
    this.ID = 100
}
const sv1 = new sinh_vien();
sinh_vien.prototype.truong_hoc = 'Dai hoc Luat';
sinh_vien.prototype.xin_chao = function() {
    console.log('Tôi tên là: ' + this.ten);
}
console.log(sv1.truong_hoc);
sv1.xin_chao();

function sinh_vien () {

this.ten = 'Nam',

this.ID = 100

}

const sv1 = new sinh_vien();

sinh_vien.prototype.truong_hoc = 'Dai hoc Luat';

sinh_vien.prototype.xin_chao = function() {

console.log('Tôi tên là: ' + this.ten);

}

console.log(sv1.truong_hoc);

sv1.xin_chao();

Kết quả:

Dai hoc Luat
Tôi tên là: Nam

1 2	Dai hoc Luat Tôi tên là: Nam

Trong chương trình trên, một phương thức mới được thêm vào hàm khởi tạo sinh_vien bằng cách sử dụng một Prototype.

Thay đổi Prototype

Nếu một giá trị Prototype được thay đổi, thì tất cả các đối tượng mới sẽ có giá trị thuộc tính thay đổi. Tất cả các đối tượng được tạo trước đó sẽ có giá trị trước đó.

Ví dụ:

function sinh_vien() {
    this.ten = 'John'
}
sinh_vien.prototype.ID = 100;
const sv = new sinh_vien();
sinh_vien.prototype = { ID: 50 }
const sv2 = new sinh_vien();
console.log(sv2.ID);
console.log(sv.ID);

function sinh_vien() {

this.ten = 'John'

}

sinh_vien.prototype.ID = 100;

const sv = new sinh_vien();

sinh_vien.prototype = { ID: 50 }

const sv2 = new sinh_vien();

console.log(sv2.ID);

console.log(sv.ID);

Kết quả:

50
100

100

Chú ý: Không nên sửa đổi Prototype của các đối tượng được tích hợp sẵn trong JavaScript như chuỗi, mảng,…

Nếu một đối tượng truy cập cùng một thuộc tính có trong hàm khởi tạo và đối tượng Prototype, đối tượng sẽ lấy thuộc tính từ hàm khởi tạo.

Ví dụ:

function sinh_vien() {
    this.ten = 'Nam'
}
sinh_vien.prototype.ten = 'Thanh';
sinh_vien.prototype.ID = 100;
const sv = new sinh_vien();
console.log(sv.ten);
console.log(sv.ID);

function sinh_vien() {

this.ten = 'Nam'

}

sinh_vien.prototype.ten = 'Thanh';

sinh_vien.prototype.ID = 100;

const sv = new sinh_vien();

console.log(sv.ten);

console.log(sv.ID);

Kết quả:

Nam
100

Nam

100

Trong chương trình trên, một thuộc tính ten được khai báo trong hàm khởi tạo và cũng trong thuộc tính prototypecủa hàm tạo. Khi chương trình thực thi, sv.ten sẽ tìm trong hàm khởi tạo để xem có thuộc tính ten hay không. Vì hàm khởi tạo có thuộc tính ten với giá trị ‘Nam’, đối tượng sẽ nhận giá trị từ thuộc tính đó. Khi chương trình thực thi, sv.ID sẽ tìm trong hàm khởi tạo để xem có thuộc tính ID hay không. Vì hàm tạo không có thuộc tính ID, chương trình sẽ xem xét đối tượng prototype của hàm tạo và đối tượng kế thừa thuộc tính từ đối tượng prototype (nếu có).

Chú ý: Ta cũng có thể truy cập thuộc tính của Prototype của một hàm khởi tạo từ một đối tượng.

Ví dụ:

function sinh_vien () {
    this.ten = 'Nam'
}
sinh_vien.prototype.ID = 100;
const sv = new sinh_vien();
console.log(sv.__proto__);

function sinh_vien () {

this.ten = 'Nam'

}

sinh_vien.prototype.ID = 100;

const sv = new sinh_vien();

console.log(sv.__proto__);

Kết quả:

sinh_vien {ID: 100}

1	sinh_vien {ID: 100}

Trong ví dụ trên, một đối tượng sv được sử dụng để truy cập thuộc tính của prototype bằng __proto__. Tuy nhiên, __proto__đã không được dùng nữa và ta nên tránh sử dụng nó.

Trên đây là khái niệm và ví dụ cơ bản về Prototype trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!

P/s: Cảm ơn mọi người đã tin tưởng tek4!

0 0 vote

Article Rating