Nội dung
- Tạo một đối tượng - Thuộc tính và phương pháp - Truy cập thuộc tính đối tượng - Thêm và sửa đổi thuộc tính đối tượng - Xóa thuộc tính đối tượng - Vòng qua các thuộc tính đối tượng - Kết luận

Thứ năm, 24/08/2017 | 00:00 GMT+7

Hiểu các đối tượng trong JavaScript

Một đối tượng trong JavaScript là một kiểu dữ liệu bao gồm một tập hợp các tên hoặc khóa và giá trị , được biểu diễn bằng các cặp name: value . Các cặp tên: giá trị có thể bao gồm các thuộc tính có thể chứa bất kỳ kiểu dữ liệu nào - bao gồm chuỗi, số và Boolean - cũng như các phương thức , là các hàm chứa trong một đối tượng.

Các đối tượng trong JavaScript là các thực thể độc lập có thể được ví như các đối tượng trong cuộc sống thực. Ví dụ: một cuốn sách có thể là một đối tượng mà bạn sẽ mô tả theo tên sách, tác giả, số trang và thể loại. Tương tự, một chiếc ô tô có thể là một đối tượng mà bạn sẽ mô tả bằng màu sắc, kiểu dáng, kiểu dáng và mã lực. Mảng JavaScript cũng là một loại đối tượng.

Đối tượng là một khía cạnh không thể thiếu và nền tảng của hầu hết các chương trình JavaScript. Ví dụ: một đối tượng account user có thể chứa các dữ liệu như tên user , password và địa chỉ e-mail. Một trường hợp sử dụng phổ biến khác là giỏ hàng của nền tảng mua sắm trên web có thể bao gồm một mảng nhiều đối tượng chứa tất cả thông tin thích hợp cho từng mặt hàng, chẳng hạn như tên, giá và trọng lượng cho thông tin vận chuyển. Danh sách việc cần làm là một ứng dụng phổ biến khác có thể bao gồm các đối tượng.

Trong hướng dẫn này, ta sẽ xem xét cách tạo một đối tượng, các thuộc tính và phương thức của đối tượng là gì, cũng như cách truy cập, thêm, xóa, sửa đổi và lặp qua các thuộc tính đối tượng.

Tạo một đối tượng

Đối tượng là một kiểu dữ liệu JavaScript , giống như một số hoặc một chuỗi cũng là một kiểu dữ liệu. Là một kiểu dữ liệu, một đối tượng có thể được chứa trong một biến.

Có hai cách để tạo một đối tượng trong JavaScript:

Đối tượng theo nghĩa đen , sử dụng dấu ngoặc nhọn: {}
Hàm tạo đối tượng , sử dụng từ khóa new

Ta có thể tạo một ví dụ đối tượng trống bằng cách sử dụng cả hai phương pháp cho mục đích demo .

Đầu tiên, đối tượng theo nghĩa đen.

// Initialize object literal with curly brackets const objectLiteral = {};

Đối tượng theo nghĩa đen khởi tạo đối tượng bằng dấu ngoặc nhọn.

Trong ví dụ tiếp theo này, ta sẽ sử dụng hàm tạo đối tượng.

// Initialize object constructor with new Object const objectConstructor = new Object();

Cùng một dữ liệu được tạo bằng phương thức khởi tạo new Object() được khởi tạo bằng new Object() .

Cả hai cách tiếp cận này sẽ tạo ra một đối tượng rỗng. Sử dụng các ký tự đối tượng là phương pháp phổ biến hơn và được ưa thích hơn, vì nó ít tiềm ẩn sự mâu thuẫn và kết quả không mong muốn.

Ta có thể tạo một đối tượng ví dụ, chứa trong biến gimli , để mô tả một ký tự.

// Initialize gimli object const gimli = {     name: "Gimli",     race: "dwarf",     weapon: "axe",     greet: function() {         return `Hi, my name is ${this.name}!`;     }, };

Đối tượng mới của ta là gimli , có ba thuộc tính. Mỗi thuộc tính bao gồm một cặp tên: giá trị , còn gọi là cặp khóa: giá trị . weapon là một trong những tên thuộc tính, được liên kết với giá trị thuộc tính "axe" , một chuỗi. Nó có một phương thức, với tên phương thức là greet và giá trị phương thức bao gồm nội dung của hàm.

Trong lời greet , bạn có thể nhận thấy từ khóa this . Khi sử dụng this bên trong của một đối tượng, nó tham chiếu đến đối tượng hiện tại, trong trường hợp này là gimli .

Gửi gimli đến console sẽ in ra toàn bộ đối tượng.

gimli;

