Javascript.Basic - Bài 4 - tạo đối tượng có và không có prototype.

Giới thiệu

Đối tượng có và không có prototype là vấn đề rất thú vị và thực tế, bởi vì giống như trong bài trước, khi giới thiệu về nước lèo và tô phở, tôi có nói rằng tô phở là một object cuối cùng, người dùng chỉ việc thêm gia vị cho phù hợp rồi dùng nó chứ không có ý nghĩa dùng để tạo ra nhiều tô phở khác. Nên bản thân nó không cần chứa prototype. Nó khác với ý nghĩa nước lèo. Từ nước lèo ta có thể tạo ra nhiều tô phở khác nhau, nên nước lèo có ý nghĩa như một prototype. Dưới đây, tôi muốn giới thiệu về việc làm thế nào để tạo object dạng tô phở và object dạng nước lèo.

Tạo object dạng tô phở

Dưới đây là một số ví dụ về cách thức tạo object dạng tô phở:

var obj = new Object();
var date = new Date();
var str = new String();

Các object trên sẽ không có prototype.

obj.prototype
undefined

date.prototype
undefined

str.prototype
undefined

Xem lại hình minh họa mối quan hệ giữa các built-in object trong bài trước, ta để ý một object được tách ra làm 2 gồm có function object và prototype của object. Ví dụ Date thì bao gồm Date() và Date.prototype. Date() được gọi là một function object.
Một object dạng tô phở thì được tạo ra từ một function object thông qua từ khóa new.
Các object dạng này khi sinh ra chỉ chứa một thuộc tính __proto__, link đến prototype của Object mà nó được new ra.

Bên dưới sẽ giới thiệu việc tạo object dạng nước lèo cũng là function object

Tạo object dạng nước lèo, hay tạo một function object.

var Person = new Function();
// Person có object prototype
Person.prototype 
> Object {}
// Person sẽ có __proto__ trỏ đến prototype của đối tượng mà nó được "sinh ra"
Person.__proto__ === Function.prototype
>true
// __proto__ của bất kỳ prototype nào cũng mặc định trỏ về prototype của Object.
Person.prototype.__proto__ === Object.prototype
>true
// prototype là một object cụ thể nên các prototype của các object khác nhau sẽ là khác nhau. 
Person.prototype === Object.prototype
>false

Nhắc lại: __proto__ mặc định trỏ đến prototype mà từ đó nó sinh ra. Nói cách khác __proto__ trỏ đến prototype của object mà nó muốn kế thừa.
Hình mình họa:

Tổng kết:

Dưới đây là hình tổng kết của bài này.

Javascript.Basic - Bài 3 - prototype chain là gì

Giới thiệu

Trong bài trước, tôi đã giới thiệu về các built-in object và mối quan hệ giữa chúng. Trong bài đó tôi có đề cập đến __proto__, và trong bài hôm nay tôi muốn trình bày rõ hơn về nó.

__proto__ là gì

• __proto__ là 1 thuộc tính của objectA trỏ đến prototype của objectB mà nó muốn kế thừa các thuộc tính của objectB. Đây gọi là prototype chain.
• Prototype chain có tính chất như sau: nếu một property không được tìm thấy trong nó thì Javascript sẽ cố tìm property này ở prototype object mà __proto__ của nó đang trỏ tới.
• Hãy xem ví dụ bên dưới:

|objectA|     |objectB.prototype|-------|objectB|
 |           /  |_property1 
 |__proto__ /   |_property2
                |_property3      

objectA.proto === objectB.prototype.
Mặc dù ở objectA nó không có property1, nhưng mà vì __proto__ của objectA trỏ đến prototype của objectB, cho nên nghiễm nhiên là objectA.property1 === objectB.prototype.property1.

Ý nghĩa của prototype chain trong mối quan hệ giữa các object

Quay trở lại mối quan hệ giữa các built-in object:

• Các built-in Object, đều có __proto__ trỏ đến prototype của Function -> sử dụng chung các common (global) function. Tất cả các built-in Object ngoài những function đặc trưng của riêng mình thì đều có thể sử dụng các Function chung như là: apply, bind, call, caller, …
• Các build-in Object đều có Riêng cho mình 1 Prototype và Prototype này có __proto__ trỏ đến Prototype của Object. Do đó các build-in Object này đều là sự kế thừa và mở rộng từ Prototype của Object.

Ví dụ:

Bản thân Date() có chứa cho riêng mình các property như là UTC, now, parse, prototype và đồng thời nó cũng có thể sử dụng các property chung được định nghĩa trong Function.prototype.

Javascript.Basic - Bài 2 - Built-in(Global) object và mối quan hệ của nó.

Giới thiệu

Trong bài trước về khái niệm prototype, chúng ta đã thấy prototype-base programing là dạng lập trình dựa trên các object có sẵn. Do đó, nó phải mang trong mình các object có sẵn đó, mà thuật ngữ tiếng anh sẽ là built-in object. Trong bài này tôi muốn giới thiệu cho các bạn hình ảnh mối quan hệ đó.

Các Built-in Object

• Object
• Function
• Array
• Number
• Boolean
• String
• Date
• CustomUDF
  …

