Object prototype trong Javascript là gì?

Object prototype trong Javascript là gì? Giới thiệu khái niệm cơ bản về prototype trong ngôn ngữ lập trình Javascript.

Ví dụ ta có 1 bản thiết kế Object constructor như sau:

Bản thiết kế này dùng tạo 2 đối tượng giangvien và hocvien:

function User(firstName, lastName, avatar) {

this.firstName = firstName

this.lastName = lastName

}

var giangvien = new User(‘Nam’, ‘Việt’, ‘Avatar’)

Object prototype trong Javascript được gọi là Object nguyên mẫu. Hay có thể hiểu là nguyên liệu để tạo nên đối tượng cho bản thiết kế (Oc) đã có.

1. Cú pháp thêm thuộc tính bằng prototype:

Tenham.prototype.key = value

Ví dụ cụ thể

User.prototype.email = ‘laptrinhjavascript@gmail.com’

Khi thêm thuộc tính email vào Object constructor, thì thuộc tính này sẽ hiển thị trong phần [Prototype], chứ không phải trong hàm. Bởi vậy khi tạo thuộc tính bằng prototype, sẽ không thể truyền đối số để chạy tham số trong hàm được.

console.log(giangvien)

// Kết quả:

// User {firstName: ‘Nam’, lastName: ‘Việt’}

// [[Prototype]]: Object

// email: “laptrinhjavascript@gmail.com”

Các đặc điểm của Object prototype trong Javascript:

prototype dùng tạo các thuộc tính và phương thức sau khi đã có Object constructor (OC).
Các thuộc tính và phương thức được tạo từ prototype sẽ hiển thị trong phần [Prototype] phía dưới, chứ không hiển thị trong phần hàm của bản thiết kế (OC). Nên không thể chạy theo đối số truyền vào.
Các thuộc tính và phương thức được tạo từ prototype sẽ hiển thị trong tất cả đối tượng được tạo từ bản thiết kế OC.

var hocvien = new User(‘Tuấn’, ‘Nguyễn’)

console.log(hocvien) // sẽ thấy thuộc tính email = ‘laptrinhjavascript@gmail.com’ xuất hiện trong [Prototype]

Như vậy, console.log(hocvien) hay console.log(giangvien)
sẽ đều có thuộc tính email: “laptrinhjavascript@gmail.com” trong [Prototype]

Javascript-Object-prototype

2. Cú pháp thêm phương thức bằng prototype:

TenhamOC.prototype.tenhamthemvao = function() {}

Ví dụ cụ thể: thêm hàm getEmail = function() {}

User.prototype.getEmail = function() {

return this.email

}

console.log(hocvien) // Kết quả đã thêm được phương thức getEmail hiển thị trong [Prototype]

console.log(hocvien.getEmail()) // laptrinhjavascript@gmail.com – khi ta gọi đến phương thức getEmail, sẽ chạy hàm trả về email = “laptrinhjavascript@gmail.com” vừa tạo trong cùng [Prototype]

// User {firstName: ‘Tuấn’, lastName: ‘Nguyễn’}

// [[Prototype]]: Object

// email: “laptrinhjavascript@gmail.com”

// getEmail: ƒ ()

Giải thích:

Tạo một phương thức (tức tạo hàm) có tên getEmail, hàm trả về kết quả là email = ‘laptrinhjavascript@gmail.com’ mới tạo trên.