• Trang chủ
• Học JavaScript
• Đối tượng JS

Đối tượng JS

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

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

JavaScript là ngôn ngữ dựa trên đối tượng và trong JavaScript, hầu hết mọi thứ đều là đối tượng hoặc hoạt động như đối tượng. Vì vậy, để làm việc hiệu quả với JavaScript, 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à thuộc tính của đối tượng. Nếu bạn còn nhớ từ chương mảng JavaScript , thì mảng là một tập hợp các giá trị, trong đó mỗi giá trị có một chỉ mục (một khóa số) bắt đầu từ 0 và tăng dần một cho mỗi giá trị. Một đối tượng tương tự như một mảng, nhưng điểm 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ẽ tìm hiểu chi tiết về các đối tượng.

Tạo đối tượng

Một đối tượng có thể được tạo bằng dấu ngoặc nhọn {}với danh sách thuộc tính tùy chọn. Thuộc tính là một cặp "khóa: giá trị", trong đó khóa (hoặc tên thuộc tính - property name) luôn là một chuỗi và giá trị (hoặc giá trị thuộc tính - property value) có thể là bất kỳ loại dữ liệu nào, như chuỗi, số, Boolean hoặc loại dữ liệu phức tạp như mảng, chức năng và các đối tượng khác. Ngoài ra, các thuộc tính có chức năng làm giá trị của chúng thường được gọi là phương thức để 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 person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

Ví dụ trên tạo một đối tượng được gọi personlà có ba thuộc tính name, agevà gendermột phương thức displayName(). Phương thức displayName()hiển thị giá trị của this.name, sẽ phân giải thành person.name. Đây là cách dễ nhất và ưa thích để tạo một đối tượng mới trong JavaScript, được gọi là cú pháp ký tự đối tượng .

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

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

Truy cập thuộc tính của đối tượng

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

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

// Dot notation
document.write(book.author);  // Prints: J. K. Rowling

// Bracket notation
document.write(book["year"]); // Prints: 2000

Ký hiệu dấu chấm dễ đọc và dễ viết hơn, nhưng không phải lúc nào nó 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 chứa dấu cách hoặc ký tự đặc biệt), bạn không thể sử dụng ký hiệu dấu chấm; bạn sẽ phải sử dụng ký hiệu ngoặc, như trong ví dụ sau:

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// Bracket notation
document.write(book["publication date"]); // Prints: 8 July 2000

Ký hiệu dấu ngoặc vuông mang lại sự 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ỉ là chuỗi ký tự, như trong ví dụ bên dưới:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("Enter any property name to get its value");
alert(person[key]); // Outputs: Peter (if enter "name")

Vòng qua các thuộc tính của đối tượng

Bạn có thể lặp qua các cặp khóa-giá trị của một đối tượng bằng cách sử dụ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 person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Iterating over object properties
for(var i in person) {  
    document.write(person[i] + "<br>"); // Prints: name, age and gender
}

Đặt thuộc tính của đối tượng

Tương tự, bạn có thể đặt 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 dấu ngoặc vuông ( []), như minh họa trong ví dụ sau:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Setting a new property
person.country = "United States";
document.write(person.country); // Prints: United States

person["email"] = "peterparker@mail.com";
document.write(person.email); // Prints: peterparker@mail.com

// Updating existing property
person.age = 30;
document.write(person.age); // Prints: 30

person["name"] = "Peter Parker";
document.write(person.name); // Prints: Peter Parker

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

Phép toán 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. Xóa là cách duy nhất để thực sự xóa một thuộc tính khỏi một đối tượng. Đặt thuộc tính thành undefinedhoặc nullchỉ thay đổi giá trị của thuộc tính. Nó không xóa thuộc tính khỏi đối tượng.

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// Deleting property
delete person.age;
alert(person.age); // Outputs: undefined

Gọi phương thức của đối tượng

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 ký hiệu dấu ngoặc vuông. Đây là một ví dụ:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Outputs: Peter
person["displayName"](); // Outputs: Peter

Thao tác theo giá trị so với tham chiếu

Các đối tượng JavaScript là các loại tham chiếu có nghĩa là khi bạn tạo các bản sao của chúng, bạn thực sự chỉ đang 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 về tất cả những điều này, hãy xem ví dụ sau:

var message = "Hello World!";

var greet = message; // Assign message variable to a new variable
greet = "Hi, there!";

document.write(message);  // Prints: Hello World!
document.write(greet);  // Prints: Hi, there!

Trong ví dụ trên, chúng ta đã tạo một bản sao của một biến messagevà thay đổi giá trị của bản sao đó (tức là biến greet). Hai biến 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, chúng ta sẽ nhận được một kết quả khác, như bạn thấy trong ví dụ sau:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var user = person; // Assign person variable to a new variable
user.name = "Harry";

document.write(person.name);  // Prints: Harry
document.write(user.name);  // Prints: Harry

Bạn có thể thấy rõ ràng, bất kỳ thay đổi nào được thực hiện đối với biến usercũng thay đổi biếnperson; nó xảy ra bởi vì cả hai biến đều tham chiếu đến cùng một đối tượng. Vì vậy, chỉ cần sao chép đối tượng không thực sự sao chép nó mà sao chép tham chiếu đến đối tượng đó.