Đối tượng trong JavaScript
- Tram Ho
Mục tiêu bài viết
- Cú pháp khai báo đối tượng
- Sử dụng object trong Javascript
Nội dung bài viết
Trong cuộc sống thực, mọi thứ đều là một đối tượng. Ví dụ : ô tô, xe máy, đàn, máy tính….
Một chiếc ô tô có các thuộc tính như trọng lượng và màu sắc, và các phương thức như bắt đầu và dừng.
Tất cả các ô tô đều có các thuộc tính giống nhau, nhưng các giá trị thuộc tính khác nhau giữa các ô tô.
Tất cả các xe đều có các phương pháp giống nhau, nhưng các phương pháp được thực hiện ở những thời điểm khác nhau.
Định nghĩa một đối tượng
Đối tượng cũng là biến. Nhưng các đối tượng có thể chứa nhiều giá trị. Ví dụ:
1 2 | <span class="token keyword">var</span> car <span class="token operator">=</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">"Fiat"</span><span class="token punctuation">,</span> model<span class="token operator">:</span> <span class="token string">"500"</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token string">"white"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Các giá trị được viết dưới dạng cặp name: value (tên thuộc tính và giá trị được phân tách bằng dấu hai chấm).
Thuộc tính đối tượng
Các cặp name: value trong các đối tượng JavaScript được gọi là thuộc tính. Ví dụ:
1 2 3 4 5 6 7 | <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> firstName<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> eyeColor<span class="token operator">:</span> <span class="token string">"blue"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Thì các thuộc tính sẽ là:
Thuộc tính | Giá trị |
---|---|
firstName | John |
lastName | Doe |
age | 21 |
eyeColor | black |
Truy cập thuộc tính đối tượng
Có 2 cách để truy cập vào thuộc tính đối tượng
- Cách 1:
objectName.propertyName
- Cách 2:
objectName["propertyName"]
Ví dụ:
1 2 | person<span class="token punctuation">.</span>lastName<span class="token punctuation">;</span> |
1 2 | person<span class="token punctuation">[</span><span class="token string">"lastName"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
Phương thức đối tượng
Phương thức là các hành động có thể được thực hiện trên các đối tượng.
Các phương thức được lưu trữ trong các thuộc tính dưới dạng định nghĩa hàm. Ví dụ:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> firstName<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">5566</span><span class="token punctuation">,</span> <span class="token function-variable function">fullName</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>firstName <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName<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> |
Thuộc tính | Giá trị |
---|---|
firstName | Nguyễn |
lastName | Thiên |
age | 21 |
eyeColor | black |
fullName | function() {return this.firstName + ” ” + this.lastName;} |
Từ khóa this
.
- Trong định nghĩa hàm, điều này đề cập đến đối tượng sở hữu hàm.
- Trong ví dụ trên đối tượng person sở hữu hàm fullName.
- Nói cách khác,
this.firstName
có nghĩa là thuộc tínhfirstName
của đối tượng này.
Truy cập phương thức
Chúng ta cũng có thể truy cập vào một hàm qua phương thức:
1 2 | objectName<span class="token punctuation">.</span><span class="token function">methodName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Ví dụ:
1 2 | name <span class="token operator">=</span> person<span class="token punctuation">.</span><span class="token function">fullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Nếu bạn truy cập một phương thức không có dấu ngoặc (), nó sẽ trả về định nghĩa hàm. Ví dụ:
1 2 | name <span class="token operator">=</span> person<span class="token punctuation">.</span>fullName<span class="token punctuation">;</span> |
Không khai báo chuỗi, số và Boolean là các đối tượng!
Khi một biến JavaScript được khai báo với từ khóa new
, biến này sẽ được tạo dưới dạng một đối tượng
1 2 3 4 | <span class="token keyword">var</span> x <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 punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khai báo x như một đối tượng String</span> <span class="token keyword">var</span> y <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 punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khai báo y như một đối tượng Number</span> <span class="token keyword">var</span> z <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Boolean</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khai báo z như một đối tượng Boolean</span> |
Chúng làm phức tạp mã code chúng ta và làm chậm tốc độ thực thi.