Output
{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

Đầu ra này có thể hiển thị khác nhau tùy thuộc vào console bạn đang sử dụng, nhưng bạn nên lưu ý tất cả các giá trị được truyền cho đối tượng đều được hiển thị trong kết quả .

Tiếp theo, ta sẽ xem xét các thuộc tính và phương thức của đối tượng JavaScript.

Thuộc tính và phương pháp

Các đối tượng có thể có thuộc tính và phương thức .

Thuộc tính là sự liên kết giữa tên (khóa) và giá trị trong một đối tượng và nó có thể chứa bất kỳ kiểu dữ liệu nào. Thuộc tính thường đề cập đến đặc tính của một đối tượng.

Phương thức là một hàm là giá trị của thuộc tính đối tượng và do đó là tác vụ mà đối tượng có thể thực hiện.

Một cách dễ dàng để ghi nhớ sự khác biệt giữa thuộc tính đối tượng và phương thức là nghĩ về thuộc tính như một danh từ và phương thức như một động từ. name , race và weapon đều là danh từ liên kết với một đối tượng và là thuộc tính. fight() hoặc talk() là những động từ được dùng như một định nghĩa hàm phương thức.

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

Có hai cách để truy cập thuộc tính của một đối tượng.

Ký hiệu dấu chấm: .
Ký hiệu dấu ngoặc: []

Hãy xem lại đối tượng ví dụ ban đầu của ta , gimli .

const gimli = {     name: "Gimli",     race: "dwarf",     weapon: "axe",     greet: function() {         return `Hi, my name is ${this.name}!`;     }, };

Nếu ta muốn truy xuất giá trị thuộc tính của weapon , ta có thể làm như vậy với ký hiệu dấu chấm đối tượng bằng lệnh tên biến của đối tượng, theo sau là dấu chấm ( . ) Và thuộc tính hoặc tên phương thức.

// Retrieve the value of the weapon property gimli.weapon;

Output
"axe"

gimli.weapon xuất ra giá trị thuộc tính, là "axe" . Ta cũng có thể truy xuất cùng một dữ liệu với ký hiệu dấu ngoặc đối tượng. Tương tự như cách bạn có thể lập index và truy cập một chuỗi , cú pháp cho ký hiệu dấu ngoặc vuông là hai dấu ngoặc vuông ( [] ) bao quanh tên thuộc tính.

// Retrieve the value of the weapon property gimli["weapon"];

Output
"axe"

Cả ký hiệu dấu chấm và ký hiệu dấu ngoặc đều được sử dụng thường xuyên. Ký hiệu dấu chấm nhanh hơn và dễ đọc hơn, nhưng có nhiều hạn chế hơn. Ký hiệu dấu ngoặc cho phép truy cập vào tên thuộc tính được lưu trữ trong một biến và phải được sử dụng nếu thuộc tính của đối tượng chứa bất kỳ loại ký tự đặc biệt nào.

Để truy xuất một phương thức đối tượng, bạn sẽ gọi nó giống như cách bạn gọi một hàm thông thường, chỉ được gắn với biến đối tượng.

gimli.greet();

Output
"Hi, my name is Gimli!"

Trong ví dụ trên, ta thấy rằng giá trị chuỗi cho phương thức đối tượng greet() được trả về.

Bây giờ ta có thể chuyển sang sửa đổi các thuộc tính của đối tượng thông qua việc thêm các cặp tên: giá trị hoặc sửa đổi các thuộc tính hiện có.

Thêm và sửa đổi thuộc tính đối tượng

Để thêm một thuộc tính mới vào một đối tượng, bạn sẽ gán một giá trị mới cho một thuộc tính bằng toán tử gán ( = ).

Ví dụ: ta có thể thêm kiểu dữ liệu số vào đối tượng gimli làm thuộc tính age mới. Cả ký hiệu dấu chấm và dấu ngoặc đều được dùng để thêm thuộc tính đối tượng mới.

// Add new age property to gimli gimli.age = 139;

// Add new age property to gimli gimli["age"] = 139;

Ta có thể truy cập giá trị đó giống như trên, bằng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc.

gimli.age;

Output
139

Một phương thức cũng có thể được thêm vào đối tượng bằng cách sử dụng cùng một quy trình.

// Add new fight method to gimli gimli.fight = function() {     return `Gimli attacks with an ${this.weapon}.`; }

Khi ta đã tạo xong phương thức đối tượng mới này, ta có thể gọi nó như đã làm ở trên.

gimli.fight();

Output
"Gimli attacks with an axe."

Sử dụng cùng một phương pháp, thuộc tính của đối tượng có thể được sửa đổi bằng cách gán một giá trị mới cho thuộc tính hiện có.

// Update weapon from axe to battle axe gimli.weapon = "battle axe";

Đến đây, nếu ta gọi đối tượng, ta sẽ thấy tất cả các bổ sung và sửa đổi của ta .

gimli;

Output
{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

Thông qua thao tác gán, ta có thể sửa đổi các thuộc tính và phương thức của một đối tượng JavaScript.

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

Để xóa một thuộc tính khỏi một đối tượng, bạn sẽ sử dụng từ khóa delete . delete là một toán tử loại bỏ một thuộc tính khỏi một đối tượng.

Trong ví dụ dưới đây, ta sẽ xóa thuộc tính weapon khỏi gimli bằng cách sử dụng delete .

// Remove weapon from gimli delete gimli.weapon;

Output
true

Thao tác delete đánh giá là true nếu thuộc tính đã được xóa thành công hoặc nếu nó được sử dụng trên một thuộc tính không tồn tại.

Ta có thể kiểm tra kết quả của gimli để xem nó có thành công hay không.

gimli;

Output
{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

Trong kết quả ở trên, tên weapon và giá trị liên quan của nó không còn nữa, cho thấy ta đã xóa thuộc tính thành công.

Trong phần tiếp theo, ta sẽ xem xét các cách để lặp qua các đối tượng trong JavaScript.

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

JavaScript có một loại vòng lặp for được tích hợp sẵn dành riêng cho việc lặp lại các thuộc tính của một đối tượng. Điều này được gọi là vòng lặp for...in .

Đây là version đơn giản của ví dụ đối tượng chính của ta , gimli .

const gimli = {     name: "Gimli",     race: "dwarf",     weapon: "battle axe", };

Ta có thể sử dụng for...in để duyệt qua tất cả các thuộc tính của gimli và in chúng ra console . Sử dụng ký hiệu ngoặc, ta có thể truy xuất giá trị thuộc tính dưới dạng một biến, trong trường hợp này là key .

// Iterate through properties of gimli for (let key in gimli) {   console.log(gimli[key]); }

Output
Gimli dwarf battle axe

Ta cũng có thể truy xuất chính tên thuộc tính chỉ bằng cách sử dụng biến thể đầu tiên for...in vòng lặp for...in . Ta đã sử dụng một phương thức chuỗi để chuyển đổi các giá trị khóa thành chữ hoa .

// Get keys and values of gimli properties for (let key in gimli) {   console.log(key.toUpperCase() + ':', gimli[key]); }

Output
NAME: Gimli RACE: dwarf WEAPON: battle axe

Vòng lặp for...in không được nhầm lẫn với vòng lặp for...of , được sử dụng riêng trên kiểu đối tượng Array. Bạn có thể tìm hiểu thêm về cách lặp qua các mảng trong hướng dẫn " Hiểu Mảng trong JavaScript ".

Một phương pháp liệt kê hữu ích khác là phương thức Object.keys() , phương thức này sẽ trả về một mảng các khóa của đối tượng.

// Initialize method on gimli object to return property keys Object.keys(gimli);

Output
["name", "race", "weapon"]

Phương thức này cho phép ta làm việc với các khóa hoặc tên của một đối tượng dưới dạng một mảng, vì vậy bạn có thể tận dụng tất cả các phương thức có sẵn cho mảng JavaScript.

Kết luận

Đối tượng là một tính năng cực kỳ hữu ích và linh hoạt của ngôn ngữ lập trình JavaScript. Chúng là một số khối xây dựng chính của việc viết mã bằng JavaScript và là một cách thực tế để tổ chức dữ liệu và chức năng liên quan. Danh sách việc cần làm, giỏ hàng, account user và vị trí trên sơ đồ web đều là một vài trong số rất nhiều ví dụ về các đối tượng JavaScript trong thế giới thực mà bạn có thể gặp phải.

Trong hướng dẫn này, ta đã tìm hiểu sự khác biệt giữa thuộc tính và phương thức, cách tạo đối tượng và cách thêm, xóa, sửa đổi và lặp qua các thuộc tính đối tượng. Để tìm hiểu thêm về các đối tượng JavaScript, hãy đọc về Làm việc với các đối tượng trên Mạng nhà phát triển Mozilla.

Tags:

Các tin liên quan

Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại
2017-08-15
Cách chuyển đổi kiểu dữ liệu trong JavaScript
2017-08-15
Cách sử dụng các phương thức mảng trong JavaScript: Phương thức Accessor
2017-08-14
Cách sử dụng phương thức mảng trong JavaScript: Phương thức đột biến
2017-08-10
Cách viết chương trình JavaScript đầu tiên của bạn
2017-08-02
Hiểu mảng trong JavaScript
2017-07-28
Làm thế nào để làm toán trong JavaScript với các toán tử
2017-07-20
Cách lập chỉ mục, tách và thao tác chuỗi trong JavaScript
2017-07-14
Object.values và Object.entries trong JavaScript
2017-07-12
Cách làm việc với chuỗi trong JavaScript
2017-07-11