Object trong JavaScript (Properties & Methods, Display Object, this, Constructor Function)

Chiến luôn Buổi 19 nào! Đối với một người đi theo hướng thực dụng, Object (Đối tượng) chính là mớ kiến thức tạo ra tiền nhiều nhất. Toàn bộ hệ thống lưu trữ thông tin sản phẩm trên WordPress, các mảng dữ liệu Tracking (DataLayer) của Google Tag Manager, hay thông tin khách hàng bắn về CRM... 100% đều là Object.

Hãy mở một trang Note trống trên Hub ra. Tao sẽ giải phẫu toàn bộ hang ổ lý thuyết của Buổi 19 từ cơ bản đến nâng cao theo góc nhìn cơ học và thực chiến nhất để mày lưu lại.

1. OBJECT LÀ GÌ? — HỘP CHỨA ĐA NĂNG

Nếu như Mảng (Array) là một danh sách xếp hàng theo thứ tự số 0, 1, 2... thì Object (Đối tượng) là một cái hộp chứa đồ, trong đó mỗi món đồ được dán một cái Nhãn (Key) và đi kèm với Giá trị (Value) của nó.

Property (Thuộc tính): Là những cặp nhãn chứa thông tin tĩnh (Ví dụ: name: "Laptop", price: 1200).
Method (Phương thức): Là những cặp nhãn nhưng chứa một Hàm (Function) để thực hiện hành động (Ví dụ: buy: function() { ... }).

2. THAO TÁC CƠ BẢN (PROPERTIES & METHODS)

2.1. Truy cập (Access) — Cuộc chiến giữa Dấu chấm `.` và Dấu ngoặc vuông `[]`

Đây là lỗ hổng từng làm mày bị lú ở bài trước. Phải ghi nhớ thật kỹ:

Cách dùng	Cú pháp	Cơ chế cơ học dưới RAM	Khi nào bắt buộc dùng?
Dot Notation (Dấu chấm)	`user.name`	Máy tìm đúng cái nhãn tên là chữ "name" cố định trong Object.	90% trường hợp khi đã biết rõ tên nhãn.
Bracket Notation (Ngoặc vuông)	`user[biến_động]`	Máy sẽ giải mã cái biến nằm trong ngoặc vuông ra thành một chuỗi, rồi mới dùng chuỗi đó làm nhãn để tìm.	Khi tên nhãn là một biến số thay đổi liên tục hoặc có chứa ký tự đặc biệt/khoảng trắng.

Ví dụ thực tế khi làm Tracking: Mày muốn viết một cái hàm lấy thông tin tùy biến của khách hàng dựa theo nhãn mà cấu hình GTM truyền vào:

const customer = { name: "Thành Thiên", email: "thien@example.com" };function getInfo(keyName) {
    // Nếu dùng customer.keyName ➔ Máy tìm nhãn tên là "keyName" ➔ Bị undefined ngay!
    // Bắt buộc phải dùng ngoặc vuông để nó giải mã biến keyName:
    return customer[keyName]; 
}
console.log(getInfo("email")); // Giải mã "email" ➔ In ra: thien@example.com

2.2. Thêm (Add) & Sửa (Change)

Cú pháp giống hệt nhau. Nếu nhãn chưa có thì máy tự thêm mới, nếu nhãn có rồi thì máy ghi đè giá trị cũ.

Thêm mới: user.phone = "0901234567";
Sửa đổi: user.age = 23;

2.3. Xóa thuộc tính (Delete)

Cú pháp: delete user.email;
Ứng dụng thực tế: Trước khi bắn dữ liệu người dùng lên Google Analytics hoặc Facebook Pixel, luật bảo mật (GDPR) cấm truyền thông tin cá nhân (PII). Mày phải dùng lệnh delete này để xóa sạch email, phone của khách trước khi gửi dữ liệu đi.

2.4. Kiểm tra sự tồn tại (`in`)

Cú pháp: "color" in car ➔ Trả về true hoặc false.
Ứng dụng: Kiểm tra xem Object đơn hàng đổ về từ API có chứa mã giảm giá (discount) hay không để tính toán trừ tiền.

2.5. Object lồng nhau (Nested Objects)

Cơ học: Lấy củ hành bóc từng lớp. school.address.city.
Bùa hộ mệnh: Kết hợp với Optional Chaining đã học ở bài 17: school.address?.city để lỡ hệ thống không có trường address thì web không bị sập đỏ lòm.

3. HIỂN THỊ OBJECT & THẢM HỌA `[object Object]`