Ở trên chỉ là vài object có sẵn. Nếu các bạn cảm thấy khái niệm object có sẵn là khó hiểu thì hãy hình dung như nó đóng vai trò như là các Data Type trong Java hay C. Rõ ràng bạn có thể có ngay một đối tượng date từ Date mà không cần phải tốn thời gian định nghĩa Date là gì.
Bằng việc cung cấp sẵn các built-in object này, Javascript giúp người có thể nhanh chóng “chế tạo” các object cho riêng mình. Công việc sáng tạo này giống như là đang đứng trên vai người khổng lồ. Và cũng bởi vì các programer có thể nhanh chóng “chế tạo” các object cho riêng mình từ những thứ có sẵn cho nên việc tìm hiểu sâu về prototype cũng sẽ lười đi. Đó cũng là lý do tôi muốn chia sẽ với các bạn về loạt bài prototype này.

Mối quan hệ

Các lưu ý về hình minh họa trên:
- Các Built-in Object đều có Prototype, thể hiện qua đường màu đỏ ngắt quãng.
- Các đường mũi tên màu đen là các link __proto__
- Ở hình trên, tác giả chủ ý vẽ dấu đóng mở ngoặc ở sau tên các object,như là Object(), Function(), Array(), Number()…Ở đây chúng ta hãy tạm gọi là các function object.
- Trong Prototype cũng có các link __proto__
- Tất cả các __proto__ của các Built-in Object đều trỏ tới Funtion.Prototype. Do đó bạn hãy thử bật chrome developer console và gõ typeof Object xem thử nhé.
- Trước mắt các bạn chỉ cần khắc dấu hình ảnh này, chưa cần tìm hiểu sâu về mối quan hệ giữa chúng. Việc tìm hiểu sâu đòi hỏi phải có hiểu biết về __proto__ trong bài sau.
- Và hãy nhớ mối quan hệ sau: object() — Prototype => function object mới có prototype. Và bởi vì object() là một function, prototype là một object, cho nên proto của nó sẽ trỏ về Prototype của Function hoặc là Object.

• Tôi lấy hình trên từ trang web: http://www.bennadel.com

Javascript.Basic - Bài 1 - Khái niệm prototype

Giới thiệu

Javascript là ngôn ngữ quen thuộc với các bạn làm Web, hầu như ai làm Web cũng có thể bắt tay vào viết mã javascript đơn giản được ngay mà không tốn quá nhiều thời gian. Ở đây tôi muốn nhấn mạnh từ đơn giản là bởi vì khi mà tự mình phải viết một thư viện nho nhỏ thì sẽ gặp ngay các khái niệm thuộc hạng cơ bản của Javascript như là prototype. Nếu bạn không nắm vững prototype trong Javascript là gì thì việc rơi vào tình trạng mơ hồ khi lập trình Javascript ở mức độ nâng cao sẽ là đương nhiên. Đó là lý do tôi muốn viết bài này để chia sẽ những hiểu biết của tôi về prototype trong Javascript.

Class

• Định nghĩa các đối tượng mà nó đại diện. Class không phải là object.
• Class-base programing: tôi xin trích một đoạn ở trong trang: https://en.wikipedia.org/wiki/Class-based_programming, “inheritance is achieved by defining classes of objects.”. Tôi nhấn mạnh là bạn cần định nghĩa class để tạo object.

Prototype

• Prototype là một object mà trong đó chứa các đặc điểm ban đầu. Tôi gọi prototype là phôi mẫu.
• Prototype-base programing: tôi xin trích một đoạn ở trong trang: https://en.wikipedia.org/wiki/Prototype-based_programming, “inheritance is performed via process of cloning existing objects that serve as prototype”. Tôi nhấn mạnh là bạn clone các object có sẵn để tạo ra các object mới.

Class vs Prototype

Từ các khái niệm trên, tôi mới phát họa ra hình ảnh sau để minh họa rõ hơn sự khác nhau giữa 2 dạng lập trình.



Như hình minh họa ở trên, nếu ở class-base programing thì công thức nước lèo đóng vai trò là class, nó chứa đựng thông tin mà bạn cần mô tả (định nghĩa) trước, từ công thức đó bạn sẽ tạo ra được nồi nước lèo, nồi nước lèo ở đây là object. Còn ở prototype-base programing, thì bạn hãy hình dung là nó đã có sẵn nồi nước lèo cơ bản này rồi, và bạn chỉ việc clone nó ra thêm nguyên liệu để tạo ra một dạng nước lèo khác. Việc tạo ra dạng nước lèo khác này không cần thông qua việc phải mô tả (định nghĩa) trước công thức của nó mà đơn thuần là sử dụng (clone) nồi nước lèo cơ bản rồi sau đó thêm thắt theo ý mình mà ra. Nồi nước lèo được tạo từ nồi nước lèo cơn bản, nếu nó vẫn đóng vai trò là nồi nước lèo thì nó vẫn được xem là prototype, còn tô phở, một khi được tạo ra, nó không còn ý nghĩa dùng để tạo ra đối tượng nào khác nữa thì nó là một instance và nó không chứa prototype nữa. Do đó:

var obj = new Object();

thì obj không có prototype (nó cũng giống như tô phở ở trên). Các bạn hãy lưu ý điểm này. Còn làm sao có thể tạo object mà có prototype thì tôi sẽ trình bày trong các bài tiếp theo.