📚 Học JavaScript: Làm Chủ Đối Tượng Từng Bước

Mục Lục

1. Đối Tượng Cơ Bản
2. Truy Cập Thuộc Tính
3. Thêm, Cập Nhật, Xóa
4. Đối Tượng Lồng Nhau
5. this Trong Đối Tượng
6. Phương Thức Trong Đối Tượng
7. Thuộc Tính Ngắn Gọn
8. Thuộc Tính Tính Toán
9. Phân Tích Đối Tượng
10. Spread & Rest
11. Phương Thức Object.keys, Object.values, Object.entries
12. Object.assign
13. Đóng Băng & Niêm Phong Đối Tượng
14. Prototype
15. Kế Thừa

1. Đối Tượng Cơ Bản (01-object-literals.js)

Khái Niệm:

• Đối tượng là tập hợp các cặp khóa-giá trị.
• Khóa = tên thuộc tính, Giá trị = dữ liệu.

Ví Dụ:

const person = {
  name: "Usama",
  age: 25,
  job: "Developer"
};
console.log(person.name); // Usama

Kết Luận:
Đối tượng nhóm dữ liệu liên quan vào một cấu trúc duy nhất.

2. Truy Cập Thuộc Tính (02-Accessing-properties.js)

Khái Niệm: Cách sử dụng dấu chấm và dấu ngoặc.

Ví Dụ:

const car = { brand: "Toyota", model: "Corolla" };
console.log(car.brand);   // Dấu chấm
console.log(car["model"]); // Dấu ngoặc

Kết Luận:
Sử dụng dấu chấm khi biết tên thuộc tính. Sử dụng dấu ngoặc khi thuộc tính là động.

3. Thêm, Cập Nhật, Xóa (03-Adding-updating-removing.js)

Khái Niệm: Đối tượng có thể thay đổi, thuộc tính có thể được thay đổi.

Ví Dụ:

const user = { name: "Ali" };
user.age = 20;         // Thêm
user.name = "Ahmed";   // Cập nhật
delete user.age;       // Xóa

Kết Luận:
Đối tượng rất linh hoạt, nhưng việc thay đổi không kiểm soát có thể gây ra lỗi.

4. Đối Tượng Lồng Nhau (04-Nested-objects.js)

Khái Niệm: Đối tượng bên trong đối tượng.

Ví Dụ:

const student = {
  name: "Sara",
  address: {
    city: "Lahore",
    zip: 54000
  }
};
console.log(student.address.city); // Lahore

Kết Luận:
Truy cập các thuộc tính lồng nhau một cách cẩn thận.

5. this Trong Đối Tượng (05-This-keyword.js)

Khái Niệm: Trong các phương thức của đối tượng, this tham chiếu đến đối tượng.

Ví Dụ:

const person = {
  name: "Ali",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};
person.greet(); // Hello, I am Ali

Kết Luận:
this phụ thuộc vào cách gọi hàm.

6. Phương Thức Trong Đối Tượng (06-Object-mathods.js)

Khái Niệm: Hàm bên trong đối tượng = phương thức.

Ví Dụ:

const calculator = {
  add(a, b) { return a + b; },
  sub(a, b) { return a - b; }
};
console.log(calculator.add(2, 3)); // 5

Kết Luận:
Phương thức là các hành động mà đối tượng có thể thực hiện.

7. Thuộc Tính Ngắn Gọn (07-Shorthand-property.js)

Khái Niệm: Nếu tên khóa và tên biến giống nhau.

Ví Dụ:

let name = "Ali";
let age = 22;

const user = { name, age };
console.log(user); // { name: "Ali", age: 22 }

Kết Luận:
Sử dụng cách viết ngắn gọn giúp đối tượng trở nên gọn gàng hơn.

8. Thuộc Tính Tính Toán (08-Computed-property.js)

Khái Niệm: Sử dụng [] cho tên thuộc tính động.

Ví Dụ:

let key = "role";
const user = {
  name: "Ali",
  [key]: "Admin"
};
console.log(user.role); // Admin

