Tổng quan về đối tượng (object) trong JavaScript
1. Đối tượng là gì?
– Đối tượng (object) là một vật thể trong thế giới thực có các thuộc tính properties (là các đặc điểm) và các phương thức methods (là các hành động, hoạt động).
– Chẳng hạn, chúng ta có đối tượng xe hơi car. Các thuộc tính có thể là hãng xe, tên xe, trọng lượng, màu sắc,… còn các phương thức như chạy, phanh, dừng,…
Đối tượng | Các thuộc tính | Các phương thức |
---|---|---|
car.brand= Toyota car.name = Prius 2018 car.weight = 850kg car.color = White |
car.start() car.brake() car.stop() |
– Tất cả các xe có cùng các thuộc tính (như tên xe, màu sắc,…), nhưng các giá trị đặc trưng của từng xe là khác nhau, chẳng hạn như xe thì có nhiều loại như xe BMW, Ferarri,… và màu sắc cũng có nhiều màu,…
– Mỗi chiếc xe cũng có các phương thức giống nhau, nhưng cách mỗi xe hoạt động chạy, phanh,… ở mỗi thời điểm là khác nhau.
2. Biến và biến object trong JavaScript
– Trong JavaScript, hầu như “mọi thứ” đều là object:
- Booleans có thể là objects (nếu được định nghĩa với từ khóa new).
- Numbers có thể là objects (nếu được định nghĩa với từ khóa new).
- Strings có thể là objects (nếu được định nghĩa với từ khóa new).
- Dates luôn luôn là objects.
- Maths luôn luôn là objects.
- Regular expressions luôn luôn là objects.
- Arrays luôn luôn là objects.
- Functions luôn luôn là objects.
- Objects luôn luôn là objects.
– Tất cả các giá trị JavaScript là các đối tượng (ngoại trừ giá trị nguyên thủy (primitive value), vì nó không có các thuộc tính (properties) và phương thức (methods)).
– Kiểu dữ liệu nguyên thủy (primitive data type) là dữ liệu có giá trị nguyên thủy (primitive value). JavaScript có 5 loại kiểu dữ liệu nguyên thủy:
- string
- number
- boolean
- null
- undefined
– Các giá trị nguyên thủy (primitive value) là không thể thay đổi được.
Nếu x = 2018 thì bạn có thể thay đổi giá trị của x, nhưng không thể thay đổi giá trị của 2018.
Giá trị | Loại | Chú thích |
“Hello” | string | “Hello” thì luôn luôn là “Hello” |
3.14 | number | 3.14 thì luôn luôn là 3.14 |
true | boolean | true thì luôn luôn là true |
false | boolean | false thì luôn luôn là false |
null | null | null thì luôn luôn là null |
undefined | undefined | undefined thì luôn luôn là undefined |
3. Giá trị của biến object trong JavaScript
– Biến JavaScript có thể chứa một giá trị đơn lẻ (simple value).
Ví dụ sau gán một giá trị đơn (Toyota) cho một biến có tên là xe hơi (car):
– Và object cũng là một biến. Nhưng một biến object có thể chứa nhiều giá trị.
Ví dụ sau gán nhiều giá trị (Toyota, Prius 2018, White) cho một biến có tên là xe hơi (car).
– Các giá trị được viết thành từng cặp tên:giá trị (name:value, name và value được phân tách nhau bằng dấu hai chấm).
– Giá trị của biến object được viết dưới dạng từng cặp name:value, tương tự như:
- Associative arrays trong PHP.
- Dictionaries trong C#, Python.
- Hash tables trong C.
- Hash maps trong Java.
- Hashes trong Ruby and Perl.
Với từng cặp name:value thì các name đóng vai trò như là các thuộc tính (properties) hoặc là các phương thức (methods) của một biến đối tượng (object) JavaScript.
– Các phương thức (methods) là các hành động có thể được thực hiện trên các đối tượng. Một object method là một object property có chứa một định nghĩa hàm.
– Các object properties có thể là các giá trị nguyên thủy (primitive values), các objects khác và các functions.
Thuộc tính (name) | Giá trị (value) |
brand | Toyota |
name | Prius 2018 |
color | White |
fullName | function() {return this.brand + ” ” + this.name;} |
Xem thêm: Từ khóa this trong JavaScript.
4. Object JavaScript là kiểu tham chiếu
– Các object JavaScript là kiểu tham chiếu (reference), không phải là tham trị (value).
– Nếu “car” là một object, thì câu lệnh gán sau sẽ không tạo ra một bản sao của object “car”, mà lúc này biến “x” cũng tham chiếu đến cùng một địa chỉ của object “car”.
– Chính vì object “x” không phải là một bản copy của object “car”, nên cả “x” và “car” đều là cùng một đối tượng, cùng tham chiếu đến cùng một địa chỉ.
– Do đó, bất kỳ thay đổi nào của “x” cũng làm thay đổi “car”:
Ví dụ:
[code language=”javascript”]var car = {brand:"Toyota", name:"Prius 2018", weight:850, color:"White"}var x = car;
x.color = "Red"; // Điều này sẽ thay đổi cả x.color và car.color[/code]
Try it »
Nếu hai objects cùng trỏ đến cùng một object (cùng tham chiếu đến cùng một địa chỉ), khi một object có sự thay đổi thì cũng làm thay đổi tương ứng cho object kia.