Đối tượng trong JavaScript | JavaScript Object

Trong bài hướng dẫn này, bạn sẽ học cách tạo đối tượng và sử dụng đối tượng trong JavaScript.

Đối tượng là gì?

Tìm hiểu về đối tượng trong JavaScript

JavaScript là một ngôn ngữ dựa trên đối tượng (object-based) và trong JavaScript hầu hết mọi thứ là một đối tượng (object) hoặc hoạt động như một đối tượng.

Vì vậy, để làm việc với JavaScript hiệu quả và hiệu quả, chúng ta cần hiểu cách các đối tượng hoạt động cũng như cách tạo các đối tượng của riêng bạn và sử dụng chúng.

Một đối tượng JavaScript chỉ là một tập hợp các giá trị được đặt tên.

Các giá trị được đặt tên này thường được gọi là các thuộc tính của đối tượng.

Nếu bạn nhớ từ bài Mảng trong JavaScript, một mảng là một tập hợp các giá trị, trong đó mỗi giá trị (value) có một chỉ mục (index hay còn gọi là numeric key) bắt đầu từ 0 và tăng thêm một cho mỗi giá trị.

Một đối tượng cũng tương tự như một mảng, nhưng sự khác biệt là bạn tự xác định các khóa, chẳng hạn như tên, tuổi, giới tính, v.v.

Trong các phần sau chúng ta sẽ được học chi tiết về đối tượng trong JavaScript.

Cách tạo đối tượng trong JavaScript

Một đối tượng trong JavaScript có thể được tạo bằng dấu ngoặc nhọn {} với danh sách các thuộc tính tùy chọn. Thuộc tính là cặp "key: value", trong đó:

+ key (hoặc tên thuộc tính) luôn là một String

+ value (hoặc giá trị thuộc tính) có thể là bất kỳ loại dữ liệu nào, như String, Numbers, Booleans hoặc các loại dữ liệu phức tạp như Mảng, Hàm, và cả các đối tượng khác.

Ngoài ra, các thuộc tính là Hàm thì trong bối cảnh đối tượng: Hàm (function) thường được gọi là Phương thức (method) để phân biệt chúng với các thuộc tính khác.

Một đối tượng JavaScript điển hình có thể trông như thế này:

var hocVien = {
    ten: "Doanh",
    tuoi: 28,
    gioiTinh: "Nam",
    hienThiTen: function() {
        alert(this.ten);
    }
};

Ví dụ trên tạo ra một đối tượng được gọi là hocVien có ba thuộc tính:

+ ten

+ tuoi

+ gioiTinh

+ Và một phương thức hienThiTen(). Phương thức hienThiTen() hiển thị giá trị của this.ten, phân giải thành hocVien.Ten.

Đây là cách dễ nhất và được ưa thích để tạo một đối tượng mới trong JavaScript, được gọi là cú pháp object literals

Tên thuộc tính thường không cần được đặt trong dấu nháy trừ khi chúng là các từ dành riêng hoặc nếu chúng chứa khoảng trắng hoặc ký tự đặc biệt (bất cứ thứ gì ngoài chữ cái, số và ký tự _ và $) hoặc nếu chúng bắt đầu bằng một số, như được hiển thị trong ví dụ sau:

var hocVien = {
    "Tên": "Doanh",
    "Tuổi": 28,
    id: 69
};

Lưu ý: Kể từ ECMAScript 5, các từ dành riêng có thể được sử dụng làm tên thuộc tính của đối tượng mà không cần dấu nháy. Tuy nhiên, bạn nên tránh làm điều này để tương thích tốt hơn với các phiên bản cũ.

Cách truy cập thuộc tính của đối tượng trong JavaScript

Để truy cập hoặc lấy giá trị của một thuộc tính của đối tượng trong JavaScript, bạn có thể sử dụng ký hiệu dấu chấm ( . ) hoặc dấu ngoặc vuông ([ ]), như được minh họa trong ví dụ sau:

var sach = {
    "name": "Cách học JavaScript trong 24h",
    "author": "Anonymous",
    "year": 2020
};

// Sử dụng dấu chấm
document.write(sach.author);  // Kết quả: Anonymous

// Sử dụng ngoặc vuông
document.write(sach["year"]); // Kết quả: 2020

Ký hiệu chấm dễ đọc và viết hơn, nhưng không phải lúc nào cũng được sử dụng.

Nếu tên của thuộc tính không hợp lệ (nghĩa là nếu nó chứa dấu cách hoặc ký tự đặc biệt hoặc tiếng Việt), bạn không thể sử dụng ký hiệu dấu chấm.

Trong trường hợp này bạn sẽ phải sử dụng ký hiệu dấu ngoặc, như trong ví dụ sau:

var sach = {
    name: "Cách học JavaScript trong 24h",
    author: "Anonymous",
    "Năm phát hành": 2020
};

// Sử dụng ngoặc vuông
document.write(sach["Năm phát hành"]); // Kết quả: 2020

Ký hiệu dấu ngoặc vuông mang lại khả năng linh hoạt hơn nhiều so với ký hiệu dấu chấm.

Nó cũng cho phép bạn chỉ định tên thuộc tính dưới dạng biến thay vì chỉ bằng chuỗi ký tự, như trong ví dụ dưới đây:

var sach = {
    name: "Cách học JavaScript trong 24h",
    author: "Anonymous",
    "Năm phát hành": 2020
};

// Sử dụng ngoặc vuông
var key = prompt("Nhập tên thuộc tính cần lấy giá trị:");
alert(sach[key]);

Nếu bạn nhập vào name thì bạn sẽ có kết quả:

Cách học JavaScript trong 24h

Lặp qua các thuộc tính của đối tượng trong JavaScript

