Hôm nay rảnh rỗi, đảo qua đảo lại trên Kipalog, cơ mà chưa thấy ai viết bài về vấn đề này [hay có ai viết rồi mà tìm hoài hổng ra]. Thế nên là thôi thì rảnh rỗi viết tí cho đỡ buồn. Prototype - Dịch là nguyên mẫu, bản thân là một hình thái phân tách và lưu trữ dữ liệu.
Có thể rất nhiều người đã từng biết đến Prototype Design Pattern, Prototype Function-base or function prototype [hay còn gọi là abstract method], tuy nhiên thì theo quan điểm cá nhân của em thì Prototype là một hệ tư tưởng [giống như OOP vs Functional Programming, SQL và NoSQL, ... ] thì Prototype sẽ đối trọng với hệ tư tưởng Object Class.
Nghe vui tai không :]]. Cơ mà bình thường Object Class là OOP rồi, vậy thì cái Prototype này là Functional Programming à ? À cũng không hẳn, nó là một cách khác để tổ chức object class song song và tương đối biệt lập với Object Class. Chúng ta sẽ đi qua Prototype Function-base nhé:
Prototype là object cơ bản [hiểu nôm na là abstract object] mỗi khi có một object được tạo ra.
var myBird = {
fly: [] => { console.log["Fly"] },
wings: 2
}
Tại đây, để truy cập prototype của object myBird, chúng ta sử dụng từ khóa
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
myBird và nếu khai báo như trên, prototype của myBird chính là var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
1.1 Tìm kiếm theo thứ tự inheritance.
Chúng ta có một ví dụ như sau:
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
Ở ví dụ phía trên chúng ta thấy:
- Khi gọi một property của một object, nếu bản thân chưa được khai báo, chương trình sẽ tìm kiếm từ prototype của nó. Nếu prototype của nó không có, lại tiếp tục tìm kiếm trong prototype của prototype của nó. Cứ như vậy chúng ta có prototype chain. Điều này rất giống với override trong OOP thông tường. Vậy nên, khi sử dụng từ khóa this trong một hàm, tốt hơn nên biết rằng mình đang có ý định gọi ở đâu.
1.2 Constructor
Trong OOP thông thường, khi khởi tạo mỗi class, chúng ta có constructor để khởi tạo object đó. Tuy nhiên vì trong Prototype-based programming, chúng ta khởi tạo một object từ một vị trí bất kỳ, không cần khai báo thuộc kiểu class nào. Do vậy, trong các ngôn ngữ Prototype-based programming, người ta sinh ra một kiểu constructor như sau:
const Foo = function [y]{
this.y = y
}
Foo là một hàm thông thường, nhưng chúng ta đã biết, function thực chất chỉ là một loại object đặc biệt, do vậy, Foo ở đây cũng là một class.
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
let b = new Foo[20]
let c = new Foo[30]
Ở đây b và c là 2 object mới. Theo như OOP, chúng ta mong muốn
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
Foo.prototype.x = 10
let b = new Foo[20]
let c = new Foo[30]
// -> This will make
// b.x = 10
// c.x = 10
Khi chúng ta khai báo
const Foo = function [y]{
this.y = y
}
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
const Foo = function [y]{
this.y = y
}
Vậy nên khi chúng ta gọi
const Foo = function [y]{
this.y = y
}
const Foo = function [y]{
this.y = y
}
const Foo = function [y]{
this.y = y
}
const Foo = function [y]{
this.y = y
}
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
const Foo = function [y]{
this.y = y
}
let b = new Foo[20]
let c = new Foo[30]
=> Việc khai báo Foo.prototype thực tế không khác gì việc chúng ta đang khai báo property hay method trong OOP thông thường. Nói cách khác, đây chính là cách khai báo khởi tạo những giá trị trong object của Prototype-based programming. Nhưng nên lưu ý, đặc điểm của Prototype là nó chỉ link, chứ không tạo mới. Do vậy thực tế các giá trị này đều trỏ vào cùng một nơi.
Đối với OOP thông thường, vì những property hay method được định nghĩa sẵn từ trước khi sử dụng nên hầu như không có trường hợp thay đổi lúc Run-time. Tuy nhiên với Prototype-based programming thì có thể. Giả dụ, chúng ta có thể làm như sau:
// Continue from previous code
console.log[b.x] // => 10
b.__proto__.x = 11
console.log[c.x] // => 11
NOTE: Ở đây có một lưu ý, tại sao lại dùng
const Foo = function [y]{
this.y = y
}
let b = new Foo[20]
let c = new Foo[30]
Đó là vì, nếu sử dụng
let b = new Foo[20]
let c = new Foo[30]
const Foo = function [y]{
this.y = y
}
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
let b = new Foo[20]
let c = new Foo[30]
let b = new Foo[20]
let c = new Foo[30]
let b = new Foo[20]
let c = new Foo[30]
b.x = undefined
// b.x -> undefined
b.x = null
// b.x -> null
delete b.x
// b.x == b.__proto__.x = 11
Chỉ khi delete biến
const Foo = function [y]{
this.y = y
}
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
const Foo = function [y]{
this.y = y
}
var a = {
x: 10,
calculate: function [z] {
return this.x + this.y + z;
}
};
var b = { // This mean object b inherite from object a]
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate[30]; // 60
c.calculate[40]; // 80
1.3 How about static ?
Trong OOP, đôi khi, chúng ta cần sử dụng những static property, static method, khai báo trong class. Vậy đối với Prototype-based programming thì liệu có thể làm vậy không ? Chúng ta khai báo trực tiếp trong object Foo phía trên:
Foo.myStaticMethod = [] => {
// do smt
}
Foo.myStaticVariable = 10
Với ECMAScript 6 ra đời, chúng ta lại được quay lại các từ khóa
Foo.prototype.x = 10
let b = new Foo[20]
let c = new Foo[30]
// -> This will make
// b.x = 10
// c.x = 10
Foo.prototype.x = 10
let b = new Foo[20]
let c = new Foo[30]
// -> This will make
// b.x = 10
// c.x = 10
Foo.prototype.x = 10
let b = new Foo[20]
let c = new Foo[30]
// -> This will make
// b.x = 10
// c.x = 10
Foo.prototype.x = 10
let b = new Foo[20]
let c = new Foo[30]
// -> This will make
// b.x = 10
// c.x = 10
NOTE : Những thứ mà prototype base làm được, còn OOP thì không ?
Nói về điều này, có lẽ hơi khó có thể đánh giá. Nhìn chung những gì mà OOP làm được, thì prototype cũng làm được. [Chúng hoàn toàn có thể hoán đổi cho nhau trong một số trường hợp]. Nhưng cũng có vài điểm mà chúng ta cần xem xét sự khác biệt.
Trong OOP đối với các ngôn ngữ biên dịch, việc ép kiểu [Đặc biệt là ép kiểu đối với các lớp kế thừa] là chuyện thường xuyên. Tuy nhiên JS không như vậy, vì nó không yêu cầu khai báo kiểu dữ liệu trước khi gọi. Ấy thế nhưng cũng có một số trường hợp, chúng ta cần ép kiểu cho một đối tượng.