Trong Javascript (hay nhiều ngôn ngữ lập trình khác), đối tượng là các thực thể được mô hình hóa từ thế giới thực, chuyển đổi vào trong các chương trình.
JavaScript cung cấp sẵn một số đối tượng như Date, Number, Boolean,….
Ngoài ra, bạn có thể tự mình tạo ra các đối tượng khác tùy theo yêu cầu của ứng dụng.
Đối tượng, về cơ bản sẽ có tên, thuộc tính (tương ứng với thông tin) và phương thức (hành động).
2.1. Thuộc tính của đối tượng
Thuộc tính là những đặc điểm (trong lập trình có thể hiểu là các biến) cần lưu trữ trong một đối tượng. Ví dụ với đối tượng SinhVien thì có một số thuộc tính sau:
2.2. Phương thức của đối tượng
Phương thức là những hành động (có thể hiểu là hàm) của đối tượng.
Ví dụ trong đối tượng SinhVien thì mình cần hai phương thức là:
Trong lập trình hướng đối tượng thì chúng ta gọi những hành động này là Phương thức, còn trong lập trình hướng thủ tục thì chúng ta gọi nó là hàm (Bạn cũng sẽ được học sau).
Nói chung chúng là giống nhau chỉ là một cái thuộc về đối tượng cụ thể, còn cái kia thì không.
2.3. Cách khai báo và khởi tạo đối tượng trong JavaScript
Nếu bạn đã học qua về một ngôn ngữ lập trình hướng đối tượng khác thì những khái niệm này có lẽ rất đơn giản. Nhưng nếu bạn chưa từng thì hãy chú ý một chút nhé.
Số lượng thuộc tính và phương thức của một đối tượng là tùy ý và tùy thuộc vào đối tượng bạn muốn tạo.
Có nghĩa là không quy định một đối tượng phải có bao nhiêu thuộc tính hay phương thức.
Bên dưới đây mình sẽ giới thiệu cho bạn 3 cách khai báo một đối tượng trong JavaScript:
Cách 1: Khai báo đơn giản sử dụng từ khóa: new Object()
Cú pháp khởi tạo đối tượng:
var TenDoiTuong = new Object();
Đây là cách tạo thuộc tính và phương thức cho đối tượng:
// Khởi tạo thuộc tính
TenDoiTuong.thuocTinh_1 = giaTri1;
TenDoiTuong.thuocTinh_2 = giaTri2;
TenDoiTuong.thuocTinh_3 = giaTri3;
TenDoiTuong.thuocTinh_n = giaTri4;
//Khởi tạo phương thức
TenDoiTuong.phuongThuc_1 = function() {
// Danh sách các câu lệnh của phương thức này
}
TenDoiTuong.phuongThuc_2 = function() {
// Danh sách các câu lệnh của phương thức này
}
TenDoiTuong.phuongThuc_3 = function() {
// Danh sách các câu lệnh của phương thức này
}
TenDoiTuong.phuongThuc_n = function() {
// Danh sách các câu lệnh của phương thức này
}
Cách 2: Sử dụng từ khóa {} và thêm phương thức thuộc tính lúc khai báo.
let TenDoiTuong = {
thuocTinh1: giaTri1,
thuocTinh2: giaTri2,
thuocTinh3: giaTri3,
thuocTinh4: giaTri4,
phuongThuc1: function() {
//Danh sách các câu lệnh của phương thức này
},
phuongThuc2: function() {
//Danh sách các câu lệnh của phương thức này
},
phuongThuc3: function() {
//Danh sách các câu lệnh của phương thức này
},
phuongThucN: function() {
//Danh sách các câu lệnh của phương thức này
},
};
Cách 3: Sử dụng ký hiệu {}, sau đó thì thêm thuộc tính và phương thức
Cú pháp thực hiện như sau:
let TenDoiTuong = {};
Sau đó, chúng ta tạo thuộc tính và phương thức cho đối tượng như thế này:
// Khởi tạo thuộc tính
TenDoiTuong.thuocTinh1 = giaTri1;
TenDoiTuong.thuocTinh2 = giaTri2;
TenDoiTuong.thuocTinh3 = giaTri3;
TenDoiTuong.thuocTinhN = giaTriN;
// Khởi tạo phương thức
TenDoiTuong.phuongThuc1: function() {
// Danh sách các câu lệnh của phương thức này
}
TenDoiTuong.phuongThuc2: function() {
// Danh sách các câu lệnh của phương thức này
}
TenDoiTuong.phuongThuc3: function() {
// Danh sách các câu lệnh của phương thức này
}
TenDoiTuong.phuongThucN: function() {
// Danh sách các câu lệnh của phương thức này
}
Trong đó:
-
TenDoiTuong: Là tên của đối tượng
-
thuocTinh1, thuocTinh2, …. Là tên các thuộc tính
-
giaTri1, giaTri2: Là các giá trị của các thuộc tính
-
phuongThuc1, phuongThuc2, …: Là tên các phương thức. Mõi phương thức là một hàm (bạn sẽ được học ở bài hàm).
Lưu ý:
-
Trong ba cách trên thì mình khuyến khích các bạn sử dụng cách thứ 2 để tạo một đối tượng, bởi vì nó thống nhất, mạch lạc sẽ dễ quản lý code và debug sau này.
-
Không khai báo lại các Object đã có sẵn trong JavaScript như Strings, Numbers, Booleans, …
Ví dụ: Khai báo một đối tượng sinh viên
let SinhVien = {
// Tạo các thuộc tính
hoTen: 'Ngô Minh Trung',
gioiTinh: 'Nam',
MSSV: 'B1704863',
namSinh: '1999',
// Tạo các phương thức
hocBai: function() {
console.log('Đang học bài...');
},
diNgu: function() {
console.log('Đang ngủ...');
},
xemPhim: function() {
console.log('Đang xem phim...');
}
}
2.4. Truy cập đến thuộc tính và phương thức
Khi chúng ta đã tạo được đối tượng thì có thể sử dụng nó.
Và để sử dụng thì cần truy cập đến các thuộc tính, phương thức của nó. Cách làm như sau:
Truy cập đến thuộc tính của đối tượng:
TenDoiTuong.thuocTinh;
Hoặc:
TenDoiTuong['thuocTinh'];
Truy cập đến phương thức của đối tượng:
TenDoiTuong.phuongThuc();
Ví dụ: Mình đã tạo một đối tượng ở trên là SinhVien, bây giờ, mình sẽ truy cập đến thuộc tính và phương thức của nó.
// Truy cập thuộc tính của đối tượng SinhVien
console.log(SinhVien.hoTen);
console.log(SinhVien.namSinh);
// Truy cập phương thức của đối tượng SinhVien
SinhVien.diNgu();
Note: Mình đã sử dụng phương thức console.log() để in thông tin thuộc tính ra màn hình console.
Kết quả nhận được là:
Ngô Minh Trung
1999
Đang ngủ...
Ngoài việc truy cập thuộc tính và phương thức ra, bạn còn có thể chỉnh sửa chúng.
Chỉnh sửa thuộc tính:
SinhVien.namSinh = 1995;
console.log(SinhVien.namSinh);
Kết quả:
1995
Chỉnh sửa phương thức:
SinhVien.diNgu = function () {
console.log('Đi ngủ với người yêu');
};
SinhVien.diNgu();
Kết quả:
Đi ngủ với người yêu
Cách làm này sẽ trực tiếp thay đổi phương thức của đối tượng (Bạn có thể hiểu cách làm trên là chúng ta vừa thêm một phương thức mới với tên giống như phương thức cũ)
Còn có nhiều cách làm khác.
Nhưng cứ để mọi thứ đơn giản đã. Sau này bạn sẽ được tìm hiểu sâu thêm về đối tượng trong JavaScript.