JavaScript series
Chương này giới thiệu các đối tượng trong JavaScript.
A. Object
1. Overview
Well, về object các bạn có thể đã biết về khái niệm object (đối tượng). Object đại diện cho một thực thể, gồm các thông tin chứa trong những thuộc tính (property) và có những hành vi là những phương thức (method). Object trong JS cũng thế.
Các tính chất của OOP không thể hiện rõ ràng như một số ngôn ngữ khác, điển hình như Java.
2. Creating object
Có nhiều cách để tạo ra một object trong JS:
- Tạo single object bằng object literal (initializer)
- Tạo object bằng new và Object constructor
- Tạo object bằng một constructor tùy chỉnh
- Tạo từ class
Từ ES5 có thể dùng method Object.create()
để tạo object.
Object literal
Đây là cách đơn giản và rõ ràng nhất để tạo object. Nhược điểm là nó chỉ tạo ra một object duy nhất, nên muốn tạo ra nhiều object cùng lúc cần dùng cách khác.
1 2 3 4 5 6 | <span class="token keyword">let</span> shortObj <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> longObj <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span> |
Chú ý hai cách viết trên, cách 1 ngắn gọn dùng cho object nhỏ, đơn giản. Cách 2 tuy dài hơn nhưng rõ ràng và phù hợp cho các object phức tạp. Và chú ý luôn cả cách mình đặt space trong các dòng.
New keyword & Object constructor
1 2 3 4 | <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> john<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"John"</span><span class="token punctuation">;</span> john<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span> |
Cách này sử dụng từ khóa new và Object constructor. Đầu tiên dòng 1 chỉ tạo ra object rỗng, và rồi bạn mới thêm các thuộc tính vào bằng cách gán value cho nó.
Define a constructor
Cách này khá giống cách ở trên, nhưng chúng ta sử dụng constructor tùy chỉnh thay vì Object. Constructor chỉ là một function bình thường, gán giá trị cho this, và được gọi bằng new keyword.
1 2 3 4 5 6 | <span class="token keyword">function</span> <span class="token function">createPerson</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">createPerson</span><span class="token punctuation">(</span><span class="token string">"John"</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Cách này trước khi JS có class được dùng khá nhiều, vì nó có thể tạo ra được nhiều object tương tự nhau.
Instantiate from class
ES6 bổ sung thêm từ khóa class, nên có thể khởi tạo nhiều object từ một class đã định nghĩa. Việc này tương tự trong các ngôn ngữ khác nên dễ làm quen hơn.
1 2 3 4 5 6 7 8 | <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"John"</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Phần về class sẽ bàn sâu hơn trong các phần tiếp theo.
Object.create()
Object.create()
là method rất hay để tạo object khi bạn muốn chọn prototype cho object tạo ra.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">let</span> Vehicle <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'unknow'</span><span class="token punctuation">,</span> <span class="token function-variable function">run</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' is running'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> car <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>Vehicle<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Tạo Car từ prototype của Vehicle</span> car<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Car'</span><span class="token punctuation">;</span> car<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Car is running</span> |
3. Display object
Đôi khi chúng ta muốn xem tất cả giá trị của object, thì có thể dùng một số cách sau.
- Hiển thị một property
- Dùng vòng lặp
for in
để hiển thị tất cả property và value của chúng - Dùng method
Object.keys()
hoặcObject.values()
để lấy tất cả key hoặc value của object dạng array. - Dùng method
toString()
hoặcJSON.stringify()
. - Xuất ra bằng
console.log()
.
Tuy nhiên, trong phần này mình muốn giới thiệu tới các bạn method console.table()
sẽ hiển thị toàn bộ object dưới dạng bảng trong console rất tiện. Nhược điểm là các method sẽ không hiển thị trong bảng, nên nó rất phù hợp khi bạn muốn xem nhanh dữ liệu trong object.
1 2 | console<span class="token punctuation">.</span><span class="token function">table</span><span class="token punctuation">(</span>john<span class="token punctuation">)</span><span class="token punctuation">;</span> |
B. Property & method
1. Property
Thuộc tính (property) là nơi chứa dữ liệu cho object, mỗi thuộc tính là một cặp key: value
. Giữa tên thuộc tính key
và value
tách nhau bởi dấu hai chấm, và giữa các thuộc tính với nhau cách nhau bởi dấu phẩy.
1 2 3 4 5 6 | <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> <span class="token comment">// Thuộc tính name</span> age<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token comment">// Thuộc tính age</span> <span class="token function-variable function">callPolice</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">113</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong JS, các phương thức cũng được xem là thuộc tính, như trên.
Tên thuộc tính đặc biệt có thể chứa khoảng trắng, khi đó cần dùng dấu nháy bao lại.
Access property
Có hai cách để truy cập thuộc tính, nghĩa là đọc value hoặc thay đổi value của nó.
1 2 3 | console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"My name is "</span><span class="token punctuation">,</span> john<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Đọc</span> john<span class="token punctuation">[</span><span class="token string">"age"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">21</span><span class="token punctuation">;</span> <span class="token comment">// Ghi</span> |
Cách 1 sử dụng cú pháp object.property
được dùng nhiều hơn.
Cách 2 sử dụng cách truy cập như mảng object["property"]
, trong đó property
là tên của thuộc tính. Cách 2 thường dùng khi tên property có dấu cách, hoặc truy cập các computed name property.
Add, delete property
Để thêm thuộc tính vào object, chỉ cần gán một value cho nó.
1 2 3 | john<span class="token punctuation">.</span>isMale <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// Thêm thuộc tính isMale vào john</span> john<span class="token punctuation">[</span><span class="token string">"isSingle"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// Cách này cũng được</span> |
Để xóa thuộc tính, dùng toán tử delete.
1 2 3 | <span class="token keyword">delete</span> john<span class="token punctuation">.</span>isMale<span class="token punctuation">;</span> <span class="token keyword">delete</span> john<span class="token punctuation">[</span><span class="token string">"isSingle"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
Chú ý, việc thêm và xóa thuộc tính có thể bị chặn vì object không cho phép (các phần sau sẽ bàn tới). Trong strict mode, delete bị cấm. Và nên hạn chế thêm hoặc xóa thuộc tính của object.
For in loop
Để duyệt qua các thuộc tính, sử dụng vòng lặp for in
.
1 2 3 | <span class="token keyword">for</span> <span class="token punctuation">(</span>prop <span class="token keyword">in</span> john<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>prop<span class="token punctuation">,</span> <span class="token string">": "</span><span class="token punctuation">,</span> john<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Biến prop
mỗi lần lặp sẽ nhận lần lượt các property name, và sử dụng john[prop]
để lấy giá trị property đang trỏ tới. Chú ý phải dùng john[prop]
mà không phải john.prop
, vì prop
ở đây không phải là thuộc tính cố định.
Property attributes
Thuộc tính trong JS có ba tính chất đặc biệt:
- Writable: cho phép thay đổi thuộc tính hay không
- Enumerable: cho phép thuộc tính được tìm thấy bằng vòng lặp
for in
hoặc các method nhưObject.keys
hoặcObject.values
. - Configurable: cho phép cấu hình thuộc tính, nghĩa là thay đổi được các thông số như writable, enumerable trên. Chỉ những thuộc tính có configurable mới có thể xóa bởi toán tử
delete
.
Mọi thuộc tính trong JS đều có thể đọc được, do đó muốn bảo mật thì nên dùng closure thay thế.
2. Method
Method là những function bên trong object, và các method cũng là property có value là function ẩn danh.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token function-variable function">callPolice</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"POLICE!!!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">callMom</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello Mom"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> john<span class="token punctuation">.</span><span class="token function">callPolice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> john<span class="token punctuation">.</span><span class="token function">callMon</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Hai method trên khai báo hai cách khác nhau. Cách 1 là cách cũ trước đây, và cách 2 là cách viết method gọn hơn được giới thiệu từ ES6.
This keyword
Trong method, từ khóa this
chỉ tới owner của method, là chính object chứa nó. Do đó, chúng ta có thể gọi các method và property khác bên trong cùng object nhờ this
.
Trường hợp ngoại lệ khi gọi method bằng call()
hoặc apply()
. Khi đó this
sẽ là đối số đầu tiên (dạng object) khi gọi call()
, apply()
.
Add method
Để thêm method vào, tương tự như thêm thuộc tính, chỉ cần gán value là một function ẩn danh cho nó.
1 2 | john<span class="token punctuation">.</span><span class="token function-variable function">callDad</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hi Dad"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Delete method
Các method của object không thể bị xóa.
C. Accessor, constructor & prototype
1. Accessor
Getter & setter
Từ ES5 đã giới thiệu getter và setter, nhờ đó thay vì truy cập thẳng vào thuộc tính thì phải thông qua một accessor (đối tượng truy cập). Sử dụng accessor tương tự như property, khác biệt ở cách chúng hoạt động:
- Thuộc tính bình thường đọc ghi trực tiếp vào property.
- Accessor sử dụng getter để đọc và setter để ghi mỗi khi có yêu cầu tới thuộc tính. Setter và getter là các hàm, bạn có thể viết code cho nó để chúng xử lý dữ liệu trước khi đưa ra ngoài (getter) hoặc ghi vào property (setter).
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token punctuation">{</span> _name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> <span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Tên tao ai cho mày thay đổi :D"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>john<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Read name > get name()</span> john<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"Mike"</span><span class="token punctuation">;</span> <span class="token comment">// Write name > set name()</span> |
Thuộc tính _name
là thuộc tính thực, trong đó name
là accessor tạo bởi get name()
và set name()
. Ở đây mình viết thuộc tính thực có dấu underscore _ phía trước.
Khi đọc ghi trên accessor, thì tùy vào hành động (đọc hoặc ghi) thì getter (đọc) hoặc setter (ghi) sẽ được gọi tương ứng.
Một thuộc tính có thể không có getter, setter, có một trong hai hoặc cả hai đều được.
Cấu trúc getter, setter
Getter có cấu trúc một method, không tham số và return một giá trị.
1 2 3 4 5 | <span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Setter là method nhận vào một value, và không return giá trị nào.
1 2 3 4 | <span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> |
Tên của method ở getter và setter là tên accessor phải trùng nhau, để trỏ tới cùng một accessor. Và tên accessor được sử dụng như tên property thông thường.
Tại sao dùng accessor
Một số lý do để sử dụng accessor như sau:
- Cú pháp đơn giản và giống nhau giữa property và method
- Đảm bảo luồng dữ liệu vào ra object hợp lệ và chuẩn
- Giúp thực hiện các thao tác khác trong nền khi truy cập thuộc tính
Accessor cho property có sẵn
Có thể định nghĩa thêm accessor cho một thuộc tính đã có mà không cần chỉnh sửa code object đó bằng method Object.defineProperty()
.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token punctuation">{</span> _name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span> Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>john<span class="token punctuation">,</span> <span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Method trên nhận vào ba tham số. Tham số 1 là object chỉ định, tham số 2 là tên thuộc tính. Tham số 3 là một object đại diện cho thuộc tính.
Cú pháp chỉ định getter setter của method trên hơi khác với định nghĩa trực tiếp trong object. Có thể hiểu tham số 3 của Object.defineProperty()
là một object cấu hình, có hai method là get()
và set()
đại diện cho getter và setter, do đó nó không có tên mà chính get và set là tên rồi.
Method này sẽ được nói kĩ hơn trong những phần sau.
2. Constructor
Constructor chỉ là function dùng tạo object, và được gọi với từ khóa new. Constructor sử dụng từ khóa this đại diện object sẽ tạo ra, this sẽ được tự động return ra ngoài constructor thành một object mới.
1 2 3 4 5 6 7 | <span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"John Doe"</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> vu <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"Vu Tong"</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Với constructor, có thể tạo ra nhiều object có cấu trúc giống nhau nhanh chóng, mặc dù giá trị trong đó có thể khác nhau.
Constructor thường nhận vào các tham số, tương ứng với các thuộc tính sẽ có của object, và được gán cho this như trên.
Chú ý nên sử dụng constructor đúng với chức năng của nó. Không nên gọi function với new, cũng như không gọi constructor như function bình thường (không có new).
This keyword
Tùy thuộc cách gọi function, gọi bình thường thì this là owner của function (object window hoặc object chứa method). Nếu gọi function có từ khóa new, thì function thành constructor, thì this mang ý nghĩa khác.
This trong constructor là object tạm, khi constructor thực hiện xong thì object tạm sẽ được tạo ra và được gán tham chiếu cho một biến object.
1 2 3 4 | <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// This trong Person sẽ trở thành object</span> <span class="token comment">// và được gán tham chiếu cho biến john</span> |
Add property, method in constructor
Thêm như object bình thường, nhưng sử dụng this
cho object chứ không phải bản thân constructor.
1 2 3 4 5 | <span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token comment">// Ok</span> Person<span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token comment">// Sai</span> <span class="token punctuation">}</span> |
Type constructors
Các kiểu dữ liệu có những constructor xây dựng sẵn, ví dụ object thì có Object()
, string thì có String()
, tương tự với Number()
, Boolean()
,… kể cả kiểu primitive.
1 2 3 | <span class="token keyword">let</span> n <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Number</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token string">"ABC"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Tuy có thể tạo primitive type với new, nhưng không nên dùng vì nhiều hạn chế.
3. Prototype
JS trước ES6 thì chưa có khái niệm class, nên việc thực hiện kế thừa (inheritance) giữa các object phải thông qua prototype. Có thể hiểu nếu hai object có cùng prototype, thì chúng sẽ có những thuộc tính và phương thức chung của prototype đó.
Prototype thường có trong constructor, khi đó mọi object tạo ra từ constructor này sẽ chia sẻ chung các member của prototype.
Mọi object đều có một thuộc tính tên là __proto__
, chứa các thuộc tính và phương thức có trong prototype của nó.
Thêm thuộc tính vào prototype tương tự như object. Thường thì prototype chỉ chứa method chứ ít khi có property.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token comment">// Constructor</span> <span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Add method to constructor's prototype</span> <span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">hi</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hi '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Object has new method from prototype</span> <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> join<span class="token punctuation">.</span><span class="token function">hi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Có được từ prototype</span> |
Chú ý, khi thay đổi, thêm thuộc tính vào thuộc tính __proto__
của object bất kì cũng sẽ ảnh hưởng tới toàn bộ object khác có sử dụng chung prototype (hoặc constructor).
D. Object constructor
Object
trong JS là một constructor dùng để tạo ra các object. Bên cạnh đó, nó cũng chứa một số thuộc tính và phương thức xử lý cho mọi object, ví dụ như.
1 2 3 | <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Các method xử lý object của Object được sử dụng như trên, giống như ví dụ về các static method.
1. Object properties
Chỉ có hai property của Object là length
và prototype
.
Thuộc tính length
luôn trả về 1, và prototype
cho phép bổ sung thêm các thành viên khác cho các object tạo ra từ Object.
2. Object methods
Tất cả các method của Object đều nhận vào một tham số là một object nào đó.
Object.create method
Tạo một object mới với prototype của một object khác được chỉ định. Chi tiết đã nói ở phần trên.
Object.keys & Object.values method
Method Object.keys()
trả về một mảng các tên thuộc tính (còn gọi là key vì thuộc tính có tên: value, tương ứng với key: value).
1 2 3 | <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> arr <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>john<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['name', 'age']</span> |
Nếu method không truyền object mà nhận vào string hoặc array, thì danh sách key lấy ra có dạng 1, 2, 3,… (vì string và array đánh index cho từng phần tử, nên key sẽ là index).
Method Object.values()
tương tự, nhưng nó trả về các value của thuộc tính thay vì key.
Object.getOwnPropertyNames method
Method Object.getOwnPropertyNames()
tương tự như Object.keys()
, dùng lấy ra một mảng các tên thuộc tính (key hoặc property name). Hoặc có một cách nữa là dùng vòng lặp for in
để lặp qua mọi thuộc tính.
Khác biệt ở chỗ Object.getOwnPropertyNames()
lấy ra cả những thuộc tính enumerable là false, còn Object.keys()
và for in
không tìm thấy những thuộc tính không enumerable.
Object.seal & Object.freeze method
Method Object.seal()
ngăn chặn việc xóa các thuộc tính của object. Method Object.freeze()
cũng không cho phép xóa, và cũng không cho phép thay đổi value của bất kì thuộc tính nào trong object.
Có hai method khác để kiểm tra là Object.isSealed()
để kiểm tra object có được sealed không, và Obect.isFrozen()
để kiểm tra tình trạng freeze của object.
Object.preventExtensions & Object.isExtensible
Method Object.preventExtensions()
không cho phép thêm thuộc tính và method vào method.
Và dùng method Object.isExtensible()
để kiểm tra object có thể thêm thuộc tính và method vào không. Nếu đã dùng Object.preventExtensions()
ở trên thì Object.isExtensible()
là false.
Object,is method
Dùng method Object.is()
để kiểm tra xem hai value có giống nhau hay không:
- Cả hai có cùng giá trị, undefined, null, hoặc true, hoặc false, hoặc string giống nhau.
- Đối với object (tính cả array), thì method trả về true khi cả hai có cùng địa chỉ bộ nhớ (hoặc tham chiếu cùng một object).
- Đối với số, thì nó phải giống nhau hoàn toàn, ví dụ
+0
và-0
là khác nhau,Number.NaN
vàNaN
là giống nhau,Number.POSITIVE_INFINITY
vàInfinity
giống nhau.
Nói chung thì Object.is()
và hai phép so sánh ==
và ===
khá giống nhau, nhưng Object.is()
giống với ===
hơn. Ví dụ.
1 2 3 4 | <span class="token number">10</span> <span class="token operator">==</span> <span class="token string">'10'</span><span class="token punctuation">;</span> <span class="token comment">// true</span> <span class="token number">10</span> <span class="token operator">===</span> <span class="token string">'10'</span><span class="token punctuation">;</span> <span class="token comment">// false</span> Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">'10'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span> |
Khác biệt giữa toán tử ===
và method Object.is()
nằm ở chỗ chúng so sánh các số, như đề mục thứ 3 ở trên. Hãy xem ví dụ sau.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token operator">+</span><span class="token number">0</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// true, vì đều bằng 0</span> Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token operator">+</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false, vì chúng khác dấu :)</span> <span class="token operator">-</span><span class="token number">0</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// true, vì đều bằng 0</span> Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true, vì chúng cùng dấu :D</span> Number<span class="token punctuation">.</span><span class="token number">NaN</span> <span class="token operator">===</span> <span class="token number">NaN</span><span class="token punctuation">;</span> <span class="token comment">// false, vì === thích thế</span> Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true, éo hiểu</span> Number<span class="token punctuation">.</span><span class="token constant">POSITIVE_INFINITY</span> <span class="token operator">===</span> <span class="token number">Infinity</span><span class="token punctuation">;</span> <span class="token comment">// false</span> Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token constant">POSITIVE_INFINITY</span><span class="token punctuation">,</span> <span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> |
JS thật vl .
Object.assign method
Dùng method này để sao chép đối tượng nguồn (source) sang đối tượng đích (target) và trả về đối tượng đích. Nếu source không phải object, JS sẽ cố chuyển nó thành object bằng cách dùng wrapper cho nó.
Method Object.assign()
sao chép theo đúng nghĩa copy dữ liệu các thuộc tính và method vào object khác, còn phép gán =
chỉ là gán tham chiếu thôi. Và chú ý các thuộc tính enumerable là false và accessor sẽ không được sao chép.
1 2 3 4 5 | <span class="token keyword">let</span> source <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> target <span class="token operator">=</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> source<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// target = { a: 10, b: 20, c: 40 };</span> |
Chú ý, method trên copy từ source vào target, các thuộc tính trùng tên đã có trong target sẽ bị source ghi đè lên (do đó b
có giá trị là 20 chứ không phải 30, vì b
của source đã ghi đè lên b của target).
Thêm một ví dụ nữa đơn giản hơn về sao chép đối tượng, nghĩa là tạo đối tượng mới có nội dung y chang đối tượng đã có.
1 2 3 4 | <span class="token keyword">let</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj2<span class="token punctuation">,</span> obj1<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Như trên sau khi copy thì hai object có nội dung giống nhau hoàn toàn. Nhưng thường người ta sẽ lợi dụng tính trả về của Object.assign()
, mà rút gọn đi dòng khai báo thứ 2 ở trên.
1 2 3 | <span class="token keyword">let</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> obj2 <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> obj1<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Method Object.assign()
có thể nhận nhiều hơn một source, khi đó cấu trúc sẽ có dạng như sau.
1 2 | <span class="token keyword">let</span> target <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> source1<span class="token punctuation">,</span> source2<span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Chú ý object source đứng sau sẽ ghi đè lên thuộc tính trùng tên đã có.
Object.defineProperty method
Dùng method này để định nghĩa một thuộc tính mới, hoặc thay đổi các thông số của thuộc tính đã có.
1 2 3 4 5 | <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>john<span class="token punctuation">,</span> <span class="token string">'isMale'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Method trên nhận vào 3 tham số:
- Tham số 1 là object sẽ được thêm thuộc tính vào
- Tham số 2 là tên thuộc tính (có thể là thuộc tính mới hoặc đã có rồi)
- Tham số 3 là descriptor, là một object chứa các thông số của thuộc tính. Chú ý tới tham số này.
Bạn có thể chỉ định value, getter, setter cho thuộc tính thông qua descriptor (tham số 3). Desriptor là một object quy định các thông số của thuộc tính như writable, enumerable, configurable, getter và setter như ví dụ sau.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>john<span class="token punctuation">,</span> <span class="token string">'isMale'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token comment">// Giá trị thuộc tính isMale (không có getter)</span> value<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Thông số thuộc tính isMale</span> enumerable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> configurable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> writable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Getter và setter</span> <span class="token keyword">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Method Object.definePropery()
cũng được dùng để modify lại những thuộc tính đã có, có thể là thay đổi value, thêm getter hoặc setter cho nó, hoặc sửa lại các thông số khác.
Object.defineProperties method
Method Object.defineProperties()
khá giống với Object.defineProperty()
, khác biệt ở chỗ method số nhiều sẽ định nghĩa liên tiếp nhiều thuộc tính.
Ví dụ về cú pháp method này, gồm tham số 1 là object cần sửa, tham số 2 là một object lớn, chứa bên trong là những cặp thuộc tính, có tên thuộc tính là tên object, value của thuộc tính là một object descriptor như trên phần Object.defineProperty()
đã nói.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>john<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">'name'</span><span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> writable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> enumerable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> configurable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token keyword">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// Prevent change name</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Others
Trên đây chỉ là những thuộc tính và method cơ bản, hay dùng của Object, có thể tìm hiểu nhiều thêm nữa.
E. Classes
1. Overview
Từ phiên bản ES6 (ECMAScript 2015) đã giới thiệu thêm class. Class về bản chất là một function constructor theo đúng nghĩa (typeof một class sẽ ra function ), nhưng được viết với cú pháp gần với những ngôn ngữ khác hơn.
Definition
Cú pháp định nghĩa class như sau.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span> <span class="token comment">// Define properties here</span> <span class="token punctuation">}</span> <span class="token comment">// Define methods here </span> <span class="token punctuation">}</span> <span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> john<span class="token punctuation">.</span> |
Trong class luôn có một method constructor, là nơi định nghĩa các thuộc tính. Còn những method khác được định nghĩa ở ngoài (cùng cấp với constructor).
Việc tạo object từ class tương tự như constructor, có từ khóa new
như trong ví dụ trên.
Inheritance
ES6 bổ sung thêm từ khóa extends
để kế thừa class.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">class</span> <span class="token class-name">Student</span> <span class="token keyword">extends</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> school</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Luôn gọi đầu tiên, trước khi gán thuộc tính mới</span> <span class="token keyword">this</span><span class="token punctuation">.</span>school <span class="token operator">=</span> school<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token string">'Nguyen Van A'</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token string">'Binh Thuan'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Để truy cập ngược lên lớp cha, sử dụng từ khóa super
. Chú ý, khi kế thừa constructor lớp con thì luôn luôn gọi constructor lớp cha (nếu có) ở đầu tiên.
Hoisting
Class thì không được hoisting, mặc dù nó cũng là function.
Strict mode
Cú pháp viết class luôn phải tuân thủ strict mode, điều này là bắt buộc.
2. Methods
Constructor
Constructor là một method đặc biệt, là nơi khởi tạo các thuộc tính cũng như kế thừa lớp cha. Constructor luôn được tự động gọi mỗi khi tạo object mới từ class.
Một class chỉ có duy nhất một constructor, nếu không chỉ định constructor thì JS sẽ tự thêm constructor ẩn không làm gì cả.
Constructor có các tham số như của function constructor, nhận những giá trị được truyền vào khi tạo object với new
.
Method
Method cũng không có gì để nói nhiều. Trong khi các thuộc tính định nghĩa bên trong constructor, thì các method sẽ được viết cùng cấp với constructor.
Method cũng có hai cách viết, cách mới ES6 và cách cũ như trình bày ở trên.
Static method
Các static method sẽ được gọi từ class thay vì gọi từ object. Chỉ cần thêm từ khóa static
vào đầu khai báo method.
Vì static có từ ES6, nên nó phải dùng cách khai báo method mới của ES6, là static func() {}
chứ không phải static func: function () {}
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">class</span> <span class="token class-name">Student</span> <span class="token keyword">extends</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> school</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>school <span class="token operator">=</span> school<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">static</span> <span class="token function">introduce</span><span class="token punctuation">(</span><span class="token parameter">student</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>student<span class="token punctuation">.</span>name<span class="token punctuation">,</span> student<span class="token punctuation">.</span>age<span class="token punctuation">,</span> student<span class="token punctuation">.</span>school<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token string">'Nguyen Van A'</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token string">'Binh Thuan'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token string">'Le Thi B'</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token string">'Quang Binh'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Student<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> Student<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Static method thường dùng để viết các tập method xử lý chính đối tượng đó, vì vậy tham số nhận vào là object tạo ra từ class đó.
3. Property
Định nghĩa property trong class thì nó phải ở trong constructor.
1 2 3 4 5 6 7 8 | <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Đối với getter và setter thì tương tự method.