Đối tượng trong JavaScript

2. Đối tượng trong JavaScript là gì?

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:

• Tên Sinh viên: name

  Bạn đang đọc: Đối tượng trong JavaScript

• Năm sinh: namSinh

• Giới tính: gioiTinh

• Mã số sinh viên: MSSV

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à:

• hocBai ( )

• xemPhim ( )

• tapTheDuc ( )

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 pháp 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 pháp

TenDoiTuong.phuongThuc_1 = function() {

    / / Danh sách những câu lệnh của phương pháp này

}

TenDoiTuong.phuongThuc_2 = function() {

    / / Danh sách những câu lệnh của phương pháp này

}

TenDoiTuong.phuongThuc_3 = function() {

    / / Danh sách những câu lệnh của phương pháp này

}

TenDoiTuong.phuongThuc_n = function() {

    / / Danh sách những câu lệnh của phương pháp này

}
 

Cách 2 : Sử dụng từ khóa { } và thêm phương pháp thuộc tính lúc khai báo .

let TenDoiTuong = {

    thuocTinh1: giaTri1,

    thuocTinh2: giaTri2,

    thuocTinh3: giaTri3,

    thuocTinh4: giaTri4,

    phuongThuc1: function() {

        / / Danh sách những câu lệnh của phương pháp này

} ,

    phuongThuc2: function() {

        / / Danh sách những câu lệnh của phương pháp này

} ,

    phuongThuc3: function() {

        / / Danh sách những câu lệnh của phương pháp này

} ,

    phuongThucN: function() {

        / / Danh sách những câu lệnh của phương pháp này

} ,

};
 

Cú pháp triển khai như sau :

let TenDoiTuong = {};
 

Sau đó, tất cả chúng ta tạo thuộc tính và phương pháp 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 pháp

TenDoiTuong.phuongThuc1: 

function

() {

    / / Danh sách những câu lệnh của phương pháp này

}

TenDoiTuong.phuongThuc2: function() {

    / / Danh sách những câu lệnh của phương pháp này

}

TenDoiTuong.phuongThuc3: function() {

    / / Danh sách những câu lệnh của phương pháp này

}

TenDoiTuong.phuongThucN: function() {

    / / Danh sách những câu lệnh của phương pháp 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 những bạn sử dụng cách thứ 2 để tạo một đối tượng, chính do nó thống nhất, mạch lạc sẽ dễ quản trị code và debug sau này .

• Không khai báo lại những 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 những thuộc tính

    hoTen: ‘ Ngô Minh Trung ‘,

    gioiTinh: ‘ Nam ‘,

    MSSV: ‘ B1704863 ‘,

    namSinh: ‘ 1999 ‘,

    / / Tạo những phương pháp

    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 pháp 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 tình nhân ‘);

} ;

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.

Source: https://vh2.com.vn
Category : Tin Học