Đối tượng trong JavaScript và những điều bạn cần biết

Đối tượng trong JavaScript là gì ?
Trong thế giới lập trình, JavaScript được xem là một trong những ngôn ngữ quan trọng nhất và phổ biến nhất hiện nay. Với khả năng tương tác với trình duyệt web, JavaScript cho phép chúng ta xây dựng các ứng dụng web động, tương tác và hấp dẫn. Một khái niệm quan trọng trong JavaScript là đối tượng (object). Đối tượng trong JavaScript giúp chúng ta tổ chức mã và tương tác với dữ liệu một cách linh hoạt.

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

 

Trong JavaScript, đối tượng (object) là một thực thể có thuộc tính (properties) và phương thức (methods). Đối tượng có thể được tạo ra từ một lớp (class) hoặc từ một đối tượng khác.
Mỗi thuộc tính của đối tượng được định nghĩa bởi một cặp key-value, trong đó key là một chuỗi (hoặc symbol) và value có thể là một giá trị bất kỳ, bao gồm cả các đối tượng khác. Phương thức là các hàm được gắn liền với đối tượng và có thể được gọi để thực hiện các hoạt động hoặc tính toán trên đối tượng đó.
Ví dụ, bạn có thể tạo một đối tượng người (person) với các thuộc tính như tên, tuổi, địa chỉ và các phương thức như nói chuyện, di chuyển:
  1. var person = {
  2.     name: "John",
  3.     age: 30,
  4.     address: "123 Main Street",
  5.     speak: function() {
  6.         console.log("Hello, my name is " + this.name);
  7.     },
  8.     move: function(distance) {
  9.          console.log(this.name + " moved " + distance + " meters.");
  10.     }
  11. };
Sau đó, bạn có thể truy cập các thuộc tính và gọi các phương thức của đối tượng như sau:
  1. console.log(person.name); // Output: John
  2. person.speak(); // Output: Hello, my name is John
  3. person.move(10); // Output: John moved 10 meters.
Đối tượng là một khái niệm quan trọng trong JavaScript và đóng vai trò chủ đạo trong cách xây dựng và sử dụng các thành phần trong ngôn ngữ này.

Thuộc tính/phương thức của đối tượng trong JavaScript

Trong JavaScript, một đối tượng có thể có các thuộc tính và phương thức. Các thuộc tính là các giá trị được liên kết với đối tượng, trong khi các phương thức là các hàm được gắn liền với đối tượng. Dưới đây là một số ví dụ về thuộc tính và phương thức của đối tượng trong JavaScript:

Thuộc tính

(Properties):
  1. Thuộc tính có giá trị nguyên thủy (primitive values):
  1. var person = {
  2. name: "John",
  3. age: 30,
  4. address: "123 Main Street"
  5. };
  6. console.log(person.name); // Output: Johnconsole.log(person.age); // Output: 30
  1. Thuộc tính có giá trị đối tượng (object values):
  1. var person = {
  2.     name: {
  3.         first: "John",
  4.         last: "Doe"
  5.     },
  6.     age: 30,
  7.     address: {
  8.         street: "123 Main Street",
  9.         city: "New York"
  10.     }
  11. };
  12. console.log(person.name.first); // Output: Johnconsole.log(person.address.city); // Output: New York

Phương thức

(Methods):
  1. Định nghĩa phương thức bằng cú pháp hàm thông thường:
  1. var person = {
  2.     name: "John",
  3.     age: 30,
  4.     sayHello: function() {
  5.         console.log("Hello, my name is " + this.name);
  6.     }
  7. };
  8. person.sayHello(); // Output: Hello, my name is John
  1. Định nghĩa phương thức bằng cú pháp viết tắt (arrow function):
  1. var person = {
  2.    name: "John",
  3.    age: 30,
  4.    sayHello: () => {
  5.        console.log("Hello, my name is " + this.name); // Arrow function không bind "this" của đối tượng
  6.    }
  7. };
  8. person.sayHello(); // Output: Hello, my name is undefined
  1. Định nghĩa phương thức bên ngoài đối tượng và gắn vào đối tượng:
  1. var person = {
  2.    name: "John",
  3.    age: 30
  4. };
  5. function sayHello() {
  6.     console.log("Hello, my name is " + this.name);
  7. }
  8. person.sayHello = sayHello;
  9. person.sayHello(); // Output: Hello, my name is John
Trên đây chỉ là một số ví dụ đơn giản về thuộc tính và phương thức của đối tượng trong JavaScript. Trên thực tế, bạn có thể định nghĩa và sử dụng các thuộc tính và phương thức theo nhiều cách khác nhau tuỳ thuộc vào yêu cầu của ứng dụng.

Thao tác với thuộc tính và phương thức của object trong JavaScript

Để thao tác với thuộc tính và phương thức của một đối tượng trong JavaScript, bạn có thể sử dụng các phép gán, truy cập, xóa và gọi tương ứng. Dưới đây là cách thực hiện các thao tác đó:

Gán giá trị cho thuộc tính

  • Sử dụng phép gán (=) để gán giá trị cho thuộc tính của đối tượng.
  • Ví dụ: person.name = "John";

Lấy giá trị của thuộc tính

  • Sử dụng toán tử truy cập (.) hoặc toán tử truy cập theo chuỗi ([]) để truy cập và lấy giá trị của thuộc tính.
  • Ví dụ: console.log(person.name);

