Đối tượng JavaScript
Đối tượng, thuộc tính và phương thức trong đời thực
Trong cuộc sống thực, một chiếc xe hơi là một đồ vật .
Một chiếc ô tô có các đặc tính như trọng lượng, màu sắc và các phương pháp như khởi động và dừng:
| Sự vật | Tính chất | Phương pháp |
|---|---|---|
|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start () car.drive () car.brake () car.stop () |
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 .
Đối tượng JavaScript
Bạn đã biết rằng các biến JavaScript là vùng chứa các giá trị dữ liệu.
Mã này chỉ định một giá trị đơn giản (Fiat) cho một biến có tên là ô tô:
let car = "Fiat";
Đối tượng cũng là biến. Nhưng các đối tượng có thể chứa nhiều giá trị.
Mã này chỉ định nhiều giá trị (Fiat, 500, màu trắng) cho một biến có tên là ô tô:
const car = {type:"Fiat", model:"500", color:"white"};
Các giá trị được viết dưới dạng cặp name: value (tên và giá trị được phân tách bằng dấu hai chấm).
Một thực tế phổ biến là khai báo các đối tượng với từ khóa const .
Tìm hiểu thêm về cách sử dụng const với các đối tượng trong chương: JS Const .
Định nghĩa đối tượng
Bạn xác định (và tạo) một đối tượng JavaScript với một đối tượng theo nghĩa đen:
Thí dụ
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Dấu cách và ngắt dòng không quan trọng. Một định nghĩa đối tượng có thể kéo dài nhiều dòng:
Thí dụ
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Thuộc tính đối tượng
Các cặp tên: giá trị trong các đối tượng JavaScript được gọi là thuộc tính :
| Bất động sản | Giá trị tài sản |
|---|---|
| họ | John |
| họ | Doe |
| già đi | 50 |
| màu mắt | màu xanh lam |
Truy cập thuộc tính đối tượng
Bạn có thể truy cập thuộc tính đối tượng theo hai cách:
objectName.propertyName
hoặc là
objectName["propertyName"]
Ví dụ 1
person.lastName;
Ví dụ2
person["lastName"];
Các đối tượng JavaScript là vùng chứa cho các giá trị được đặt tên được gọi là thuộc tính.
Phương thức đối tượng
Các đối tượng cũng có thể có các phương thức .
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 .
| Bất động sản | Giá trị tài sản |
|---|---|
| họ | John |
| họ | Doe |
| già đi | 50 |
| màu mắt | màu xanh lam |
| Họ và tên | function () {return this.firstName + "" + this.lastName;} |
Phương thức là một hàm được lưu trữ dưới dạng thuộc tính.
Thí dụ
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Từ khóa này
Trong một định nghĩa hàm, thisđề cập đến "chủ sở hữu" của hàm.
Trong ví dụ trên, thislà đối tượng person "sở hữu"
fullNamehàm.
Nói cách khác, this.firstNamecó nghĩa là firstNametài sản của đối tượng này .
Đọc thêm về thistừ khóa tại JS Từ khóa này .
Truy cập các phương thức đối tượng
Bạn truy cập vào một phương thức đối tượng với cú pháp sau:
objectName.methodName()
Thí dụ
name = person.fullName();
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 :
Thí dụ
name = person.fullName;
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 được tạo dưới dạng một đối tượng:
x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
Tránh String, Numbervà Booleancác đối tượng. Chúng làm phức tạp mã của bạn và làm chậm tốc độ thực thi.
Bạn sẽ tìm hiểu thêm về các đối tượng ở phần sau của hướng dẫn này.