3.1. Tại sao lại xuất hiện `[object Object]`?

Khi mày cố tình dùng phép cộng chuỗi + giữa một chuỗi văn bản và một Object:

console.log("Sản phẩm: " + product); // ➔ "Sản phẩm: [object Object]"

Cơ chế ngầm: Dấu + ép Object phải biến thành dạng Chuỗi. Nhưng Object không biết cách tự dịch mình ra chữ, nên nó tự động gọi hàm mặc định của hệ thống và sinh ra cái chuỗi vô nghĩa [object Object].

3.2. Giải pháp cứu cánh: `JSON.stringify()`

Để nhìn thấy ruột gan của Object trên màn hình hoặc lưu vào cơ sở dữ liệu:

JSON.stringify(product): Biến toàn bộ Object thành một chuỗi chữ viết liền tù tì.
JSON.stringify(product, null, 2): Vũ khí tối thượng của dân kỹ thuật. Số 2 nghĩa là thụt lề 2 dấu cách. Nó sẽ in Object ra dạng cây thư mục đẹp đẽ, rõ ràng từng dòng để mày dễ dàng debug (tìm lỗi) xem data đổ về có đúng không.

3.3. Duyệt Object bằng `for...in`

Object không có số thứ tự 0, 1, 2 nên không thể dùng vòng lặp for thường được. Phải dùng for...in để cào từng cái nhãn (key) ra ngoài.

const person = { name: "Hoa", age: 25 };
for (let key in person) {
    console.log(${key}: ${person[key]}); // Bắt buộc dùng ngoặc vuông vì key là biến động!
}

4. BẢN CHẤT CỦA TỪ KHÓA `this` (TỔ CHỨC ĐỊA CHỈ Ô NHỚ)

Từ khóa this trong JS là thứ gây lú nhất, nhưng hiểu theo cơ học thì cực kỳ dễ: this đại diện cho "Kẻ đang sở hữu/gọi cái hàm đó" tại thời điểm chạy.

3 Trạm ngữ cảnh của `this`:

Nằm trong một Phương thức (Object Method): `this` chính là cái Object chứa nó.

const dog = {
    name: "Milo",
    bark: function() { console.log("Woof! I'm " + this.name); }
};
dog.bark(); // Kẻ gọi hàm bark là "dog" ➔ this chính là dog ➔ In ra: Milo

2. Nằm trong một Hàm thường (Function độc lập): Ở chế độ mặc định (non-strict mode), this sẽ trỏ thẳng vào đối tượng toàn cục (Global Object), trên trình duyệt thì đó chính là cái window.
3. Nằm ở Global (Nằm khơi khơi bên ngoài): * Trên Trình duyệt: this chính là window.

Trong môi trường Node.js: this là một Object rỗng {}.

5. CONSTRUCTOR FUNCTION — KHUÔN ĐÚC DỮ LIỆU HÀNG LOẠT

Nếu website e-commerce của mày có 1000 đơn hàng, mày không thể ngồi gõ tay 1000 cái Object { orderId: 1, ... } được. Mày phải tạo ra một cái Khuôn đúc (Constructor Function).

5.1. Luật chơi của Khuôn đúc:

Tên hàm bắt buộc phải viết hoa chữ cái đầu (Quy ước của dân lập trình, ví dụ: Order, Product).
Sử dụng từ khóa this để đóng đinh các thuộc tính sẽ được truyền vào.
Bắt buộc phải dùng từ khóa new khi đúc ra một sản phẩm mới.

function Person(name, age) {
    this.name = name;
    this.age = age;
}
// Đúc dữ liệu:
const p1 = new Person("An", 20);

5.2. Điều gì xảy ra dưới RAM khi mày bấm chữ `new`?

Khi máy tính nhìn thấy chữ new Person("An", 20), nó sẽ lập tức thực hiện 3 bước vô tri sau:

Tạo ra một cái Object rỗng tuếch dưới bộ nhớ: {}.
Lấy từ khóa this trỏ thẳng vào cái Object rỗng vừa tạo, rồi nạp các thuộc tính vào: { name: "An", age: 20 }.
Tự động gắn bộ nhận diện và return cái Object đã đầy đủ đồ đạc đó ra ngoài để gán vào biến p1.

5.3. Trạm kiểm định `instanceof`

Dùng để kiểm tra xem một cái Object có phải được đúc ra từ cái Khuôn đó hay không.

console.log(p1 instanceof Person); // Trả về: true