Bạn có thể lặp qua các cặp key-value của một đối tượng trong JavaScript bằng vòng lặp for ... in.

Vòng lặp này được tối ưu hóa đặc biệt để lặp qua các thuộc tính của đối tượng. Đây là một ví dụ:

var hocVien = {
    ten: "Doanh",
    tuoi: 28,
    gioiTinh: "Nam"
};

// Lặp qua các thuộc tính của đối tượng
for(var i in hocVien) {  
    document.write(hocVien[i] + "<br>");

Kết quả nhận được là:

Doanh
28
Nam

Thiết lập thuộc tính cho đối tượng trong JavaScript

Tương tự, bạn có thể thiết lập các thuộc tính mới hoặc cập nhật thuộc tính hiện có bằng cách sử dụng ký hiệu dấu chấm (.) hoặc ngoặc ([ ]).

Hãy xem ví dụ sau:

var hocVien = {
    ten: "Doanh",
    tuoi: 28,
    gioiTinh: "Nam"
};

// Thiết lập thuộc tính mới
hocVien.quocGia = "Việt Nam";
document.write(hocVien.quocGia); // Kết quả: United States

hocVien["email"] = "hello@niithanoi.edu.vn";
document.write(hocVien.email); // Kết quả: hello@niithanoi.edu.vn

// Cập nhật thuộc tính đã tồn tại
hocVien.tuoi= 29;
document.write(hocVien.tuoi); // Kết quả: 29

hocVien["ten"] = "Việt";
document.write(hocVien.name); // Kết quả: Việt

Xóa thuộc tính của đối tượng trong JavaScript

Toán tử delete có thể được sử dụng để loại bỏ hoàn toàn các thuộc tính khỏi một đối tượng của JavaScript.

Đây là cách duy nhất để thực sự xóa một thuộc tính khỏi một đối tượng.

Thiết lập thuộc tính thành undefined hoặc null chỉ là thay đổi giá trị của thuộc tính đó. Nó không loại bỏ hoàn toàn thuộc tính khỏi đối tượng.

var hocVien = {
    ten: "Doanh",
    tuoi: 28,
    gioiTinh: "Nam",
    hienThiTen: function() {
        alert(this.ten);
    }
};

// Xóa thuộc tính
delete hocVien.tuoi;
alert(hocVien.tuoi);

Kết quả:

undefined

Lưu ý: Toán tử delete chỉ xóa một thuộc tính đối tượng hoặc phần tử mảng. Nó không có tác dụng đối với các biến hoặc hàm khai báo. Tuy nhiên, bạn nên tránh sử dụng toán tử xóa để xóa một phần tử mảng, vì nó không thay đổi độ dài của mảng, nó chỉ để lại một lỗ hổng trong mảng.

Cách gọi phương thức của đối tượng trong JavaScript

Bạn có thể truy cập phương thức của một đối tượng giống như cách bạn truy cập các thuộc tính, sử dụng ký hiệu dấu chấm hoặc sử dụng ký hiệu dấu ngoặc vuông.

Đây là một ví dụ:

var hocVien = {
    ten: "Doanh",
    tuoi: 28,
    gioiTinh: "Nam",
    hienThiTen: function() {
        alert(this.ten);
    }
};

hocVien.hienThiTen(); // Kết quả: hocVien
hocVien["hienThiTen"](); // Kết quả: hocVien

Thao tác với giá trị bằng tham chiếu

Các đối tượng trong JavaScript là các kiểu tham chiếu.

Có nghĩa là khi bạn tạo các bản sao của các đối tượng, bạn thực sự chỉ sao chép các tham chiếu đến đối tượng đó.

Trong khi đó các giá trị nguyên thủy như Chuỗi và Số được gán hoặc sao chép dưới dạng toàn bộ giá trị.

Để hiểu rõ hơn, hãy xem ví dụ sau:

var xinChao = "Chào bạn!";

var chao = xinChao; // Gán xinChao cho biến mới
chao = "Chào!";

document.write(xinChao);  // Kết quả: Chào bạn!
document.write(chao);  // Kết quả: Chào!

Trong ví dụ trên, chúng ta đã tạo một bản sao của biến xinChao là chao và thay đổi giá trị của bản sao đó.

Kêt quả là hai biến xinChao và chao vẫn khác biệt và riêng biệt.

Nhưng, nếu chúng ta làm điều tương tự với một đối tượng của JavaScript, chúng ta sẽ nhận được một kết quả khác, như bạn thấy trong ví dụ sau:

var hocVien = {
    ten: "Doanh",
    tuoi: 28,
    gioiTinh: "Nam"
};

var user = hocVien; // Gán hocVien cho biến mới
user.ten = "Việt";

document.write(hocVien.ten);  // Kết quả: Việt
document.write(user.ten);  // Kết quả: Việt

Bạn có thể thấy rõ, bất kỳ thay đổi nào được thực hiện cho biến user cũng thay đổi luôn biến hocVien.

Nó xảy ra bởi vì cả hai biến tham chiếu đến cùng một đối tượng.

Vì vậy, sao chép đối tượng không thực sự sao chép nó mà chỉ sao chép tham chiếu đến đối tượng đó.

Bạn đã hiểu hơn về đối tượng trong JavaScript rồi đấy

Nếu bạn mới học lập trình, đây có thể là lần đầu bạn tiếp xúc với đối tượng hoặc đã tiếp xúc qua một số ngôn ngữ khác như Java, PHP.

Nhưng nên nhớ đối tượng trong JavaScript không giống với đối tượng trong các ngôn ngữ khác.

Chúng ta sẽ còn tiếp xúc với đối tượng nhiều hơn ở các bài học sau.