Xóa thuộc tính

  • Sử dụng toán tử delete để xóa một thuộc tính của đối tượng.
  • Ví dụ: delete person.name;

Gọi phương thức

  • Sử dụng toán tử truy cập (.) hoặc toán tử truy cập theo chuỗi ([]) để truy cập và gọi phương thức của đối tượng.
  • Ví dụ: person.sayHello();
Dưới đây là một ví dụ minh họa sử dụng các thao tác trên với một đối tượng person:
  1. var person = {
  2.     name: "John",
  3.     age: 30,
  4.     sayHello: function() {
  5.         console.log("Hello, my name is " + this.name);
  6.    }
  7. };
  8. console.log(person.name); // Output: John
  9. person.name = "Jane";
  10. console.log(person.name); // Output: Janedelete person.age;
  11. console.log(person.age); // Output: undefined
  12. person.sayHello(); // Output: Hello, my name is Jane
Trên đây là cách thực hiện các thao tác cơ bản với thuộc tính và phương thức của đối tượng trong JavaScript. Bạn có thể áp dụng các phép toán này để tùy chỉnh và tương tác với đối tượng theo nhu cầu của bạn.

Lặp qua từng phần tử của đối tượng trong JavaScript

Trong JavaScript, để lặp qua từng phần tử của một đối tượng (object), bạn có thể sử dụng các cấu trúc lặp như for...in hoặc sử dụng các phương thức như Object.keys() hoặc Object.entries(). Dưới đây là cách thực hiện lặp qua từng phần tử của đối tượng trong JavaScript:
  1. Sử dụng vòng lặp for...in:
  1. var person = {
  2.     name: "John",
  3.     age: 30,
  4.     address: "123 Main Street"
  5. };
  6. for (var key in person) {
  7.    if (person.hasOwnProperty(key)) {
  8.      var value = person[key];
  9.      console.log(key + ": " + value);
  10.    }
  11. }
Kết quả:
  1. name: Johnage: 30address: 123 Main Street
Lưu ý: Trong vòng lặp for...in, bạn nên sử dụng hasOwnProperty() để đảm bảo chỉ lặp qua các thuộc tính trực tiếp của đối tượng, không lặp qua các thuộc tính được kế thừa từ các lớp cha.
  1. Sử dụng phương thức Object.keys() để lặp qua các thuộc tính của đối tượng:
  1. var person = {
  2.     name: "John",
  3.     age: 30,
  4.     address: "123 Main Street"
  5. };
  6. Object.keys(person).forEach(function(key) {
  7.     var value = person[key];
  8.     console.log(key + ": " + value);
  9. });
Kết quả:
  1. name: Johnage: 30address: 123 Main Street
  1. Sử dụng phương thức Object.entries() để lặp qua các cặp key-value của đối tượng:
  • var person = {
  •    name: "John",
  •    age: 30,
  •    address: "123 Main Street"
  • };
  • Object.entries(person).forEach(function([key, value]) {
  •     console.log(key + ": " + value);
  • });
Kết quả:
  1. name: Johnage: 30address: 123 Main Street
Lưu ý: Object.entries() trả về một mảng chứa các cặp key-value của đối tượng. Sử dụng destructuring để truy cập key và value trong từng cặp.
Đây là các phương pháp phổ biến để lặp qua từng phần tử của đối tượng trong JavaScript. Tùy thuộc vào yêu cầu và ngữ cảnh của ứng dụng, bạn có thể chọn phương pháp phù hợp để thực hiện lặp qua đối tượng.

Lời kết

Trên đây là những thông tin cơ bản về đối tượng trong JavaScript và cách thao tác với thuộc tính và phương thức của đối tượng. JavaScript là một ngôn ngữ mạnh mẽ cho phát triển ứng dụng web và ứng dụng di động, và hiểu rõ về cách làm việc với đối tượng là rất quan trọng.
Khi làm việc với JavaScript, bạn có thể tạo ra các đối tượng và sử dụng chúng để tổ chức mã của mình và thực hiện các hoạt động phù hợp. Bạn có thể thêm, sửa đổi và xóa các thuộc tính của đối tượng, cũng như gọi các phương thức để thực hiện các hành động trên đối tượng đó.
Hãy tiếp tục khám phá và thực hành với JavaScript để trở thành một nhà phát triển thành thạo. Chúc các bạn thành công.
Đọc thêm  Symfony là gì? Hướng dẫn cách cài đặt và cấu hình Symfony đơn giản

Tags :

Chia sẻ ngay :

0 0 đánh giá
Article Rating
Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Bài viết liên quan

Bảng Giá Thiết Kế Website Thương Hiệu Cho Doanh Nghiệp
Dịch vụ thiết kế website thương hiệu cho doanh nghiệp tại WEBBOX là một hành trình mang tính chiến lược,...
Set trong Java
Set trong Java là gì? Tất tần tật kiến thức về Set trong Java
Trong lĩnh vực lập trình chắc hẳn các bạn đã từng nghe về Set trong Java, Set là một cấu trúc dữ liệu...
0
Rất thích suy nghĩ của bạn, hãy bình luận.x

Tư vấn giải pháp website tốt nhất cho doanh nghiệp

Chúng tôi luôn sẵn sàng lắng nghe và đưa ra giải pháp phù hợp nhất cho vấn đề của bạn.