1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
|
---
title: Working with objects
slug: Web/JavaScript/Guide/Working_with_Objects
translation_of: Web/JavaScript/Guide/Working_with_Objects
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
<p class="summary">JavaScript được thiết kế trên mô hình đối tượng đơn giản. Một object là một tập hợp các thuộc tính, và một thuộc tính là sự liên kết giữa một cái tên và giá trị. Giá trị của một thuộc tính có thể là một hàm. Ngoài những đối tượng được định nghĩa trước trong trình duyệt, bạn có thể định nghĩa những đối tượng của riêng bạn. Chương này mô tả cách sử dụng những đối tượng, những thuộc tính, những hàm, và phương thức, cũng như cách thức để tạo đối tượng riêng của mình.</p>
<h2 id="Tổng_quan_về_Objects">Tổng quan về Objects</h2>
<p>Objects trong JavaScript, cũng tương tự như những ngôn ngữ khác, có thể so sánh như đối tượng trong đời thường. Khái niệm của objects trong JavaScript có thể được hiểu như những đối tượng thực tế trong đời thực.</p>
<p>Trong JavaScript, một object là một thực thể độc lập, với thuộc tính và kiểu. Lấy cái tách làm ví dụ. Cái tách là một object có những thuộc tính của riêng nó. Một cái tách có màu sắc, thiết kế, trọng lượng, chất liệu tạo ra nó, vân vân... Tương tự như vậy, JavaScript objects có thể có những thuộc tính định nghĩa nên đặc tính của nó.</p>
<h2 id="Objects_and_thuộc_tính">Objects and thuộc tính</h2>
<p>Một JavaScript object có những thuộc tính liên kết với nó. Một thuộc tính của một object có thể được giải thích như là một biến mà được gắn vào object đó. Những thuộc tính của object cơ bản cũng là những biến JavaScript bình thường, chỉ đặc biệt là được gắn lên object. Thuộc tính của object định nghĩa đặc tính của object. Chúng ta truy xuất thuộc tính của object với ký hiệu ".":</p>
<pre class="brush: js">objectName.propertyName
</pre>
<p>Giống như những biến JavaScript, cả tên của object (có thể được xem như là 1 biến thông thường) và tên thuộc tính thì cũng phân biệt hoa thường. Bạn có thể định nghĩa một thuộc tính bằng cách gán giá trị cho nó. Ví dụ hãy tạo đối tượng myCar và gắn thuộc tính cho nó như <code>make</code>, <code>model</code>, and <code>year</code> như sau:</p>
<pre class="brush: js">var myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
</pre>
<p>Những thuộc tính không được gán giá trị sẽ có giá trị {{jsxref("undefined")}} (lưu ý nó là không {{jsxref("null")}}).</p>
<pre class="brush: js">myCar.color; // undefined</pre>
<p>Thuộc tính của JavaScript object có thể được truy xuất hoặc thiết lập bằng cách dùng dấu ngoặc vuông (xem <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> để tham khảo chi tiết). Objects thỉnh thoảng cũng được gọi là <em>mảng liên kết, </em>vì mỗi thuộc tính được liên kết với một giá trị kiểu chuỗi mà có thể được dùng để truy xuất thuộc tính đó. Ví dụ bạn có thể truy xuất những thuộc tính của <code>myCar</code> object như sau:</p>
<pre class="brush: js">myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;
</pre>
<p>Tên thuộc tính của một object có thế là chuỗi ký tự hợp lệ bất kỳ, hoặc bất kỳ thứ gì có thể chuyển đổi được thành chuỗi, bao gồm cả chuỗi rỗng. Tuy nhiên, bất kỳ tên thuộc tính nào mà không phải là 1 định danh hợp lệ trong JavaScript (ví dụ, một thuộc tính mà tên có khoảng trắng hoặc gạch ngang, hoặc bắt đầu bằng số) chỉ có thể truy xuất bằng cách dùng dấu ngoặc vuông []. Ký pháp này cũng rất hữu dụng khi tên thuộc tính được xác định động (khi tên thuộc tính chỉ được xác định lúc thực thi). Như trong ví dụ sau:</p>
<pre class="brush: js">// Khởi tạo 4 biến và gán giá trị cho chúng trên cùng một dòng lệnh
// phân cách bởi dấu ","
var myObj = new Object(),
str = 'myString',
rand = Math.random(),
obj = new Object();
myObj.type = 'Dot syntax';
myObj['date created'] = 'String with space';
myObj[str] = 'String value';
myObj[rand] = 'Random Number';
myObj[obj] = 'Object';
myObj[''] = 'Even an empty string';
console.log(myObj);
</pre>
<p>Chú ý tất cả biểu thức được làm khóa trong dấu ngoặc vuông đều được chuyển đổi thành kiểu chuỗi, bởi vì objects trong JavaScript chỉ chấp nhận khóa là kiểu chuỗi. Ví dụ trong đoạn mã trên khi khóa <code>obj</code> được thêm vào <code>myObj</code>, JavaScript sẻ gọi phương thức <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">obj.toString()</a>, và lấy kết quả đó làm khóa.</p>
<p>Bạn cũng có thể truy xuất thuộc tính bằng cách dùng giá trị chuỗi mà nó được lưu trong một biến:</p>
<pre class="brush: js">var propertyName = 'make';
myCar[propertyName] = 'Ford';
propertyName = 'model';
myCar[propertyName] = 'Mustang';
</pre>
<p>Bạn có thể sử dụng dấu ngoặc vuông với <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> để duyệt qua tất cả thuộc tính có thể đếm của object. Để minh họa cách nó hoạt động, hãy xem xét hàm sau đây, nó sẽ hiển thị những thuộc tính của đối tượng dựa vào 2 đối số gồm đối tượng (<code>obj</code>) và tên (<code>objName</code>) của đối tượng truyền vào cho hàm:</p>
<pre class="brush: js">function showProps(obj, objName) {
var result = '';
for (var i in obj) {
// obj.hasOwnProperty() is used to filter out properties from the object's prototype chain
if (obj.hasOwnProperty(i)) {
result += objName + '.' + i + ' = ' + obj[i] + '\n';
}
}
return result;
}
</pre>
<p>Như vậy, khi ta gọi <code>showProps(myCar, "myCar")</code> thì kết quả được trả về như sau:</p>
<pre class="brush: js">myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969</pre>
<h2 id="Liệt_kê_những_thuộc_tính_của_một_object">Liệt kê những thuộc tính của một object</h2>
<p>Bắt đầu từ <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, có 3 cách để liệt kê/duyệt danh sách thuộc tính của object:</p>
<ul>
<li>Câu lệnh lặp <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br>
Cách này duyệt qua tất cả thuộc tính có thể duyệt của một object và chuỗi prototype của nó</li>
<li>{{jsxref("Object.keys", "Object.keys(o)")}}<br>
Phương thức này trả về một mảng tất cả tên những thuộc tính có thể liệt kê mà gắn trực tiếp trên object <code>o</code> (không phải từ chuỗi prototype)</li>
<li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br>
Phương thức này trả về một mảng tất cả tên những thuộc tính (có thể liệt kê hoặc không) mà gắn trực tiếp trên object <code>o</code> (không phải từ chuỗi prototype)</li>
</ul>
<p>Trước ECMAScript 5, không có cách thức có sẵn để liệt kê tất cả thuộc tính của một object. Tuy nhiên, chúng ta có thực hiện việc đó bằng hàm sau:</p>
<pre class="brush: js">function listAllProperties(o) {
var objectToInspect;
var result = [];
for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
result = result.concat(Object.getOwnPropertyNames(objectToInspect));
}
return result;
}
</pre>
<p>Cách này rất hữu ích khi chúng ta muốn hiển thị những thuộc tính ẩn (những thuộc tính trong chuỗi prototype mà không thể truy xuất thông qua object, bởi vì một thuộc tính khác có cùng tên ở lớp trước của chuỗi prototype đã đè lên nó). Việc liệt kê những thuộc tính có thể truy xuất chỉ có thể dễ dàng hoàn thành bằng cách xóa bỏ trùng lặp trong mảng.</p>
<h2 id="Tạo_những_object_mới">Tạo những object mới</h2>
<p>JavaScript có một số object được định nghĩa sẵn. Ngoài ra, bạn có thể tạo định nghĩa những object mới. Bạn có thể tạo một object sử dụng <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">bộ khởi tạo object (object initializer).</a> Cách khác, bạn có thể tạo hàm dựng và rồi khởi tạo đối tượng bằng cách gọi hàm đó với toán tử <code>new</code> đặt trước.</p>
<h3 id="Sử_dụng_bộ_khởi_tạo_object"><a id="Object_initializers" name="Object_initializers">Sử dụng bộ khởi tạo object</a></h3>
<p>Ngoài việc khởi tạo object bằng cách dùng hàm dựng, bạn có thể tạo object bằng cách sử dụng <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">bộ khởi tạo (object initializer)</a>. Sử dụng bộ khởi tạo thỉnh thoảng cũng được hiểu là cách khởi tạo bằng cách dùng literal. "Bộ khởi tạo" ("Object initializer") thì đồng nhất với thuật ngữ được sử dụng trong C++.</p>
<p>Cú pháp cho việc tạo một object bằng bộ khởi tạo la:</p>
<pre class="brush: js">var obj = { property_1: value_1, // property_# may be an identifier...
2: value_2, // or a number...
// ...,
'property n': value_n }; // or a string
</pre>
<p>Trong đó <code>obj</code> là tên của object mới, mỗi <code>property_<em>i</em></code> là một định danh (hoặc là một tên, một số, hoặc một chuỗi dạng literal), và mỗi <code>value_<em>i</em></code> là một biểu thức mà giá trị được gán cho <code>property_<em>i</em></code> . <code>obj</code> và phép gán là không bắt buộc; nếu bạn không cần tham chiếu đến object đó ở chổ khác, bạn không cần assign nó cho một biến. (lưu ý bạn có thể cần bao object literal lại bằng dấu ngoặc nếu nó xuất hiện ở chổ cần như là một câu lệnh, làm như vậy để tránh gây nhầm lẩn với câu lệnh khối.)</p>
<p>Bộ khởi tạo object là những biểu thức, và mỗi bộ khởi tạo object sẽ tạo ra object mỗi khi biểu thức đó được tính toán. Bộ khởi tạo object tạo ra những đối tượng riêng biệt và chúng không bằng nhau khi so sánh bằng <code>==</code>. Những đối tượng được tạo ra bằng cách <code>new Object()</code> cũng như những đối tượng được tạo ra bằng object literal đều là thực thể (instance) của <code>Object</code>.</p>
<p>Câu lệnh sau tạo một đối tượng và gán nó cho biến <code>x</code> khi và chỉ khi biểu thức <code>cond</code> là true:</p>
<pre class="brush: js">if (cond) var x = {greeting: 'hi there'};
</pre>
<p>Đoạn mã sau tạo đối tượng <code>myHonda</code> với ba thuộc tính. Lưu ý thuộc tính <code>engine</code> cũng là một object và nó có những thuộc tính riêng của nó.</p>
<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
</pre>
<p>Bạn cũng có thể dùng bộ khởi tạo object để tạo mảng. Tham khảo <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals.</a></p>
<h3 id="Sử_dụng_hàm_dựng">Sử dụng hàm dựng</h3>
<p>Ngoài ra, bạn có thể tạo một object với hai bước sau đây:</p>
<ol>
<li>Định nghĩa kiểu cho object bằng cách khai báo một hàm dựng. Bạn nên đặt tên hàm với chữ hoa cho ký tự đầu tiên.</li>
<li>Tạo một thực thể của đối tượng với toán tử <code>new</code>.</li>
</ol>
<p>Để định nghĩa một kiểu dữ liệu object, tạo một hàm cho kiểu dữ liệu đó rồi chỉ định tên, những thuộc tính và phương thưc. Ví dụ, giả sử bạn muốn tạo một kiểu dữ liệu cho cars. Bạn đặt tên cho kiểu dữ liệu đó là <code>Car</code>, và bạn muốn nó có những thuộc tính như make, model, và year. Để làm được điểu này, bạn sẽ viết hàm sau:</p>
<pre class="brush: js">function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
</pre>
<p>Lưu ý cách sử dụng <code>this</code> để gán trị giá trị cho những thuộc tính của object dựa vào giá trị được truyền vào cho hàm.</p>
<p>Bây giờ bạn có thể tạo một object tên <code>mycar</code> như sau:</p>
<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);
</pre>
<p>Câu lệnh này tạo <code>mycar</code> gán những giá trị cụ thể cho những thuộc tính của nó. Giá trị của <code>mycar.make</code> là chuỗi "Eagle", <code>mycar.year</code> là số 1993, và tiếp tuc như thế.</p>
<p>Bạn có thể tạo bao nhiêu <code>Car</code> object đều được bằng toán tử <code>new</code>. Như ví dụ sau:</p>
<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992);
var vpgscar = new Car('Mazda', 'Miata', 1990);
</pre>
<p>Một object có thể có một thuộc tính mà giá trị là một object khác. Ví dụ như, giả sử bạn định nghĩa một object tên <code>person</code> như sau:</p>
<pre class="brush: js">function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
</pre>
<p>và sau đó khởi tạo hai object <code>person</code> mới như sau:</p>
<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M');
var ken = new Person('Ken Jones', 39, 'M');
</pre>
<p>Và rồi, bạn có thể viết lại định nghĩa của <code>Car</code> để thêm thuộc tính <code>owner</code> mà nhận giá trị là một đối tượng kiểu <code>person</code>, như sau:</p>
<pre class="brush: js">function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
}
</pre>
<p>Để khởi tạo object mới, bạn viết những câu lệnh sau:</p>
<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
var car2 = new Car('Nissan', '300ZX', 1992, ken);
</pre>
<p>Lưu ý rằng thay vì truyền vào một hằng chuỗi hoặc giá trị số khi tạo những object mới, câu lệnh trên truyền vào những đối tượng <code>rand</code> và <code>ken</code> như là đối số cho <code>owner</code>. Sau đó nếu bạn muốn tìm tên của <code>owner</code> của car2, bạn có thể truy xuất như sau:</p>
<pre class="brush: js">car2.owner.name
</pre>
<p>Lưu ý rằng bạn có thể luôn luôn thêm một thuộc tính mới vào những object đã được tạo ra. Như ví dụ câu lệnh sau:</p>
<pre class="brush: js">car1.color = 'black';
</pre>
<p>thêm vào thuộc tính <code>color</code> cho car1, và gán giá trị cho nó là "black". Tuy nhiên, việc này không ảnh hưởng lên những object khác. Để thêm thuộc tính cho tất cả object của cùng một kiểu, bạn phải thêm thuộc tính đó khi định nghĩa kiểu đối tượng <code>Car</code>.<br>
</p>
<h3 id="Sử_dụng_Object.create">Sử dụng <code>Object.create</code></h3>
<p>Những object có thể được tạo ra bằng phương thức {{jsxref("Object.create()")}}. Phương thức này có thể rất hữu ích, bởi vì nó cho phép bạn chọn prototype cho object bạn muốn tạo ra, mà không cần phải định nghĩa hàm dựng.</p>
<pre class="brush: js">// Animal properties and method encapsulation
var Animal = {
type: 'Invertebrates', // Default value of properties
displayType: function() { // Method which will display type of Animal
console.log(this.type);
}
};
// Create new animal type called animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates
// Create new animal type called Fishes
var fish = Object.create(Animal);
fish.type = 'Fishes';
fish.displayType(); // Output:Fishes</pre>
<h2 id="Sự_Kế_Thừa">Sự Kế Thừa</h2>
<p>Tất cả object trong JavaScript kế thừa từ ít nhất một object khác. Object mà được kế thừa từ nó thì được xem như là prototype, và những thuộc tính được kế thừa có thể được tìm thấy trong đối tượng <code>prototype</code> của hàm dựng. Xem thêm <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a></p>
<h2 id="Đánh_chỉ_mục_thuộc_tính_object">Đánh chỉ mục thuộc tính object</h2>
<p>Bạn có thể tham chiếu tới một object hoặc là bằng tên thuộc tính hoặc là bằng chỉ mục. Nếu bạn định nghĩa thuộc tính bằng tên, thì sau đó bạn phải dùng tên để truy xuất thuộc tính đó, còn nếu bạn định nghĩa thuộc tính bằng chỉ mục (một số), bạn phải dùng chỉ mục để truy xuất.</p>
<p>Giới hạn này áp dụng khi bạn tạo một object và thuộc tính của nó với hàm dựng (như chúng ta đã làm với kiểu <code>Car</code>) và khi bạn định nghĩa những thuộc tính riêng lẻ một cách tường minh (ví dụ như , <code>myCar.color = "red"</code>). Nếu bạn định nghĩa thuộc tính với một chỉ mục, chẳng hạn như <code>myCar[5] = "25 mpg"</code>, thì bạn phải tham chiếu đến thuộc tính đó với chỉ mục <code>myCar[5]</code>.</p>
<p>Ngoại trừ nếu đó là object giống mảng (array-like), ví dụ như những object tạo ra từ HTML như <code>forms</code> object. Bạn có thể tham chiếu đến những object đó bằng cách hoặc là dùng số (dựa vào thứ tự nó xuất hiện trong document) hoặc là tên (nếu được định nghĩa). Ví dụ, nếu thẻ <code><FORM></code> thứ hai trong document có thuộc tính <code>NAME</code> là "myForm", bạn có thể tham chiếu đến form bằng cách <code>document.forms[1]</code> hoặc <code>document.forms["myForm"]</code> hoặc <code>document.forms.myForm</code>.</p>
<h2 id="Định_nghĩa_những_thuộc_tính_cho_kiểu_dữ_liệu_object">Định nghĩa những thuộc tính cho kiểu dữ liệu object</h2>
<p>Bạn có thể thêm một thuộc tính cho một object đã định nghĩa trước đó bằng cách sử dụng thuộc tính <code>prototype</code>. Điều này định nghĩa một thuộc tính mà sẽ được chia sẻ bởi tất các các thuộc tính của cùng kiểu dữ liệu đó, không riêng cho một thực thể nào của kiểu đó. Đoạn mã sau sẽ thêm thuộc tính <code>color</code> cho tất cả các object của kiểu <code>Car</code>, và rồi gán giá trị cho thuộc tính <code>color</code> của object <code>car1</code>.</p>
<pre class="brush: js">Car.prototype.color = null;
car1.color = 'black';
</pre>
<p>Xem thêm <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> của object <code>Function</code> trong <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p>
<h2 id="Định_nghĩa_phương_thức">Định nghĩa phương thức</h2>
<p>Một phương thức là một hàm liên kết với một object, hoặc, có thể nói phương thức là một thuộc tính của object có giá trị là một hàm. Phương thức được định nghĩa giống như cách định nghĩa hàm, ngoài trừ việc chúng phải được gán như là thuộc tính của một object. Xem thêm <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>. Ví dụ:</p>
<pre class="brush: js">objectName.methodname = functionName;
var myObj = {
myMethod: function(params) {
// ...do something
}
// OR THIS WORKS TOO
myOtherMethod(params) {
// ...do something else
}
};
</pre>
<p><code>objectName</code> là một object đã được tạo trước đó, <code>methodname</code> là tên mà bạn đang gán cho phương thức, và <code>functionName</code> là tên của hàm.</p>
<p>Sau đó bạn có thể gọi hàm trong ngữ cảnh của object như sau:</p>
<pre class="brush: js">object.methodname(params);
</pre>
<p>Bạn có thể định nghĩa phương thức của một kiểu object bằng cách thêm định nghĩa phương thức vào trong hàm dựng. Bạn có thể định nghĩa một hàm mà sẽ định dạng và hiển thị những thuộc tính của những đối tượng kiểu <code>Car</code> đã được định nghĩa trước, ví dụ:</p>
<pre class="brush: js">function displayCar() {
var result = 'A Beautiful ' + this.year + ' ' + this.make
+ ' ' + this.model;
pretty_print(result);
}
</pre>
<p>trong đó <code>pretty_print</code> được giả định là một hàm đã được định nghĩa trước để hiển thị đường kẻ ngang và chuỗi kết quả. Lưu ý tham chiếu <code>this</code> đang trỏ đến đối tượng mà phương thức đang gắn trên đó.</p>
<p>Bạn có thể tạo hàm này thành phương thức của lớp <code>Car</code> bằng câu lệnh sau:</p>
<pre class="brush: js">this.displayCar = displayCar;
</pre>
<p>khi định nghĩa kiểu object <code>Car</code>. Cài đặt đầy đủ của <code>Car</code> bây giờ sẽ là:</p>
<pre class="brush: js">function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
this.displayCar = displayCar;
}
</pre>
<p>Rồi sau đó bạn có thể gọi phương thức <code>displayCar</code> trên mỗi đối tượng như sau:</p>
<pre class="brush: js">car1.displayCar();
car2.displayCar();
</pre>
<h2 id="Sử_dụng_this_để_tham_chiếu_đối_tượng">Sử dụng <code>this</code> để tham chiếu đối tượng</h2>
<p>JavaScript có từ khóa đặc biệt, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, mà bạn có thể sử dụng bên trong phương thức để tham chiếu đến object hiện tại. Ví dụ, giả sử bạn có một hàm tên là <code>validate</code> để kiểm tra giá trị của thuộc tính của một object là giá trị cao hay thấp:</p>
<pre class="brush: js">function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival)) {
alert('Invalid Value!');
}
}
</pre>
<p>Sau đó, bên trong hàm handler của event <code>onchange</code> của mỗi phần tử của form bạn có thể gọi hàm <code>validate</code> như ví dụ sau:</p>
<pre class="brush: html"><input type="text" name="age" size="3"
onChange="validate(this, 18, 99)">
</pre>
<p>Nói chúng, <code>this</code> trỏ đến object đang gọi bên trong hàm.</p>
<p>Khi kết hợp với thuộc tính <code>form</code>, <code>this</code> có thể tham chiếu đến form cha của object hiện tại. Trong ví dụ sau, form <code>myForm</code> chứa đối tượng <code>Text</code> và một nút. Khi user nhấp lên cái nút, giá trị của đối tượng <code>Text</code> được gán bằng tên của form. Hàm thực thi của sự kiện <code>onclick</code> của cái nút sử dụng <code>this.form</code> để tham chiếu đến form cha, <code>myForm</code>.</p>
<pre class="brush: html"><form name="myForm">
<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
<p><input name="button1" type="button" value="Show Form Name"
onclick="this.form.text1.value = this.form.name">
</p>
</form></pre>
<h2 id="Định_nghĩa_getters_và_setters">Định nghĩa getters và setters</h2>
<p>Một <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> là một phương thức mà nhận giá trị của một thuộc tính cụ thể. Một <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> là một phương thức thiết lập giá trị cho một thuộc tính cụ thể. Bạn có thể định nghĩa getters và setters cho bất kỳ object nào có thể là do runtime tạo sẵn hoặc do người dùng định nghĩa. Chúng ta dùng cú pháp của object literal để tạo getter và setter.</p>
<p>Đoạn mã sau minh họa cách định nghĩa và thao tác trên getter và setter.</p>
<pre class="brush: js">var o = {
a: 7,
get b() {
return this.a + 1;
},
set c(x) {
this.a = x / 2;
}
};
console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25
</pre>
<p>Những thuộc tính của object <code>o</code> là:</p>
<ul>
<li><code>o.a</code> — một số</li>
<li><code>o.b</code> — một getter trả về kết quả của <code>o.a</code> cộng 1</li>
<li><code>o.c</code> — một setter thiết lập giá trị cho <code>o.a</code> với giá trị là một nửa giá trị của đối số được truyền vào</li>
</ul>
<p>Lưu ý ta dùng hàm để định nghĩa getter và setter, nhưng chúng ta truy xuất nó như một thuộc tính. Để định nghĩa một getter hoặc setter ta dùng cú pháp "[gs]et <em>property</em>()", Hoặc chúng ta một cách khác để định nghĩa getter hoặc setter là dùng <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
Objects/Object/defineProperty">Object.defineProperty</a></code> (hoặc dùng cách cũ với <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p>
<p>Đoạn mã sau minh họa cách dùng getter và setter mở rộng prototype của {{jsxref("Date")}} để thêm thuộc tính <code>year</code> cho tất cả thực thể được tạo ra từ lớp <code>Date</code>. Và dùng phương thức <code>getFullYear</code> and <code>setFullYear</code> để hỗ trợ getter và setter <code>year</code>.</p>
<p>Những câu lệnh sau định nghĩa getter và setter cho thuộc tính <code>year</code>:<br>
</p>
<pre class="brush: js">var d = Date.prototype;
Object.defineProperty(d, 'year', {
get: function() { return this.getFullYear(); },
set: function(y) { this.setFullYear(y); }
});
</pre>
<p>Những câu lệnh sau sử dụng getter và setter trong đối tượng <code>Date</code>:<br>
</p>
<pre class="brush: js">var now = new Date();
console.log(now.year); // 2000
now.year = 2001; // 987617605170
console.log(now);
// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
</pre>
<p>Điều cần ghi nhớ là, getter vad setter có thể:</p>
<ul>
<li>hoặc được định nghĩa bằng cách sứ dụng <a href="#Object_initializers">bộ khởi tạo object</a></li>
<li>hoặc được thêm vào sau đó cho bất kỳ object nào tại bất kỳ thời điểm nào bằng cách sử dụng phương thức tạo getter & setter (Object.defineProperty).</li>
</ul>
<p>Khi tạo getters và settes sử dụng <a href="#Object_initializers">bộ khởi tạo object</a> điều bạn cần làm là đặt từ khóa <code>get</code> trước tên phương thức getter và từ khóa <code>set</code> trước phương thức setter. Tất nhiên là phương thức getter không cần bất kỳ tham số nào, còn phương thức setter cần đúng một tham số. Như ví dụ sau:</p>
<pre class="brush: js">var o = {
a: 7,
get b() { return this.a + 1; },
set c(x) { this.a = x / 2; }
};
</pre>
<p>Getters and setters có thể được thêm vào một object bất kỳ khi nào sau khi được tạo bằng cách dùng phương thức <code>Object.defineProperties</code>. Tham số đầu tiên của phương thức này là object mà bạn muốn định nghĩa getter và setter. Tham số thứ hai là một object mà tên của thuộc tính là tên của getter và setter, giá trị của thuộc tính là object định nghĩa hàm getter và setter. Sau đây là ví dụ minh họa cách định nghĩa getter và setter</p>
<pre class="brush: js">var o = { a: 0 };
Object.defineProperties(o, {
'b': { get: function() { return this.a + 1; } },
'c': { set: function(x) { this.a = x / 2; } }
});
o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.b); // Runs the getter, which yields a + 1 or 6
</pre>
<p>Việc lựa chọn cách nào để định nghĩa getter và setter tùy thuộc vào phong cách lập trình và công việc cụ thể. Nếu bạn luôn dùng bộ khởi tạo object khi định nghĩa một prototype thì bạn nên chọn cách thứ nhất. Cách này đơn giản và tự nhiên. Tuy nhiên, nếu bạn cần thêm getters và setters sau đó — bởi vì bạn không viết prototype hoặc object cụ thể — bạn phải sử dụng cách thứ hai. Cách thứ hai thể hiện tính chất "động" tự nhiên của JavaScript — nhưng nó làm cho code khó đọc và khó hiểu.</p>
<h2 id="Việc_xóa_bỏ_thuộc_tính">Việc xóa bỏ thuộc tính</h2>
<p>Bạn có thể xóa bỏ một thuộc tính không kế thừa bằng toán tử <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Câu lệnh sau chỉ bạn cách để xóa bỏ một thuộc tính.</p>
<pre class="brush: js">// Creates a new object, myobj, with two properties, a and b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;
// Removes the a property, leaving myobj with only the b property.
delete myobj.a;
console.log ('a' in myobj); // yields "false"
</pre>
<p>Bạn cũng có thể dùng <code>delete</code> để xóa bỏ biến toàn cục nếu bạn không dùng từ khóa <code>var</code> khi định nghĩa biến.</p>
<pre class="brush: js">g = 17;
delete g;
</pre>
<h2 id="So_sánh_objects">So sánh objects</h2>
<p>Trong JavaScript những object là kiểu tham chiếu. Hai đối tượng tách biệt không bao giờ bằng nhau, thậm chí nếu chúng có cùng những thuộc tính. Chỉ khi nó so sánh với chính nó thì kết quả mới là true.</p>
<pre class="brush: js">// Two variables, two distinct objects with the same properties
var fruit = {name: 'apple'};
var fruitbear = {name: 'apple'};
fruit == fruitbear; // return false
fruit === fruitbear; // return false</pre>
<pre class="brush: js">// Two variables, a single object
var fruit = {name: 'apple'};
var fruitbear = fruit; // assign fruit object reference to fruitbear
// here fruit and fruitbear are pointing to same object
fruit == fruitbear; // return true
fruit === fruitbear; // return true
</pre>
<pre class="brush: js">fruit.name = 'grape';
console.log(fruitbear); // yields { name: "grape" } instead of { name: "apple" }
</pre>
<p>Chi tiết về toán tử so sánh, xem thêm tại <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>Để hiểu sâu hơn về chủ đề này, bạn có thể đọc thêm <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of javaScript's objects model</a>.</li>
<li>Để học về ECMAScript 2015 classes (cách mới để định nghĩa object) đọc thêm chương <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a>.</li>
</ul>
<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p>
|