Kết Luận:
Rất hữu ích cho các khóa động.

9. Phân Tích Đối Tượng (09-Object-destructuring.js)

Khái Niệm: Trích xuất giá trị một cách dễ dàng.

Ví Dụ:

const person = { name: "Sara", age: 20 };
const { name, age } = person;
console.log(name, age); // Sara 20

Kết Luận:
Phân tích giúp mã ngắn gọn và sạch sẽ hơn.

10. Spread & Rest (10-Object-SpreadAnsRest.js)

Khái Niệm: Sao chép/gộp đối tượng, rest thu thập phần còn lại.

Ví Dụ:

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; 
console.log(obj2); // { a:1, b:2, c:3 }

const { a, ...rest } = obj2;
console.log(rest); // { b:2, c:3 }

11. Phương Thức Object.keys, Object.values, Object.entries

Khái Niệm: Tiện ích hữu ích cho đối tượng.

Ví Dụ:

const user = { name: "Ali", age: 21 };
console.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["Ali", 21]
console.log(Object.entries(user));// [["name","Ali"],["age",21]]

12. Object.assign

Khái Niệm: Gộp đối tượng hoặc sao chép.

Ví Dụ:

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a:1, b:2 }

13. Đóng Băng & Niêm Phong Đối Tượng

Khái Niệm: Kiểm soát tính khả thi của đối tượng.

Ví Dụ:

const obj = { name: "Ali" };
Object.freeze(obj); // Không thể thêm/xóa/cập nhật

14. Prototype

Khái Niệm: Thuộc tính và phương thức chia sẻ.

Ví Dụ:

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound`);
};

const dog = new Animal("Dog");
dog.speak(); // Dog makes a sound

15. Kế Thừa

Khái Niệm: Một đối tượng kế thừa từ đối tượng khác.

Ví Dụ:

function Vehicle(brand) {
  this.brand = brand;
}
Vehicle.prototype.info = function() {
  console.log(`Brand: ${this.brand}`);
};

function Car(brand, model) {
  Vehicle.call(this, brand);
  this.model = model;
}
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

const car = new Car("Toyota", "Corolla");
car.info(); // Brand: Toyota

💡 Bạn có thể tìm thấy các ví dụ mã đầy đủ cho bài viết này trong kho lưu trữ GitHub của tôi:
👉 javaScript-a-to-z-concept

Thực Hành Tốt Nhất

• Nên sử dụng const cho các đối tượng không thay đổi và let cho các đối tượng có thể thay đổi.
• Sử dụng phương thức để tổ chức mã và tái sử dụng.

Lưu Ý Thường Gặp

• Tránh việc thay đổi đối tượng mà không kiểm soát để tránh lỗi.
• Hãy chắc chắn hiểu cách this hoạt động trong các phương thức.

Mẹo Hiệu Suất

• Tránh lồng nhau quá nhiều đối tượng vì có thể làm giảm hiệu suất.

Khắc Phục Sự Cố

• Nếu không thể truy cập thuộc tính, hãy kiểm tra xem thuộc tính có tồn tại hay không.

Câu Hỏi Thường Gặp

1. Đối tượng là gì?
Đối tượng là tập hợp các cặp khóa-giá trị trong JavaScript, cho phép nhóm dữ liệu liên quan lại với nhau.

2. Làm thế nào để thêm thuộc tính vào đối tượng?
Bạn có thể thêm thuộc tính bằng cách sử dụng dấu chấm hoặc dấu ngoặc.

3. this hoạt động như thế nào?
this tham chiếu đến đối tượng mà phương thức thuộc về, tùy thuộc vào cách gọi hàm.

Kết Luận

Việc hiểu và sử dụng đối tượng trong JavaScript là rất quan trọng. Hãy thực hành và tìm hiểu thêm để nâng cao kỹ năng lập trình của bạn! Hãy tiếp tục khám phá JavaScript và các khía cạnh thú vị khác của nó!