Ứng dụng thực tế: Khi viết các hàm xử lý thanh toán, mày phải check if (order instanceof Order) để đảm bảo dữ liệu truyền vào đúng là cấu trúc của một đơn hàng chuẩn, chứ không phải một mớ dữ liệu rác do hacker truyền vào phá hoại hệ thống.

Mớ lý thuyết cốt lõi nâng cao của Buổi 19 đã được dọn sạch sẽ và đồng bộ hóa thẳng vào tư duy thực chiến của mày. Hãy lưu lại bộ Note này vào Hub ngay lập tức.

FULLSTACK HUB

Mục Lục Bài Viết

Object trong JavaScript (Properties & Methods, Display Object, this, Constructor Function)

1. OBJECT LÀ GÌ? — HỘP CHỨA ĐA NĂNG

2. THAO TÁC CƠ BẢN (PROPERTIES & METHODS)

2.1. Truy cập (Access) — Cuộc chiến giữa Dấu chấm `.` và Dấu ngoặc vuông `[]`

2.2. Thêm (Add) & Sửa (Change)

2.3. Xóa thuộc tính (Delete)

2.4. Kiểm tra sự tồn tại (`in`)

2.5. Object lồng nhau (Nested Objects)

3. HIỂN THỊ OBJECT & THẢM HỌA `[object Object]`

3.1. Tại sao lại xuất hiện `[object Object]`?

3.2. Giải pháp cứu cánh: `JSON.stringify()`

3.3. Duyệt Object bằng `for...in`

4. BẢN CHẤT CỦA TỪ KHÓA `this` (TỔ CHỨC ĐỊA CHỈ Ô NHỚ)

3 Trạm ngữ cảnh của `this`:

Nằm trong một Phương thức (Object Method): `this` chính là cái Object chứa nó.

5. CONSTRUCTOR FUNCTION — KHUÔN ĐÚC DỮ LIỆU HÀNG LOẠT

5.1. Luật chơi của Khuôn đúc:

5.2. Điều gì xảy ra dưới RAM khi mày bấm chữ `new`?

5.3. Trạm kiểm định `instanceof`

Thống Kê Liên Kết

Mục Lục Bài Viết

Object trong JavaScript (Properties & Methods, Display Object, this, Constructor Function)

1. OBJECT LÀ GÌ? — HỘP CHỨA ĐA NĂNG

2. THAO TÁC CƠ BẢN (PROPERTIES & METHODS)

2.1. Truy cập (Access) — Cuộc chiến giữa Dấu chấm . và Dấu ngoặc vuông []

2.2. Thêm (Add) & Sửa (Change)

2.3. Xóa thuộc tính (Delete)

2.4. Kiểm tra sự tồn tại (in)

2.5. Object lồng nhau (Nested Objects)

3. HIỂN THỊ OBJECT & THẢM HỌA [object Object]

3.1. Tại sao lại xuất hiện [object Object]?

3.2. Giải pháp cứu cánh: JSON.stringify()

3.3. Duyệt Object bằng for...in

4. BẢN CHẤT CỦA TỪ KHÓA this (TỔ CHỨC ĐỊA CHỈ Ô NHỚ)

3 Trạm ngữ cảnh của this:

Nằm trong một Phương thức (Object Method): this chính là cái Object chứa nó.

5. CONSTRUCTOR FUNCTION — KHUÔN ĐÚC DỮ LIỆU HÀNG LOẠT

5.1. Luật chơi của Khuôn đúc:

5.2. Điều gì xảy ra dưới RAM khi mày bấm chữ new?

5.3. Trạm kiểm định instanceof

Thống Kê Liên Kết

2.1. Truy cập (Access) — Cuộc chiến giữa Dấu chấm `.` và Dấu ngoặc vuông `[]`

2.4. Kiểm tra sự tồn tại (`in`)

3. HIỂN THỊ OBJECT & THẢM HỌA `[object Object]`

3.1. Tại sao lại xuất hiện `[object Object]`?

3.2. Giải pháp cứu cánh: `JSON.stringify()`

3.3. Duyệt Object bằng `for...in`

4. BẢN CHẤT CỦA TỪ KHÓA `this` (TỔ CHỨC ĐỊA CHỈ Ô NHỚ)

3 Trạm ngữ cảnh của `this`:

Nằm trong một Phương thức (Object Method): `this` chính là cái Object chứa nó.

5.2. Điều gì xảy ra dưới RAM khi mày bấm chữ `new`?

5.3. Trạm kiểm định `instanceof`