Đối tượng (Objects) trong JavaScript

Trong JavaScript, đối tượng (Objects) là một trong những thành phần quan trọng nhất, giúp tổ chức và quản lý dữ liệu một cách hiệu quả. Đối tượng là tập hợp của các thuộc tính (properties) và phương thức (methods), trong đó thuộc tính là các giá trị liên quan đến đối tượng, còn phương thức là các hành động mà đối tượng có thể thực hiện.

Objects đóng vai trò quan trọng trong lập trình JavaScript vì chúng giúp nhóm các dữ liệu có liên quan thành một thực thể duy nhất. Điều này giúp việc truy cập, quản lý và thao tác dữ liệu trở nên dễ dàng và trực quan hơn. Đặc biệt, trong lập trình hướng đối tượng (OOP), đối tượng là nền tảng để xây dựng các mô hình dữ liệu phức tạp, giúp viết code gọn gàng, dễ bảo trì và tái sử dụng.

Khái niệm về đối tượng (Objects) trong JavaScript

Định nghĩa Objects

Trong JavaScript, Object (đối tượng) là một kiểu dữ liệu có cấu trúc phức tạp, cho phép lưu trữ nhiều giá trị dưới dạng cặp key-value (khóa - giá trị). Mỗi khóa trong một đối tượng là một chuỗi (string) hoặc Symbol, và giá trị có thể là bất kỳ kiểu dữ liệu nào, bao gồm số, chuỗi, mảng, hàm hoặc thậm chí là một đối tượng khác.

Object là nền tảng của lập trình hướng đối tượng (OOP) trong JavaScript, giúp tổ chức và quản lý dữ liệu theo cách logic và dễ sử dụng hơn.

Cấu trúc của một Object (Key-Value Pairs)

Một đối tượng trong JavaScript được định nghĩa bằng dấu ngoặc nhọn {} và chứa các cặp key-value (khóa - giá trị), được phân tách bằng dấu phẩy.

Cú pháp cơ bản của một Object:

const person = {
    name: "John Doe",  // key: "name", value: "John Doe"
    age: 30,           // key: "age", value: 30
    isMarried: false,  // key: "isMarried", value: false
    greet: function() { // key: "greet", value: một function
        return "Hello!";
    }
};

Trong ví dụ trên:

• name, age, isMarried, và greet là các key.
• "John Doe", 30, false, và function() là các value.
• Các giá trị có thể là chuỗi (string), số (number), boolean, hoặc hàm (function).

So sánh Object với các kiểu dữ liệu khác

Ví dụ về sự khác nhau giữa Object và Array:

const person = { name: "Alice", age: 25 };  // Object: Chứa dữ liệu theo key-value
const numbers = [1, 2, 3, 4, 5];            // Array: Danh sách các giá trị theo thứ tự

• person.name sẽ trả về "Alice".
• numbers[0] sẽ trả về 1.

Cách tạo đối tượng trong JavaScript

JavaScript cung cấp nhiều cách khác nhau để tạo đối tượng (Object) tùy vào nhu cầu và tình huống sử dụng. Dưới đây là các phương pháp phổ biến:

Object Literal (Đối tượng dạng chữ - {})

Cú pháp và ví dụ minh họa

Object Literal là cách đơn giản và phổ biến nhất để tạo đối tượng. Chỉ cần sử dụng dấu ngoặc nhọn {} và định nghĩa các cặp key-value bên trong.

Ví dụ:

const person = {
    name: "Alice",
    age: 25,
    isStudent: true,
    greet: function() {
        return `Hello, my name is ${this.name}`;
    }
};

console.log(person.name);  // Alice
console.log(person.greet()); // Hello, my name is Alice

Kết quả :

Lưu ý: Nếu cần tạo nhiều đối tượng có cấu trúc tương tự nhau, Object Literal không tối ưu vì phải lặp lại mã nguồn cho từng đối tượng.

Sử dụng từ khóa new Object()

Một cách khác để tạo đối tượng là sử dụng new Object(), nhưng phương pháp này ít phổ biến hơn so với Object Literal.

Cú pháp và ví dụ

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function() {
    return `Hi, I'm ${this.name}`;
};

console.log(person.name);  // Bob
console.log(person.greet()); // Hi, I'm Bob

Sự khác nhau giữa Object Literal và new Object()

Sử dụng Constructor Function trong JavaScript

Cách tạo Object bằng hàm tạo (Constructor Function)

Constructor Function là một hàm đặc biệt được sử dụng để tạo nhiều đối tượng có cấu trúc giống nhau. Các thuộc tính và phương thức được định nghĩa bên trong hàm tạo và gán cho this.

Ví dụ minh họa

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        return `Hello, my name is ${this.name}`;
    };
}

// Tạo nhiều đối tượng từ Constructor Function
const person1 = new Person("Charlie", 28);
const person2 = new Person("Diana", 24);

console.log(person1.greet()); // Hello, my name is Charlie
console.log(person2.greet()); // Hello, my name is Diana

Kết quả

Ưu điểm của Constructor Function

• Giúp tạo nhiều đối tượng có cấu trúc giống nhau.
• Tăng tính tái sử dụng và giúp tổ chức mã nguồn tốt hơn.

Lưu ý: Nếu có nhiều phương thức trong Constructor Function, mỗi đối tượng sẽ có một bản sao riêng biệt của các phương thức đó. Điều này có thể gây tốn bộ nhớ.

Để tối ưu bộ nhớ, chúng ta có thể sử dụng Prototype:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    return `Hello, my name is ${this.name}`;
};

const person3 = new Person("Eve", 22);
console.log(person3.greet()); // Hello, my name is Eve

Sử dụng Class (ES6+) trong JavaScript

ES6 giới thiệu Class, giúp định nghĩa đối tượng một cách trực quan và giống với các ngôn ngữ lập trình hướng đối tượng khác như Java, C#.

Cú pháp khai báo lớp (Class) trong JavaScript

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return `Hi, I'm ${this.name}`;
    }
}

// Tạo đối tượng từ Class
const person1 = new Person("Frank", 35);
console.log(person1.greet()); // Hi, I'm Frank

Sử dụng constructor trong Class

• constructor() là một phương thức đặc biệt trong Class, được gọi tự động khi một đối tượng mới được tạo.
• Các thuộc tính của đối tượng được gán thông qua this.

Ví dụ minh họa về kế thừa trong Class

ES6 Class hỗ trợ kế thừa (extends), giúp tạo đối tượng con kế thừa thuộc tính và phương thức từ đối tượng cha.

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        return "Some generic sound";
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // Gọi constructor của lớp cha (Animal)
        this.breed = breed;
    }

    makeSound() {
        return "Woof! Woof!";
    }
}

const myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.name); // Buddy
console.log(myDog.breed); // Golden Retriever
console.log(myDog.makeSound()); // Woof! Woof!

Kết quả :

Ưu điểm của Class trong JavaScript

Dễ đọc, dễ bảo trì.
Hỗ trợ kế thừa (extends).
Tăng tính tổ chức và cấu trúc cho mã nguồn.

Các cách tạo đối tượng trong JavaScript

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

Trong JavaScript, đối tượng (Object) bao gồm thuộc tính (properties) và phương thức (methods). Đây là hai yếu tố cốt lõi giúp chúng ta làm việc với Object một cách linh hoạt.

Thuộc tính (Properties) của Object

Cách khai báo và truy cập thuộc tính

Thuộc tính trong một đối tượng được định nghĩa dưới dạng cặp key-value. Key đóng vai trò là tên thuộc tính, và value là giá trị của thuộc tính đó.

Có hai cách phổ biến để truy cập thuộc tính của Object:

• Dùng dấu chấm (.)
• Dùng dấu ngoặc vuông ([])

Ví dụ minh họa

const person = {
    name: "Alice",
    age: 25,
    job: "Developer"
};

// Truy cập thuộc tính bằng dấu chấm
console.log(person.name); // Alice
console.log(person.age);  // 25

// Truy cập thuộc tính bằng dấu ngoặc vuông
console.log(person["job"]); // Developer

// Khi key chứa khoảng trắng hoặc ký tự đặc biệt, bắt buộc dùng dấu ngoặc vuông
const user = {
    "full name": "John Doe",
    "email-address": "[email protected]"
};

console.log(user["full name"]); // John Doe
console.log(user["email-address"]); // [email protected]

Lưu ý:

• Sử dụng dấu chấm (.) khi key đơn giản, không chứa khoảng trắng hoặc ký tự đặc biệt.
• Sử dụng dấu ngoặc vuông ([]) khi key có khoảng trắng hoặc được lưu trong biến.

Cập nhật và xóa thuộc tính trong Object

const person = {
    name: "Alice",
    age: 25
};

// Cập nhật giá trị thuộc tính
person.age = 30;
console.log(person.age); // 30

// Thêm thuộc tính mới
person.job = "Engineer";
console.log(person.job); // Engineer

Xóa thuộc tính
Dùng từ khóa delete để xóa một thuộc tính khỏi đối tượng.

const person = {
    name: "Bob",
    age: 27,
    job: "Designer"
};

// Xóa thuộc tính
delete person.job;

console.log(person.job); // undefined

Kiểm tra sự tồn tại của thuộc tính
Có thể kiểm tra một thuộc tính có tồn tại trong Object hay không bằng:
Toán tử in
hasOwnProperty()

const car = {
    brand: "Toyota",
    model: "Camry"
};

console.log("brand" in car); // true
console.log(car.hasOwnProperty("model")); // true
console.log(car.hasOwnProperty("year")); // false

Phương thức (Methods) của Object trong JavaScript

Phương thức trong Object là các hàm (functions) được khai báo bên trong đối tượng.

Định nghĩa phương thức trong Object

Chúng ta có thể khai báo phương thức theo hai cách:

• Cách thông thường: Gán một function vào thuộc tính.
• Cách viết ngắn gọn (ES6+): Dùng cú pháp methodName() {...}.

Ví dụ minh họa

const person = {
    name: "Charlie",
    age: 28,
    
    // Cách thông thường
    greet: function() {
        return `Hello, my name is ${this.name}`;
    },
    
    // Cách viết ngắn gọn (ES6+)
    introduce() {
        return `I am ${this.name}, and I am ${this.age} years old.`;
    }
};

console.log(person.greet()); // Hello, my name is Charlie
console.log(person.introduce()); // I am Charlie, and I am 28 years old.

Kết quả :

Lưu ý:

• Cách viết ngắn gọn (introduce() {}) được khuyến khích sử dụng hơn trong ES6.
• Trong phương thức, có thể dùng this để tham chiếu đến chính đối tượng đó.

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

Chỉ cần gọi phương thức giống như cách gọi một function bình thường.

const car = {
    brand: "Honda",
    model: "Civic",
    
    start: function() {
        return "The car has started!";
    }
};

console.log(car.start()); // The car has started!

const user = {
    name: "Eve",
    age: 22,
    
    sayHello: function() {
        return `Hi, my name is ${this.name}`;
    }
};

console.log(user.sayHello()); // Hi, my name is Eve

const user = {
    name: "Alice",
    
    sayHello: function() {
        return `Hello, I'm ${this.name}`;
    },

    sayHi: () => {
        return `Hi, I'm ${this.name}`;
    }
};

console.log(user.sayHello()); // Hello, I'm Alice
console.log(user.sayHi()); // Hi, I'm undefined

const person = {
    name: "Alice",
    age: 25,
    job: "Developer"
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

name: Alice  
age: 25  
job: Developer  

const user = {
    id: 101,
    username: "john_doe",
    email: "[email protected]"
};

console.log(Object.keys(user));

["id", "username", "email"]

console.log(Object.keys(user).length); // 3

Object.keys(user).forEach(key => {
    console.log(`${key}: ${user[key]}`);
});

console.log(Object.values(user));

[101, "john_doe", "[email protected]"]

const scores = { math: 85, english: 90, science: 78 };
const total = Object.values(scores).reduce((sum, score) => sum + score, 0);
console.log(total); // 253

console.log(Object.entries(user));

[
    ["id", 101],
    ["username", "john_doe"],
    ["email", "[email protected]"]
]

Object.entries(user).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

const user1 = { name: "Alice", age: 25 };
const user2 = Object.assign({}, user1);

console.log(user2); // { name: "Alice", age: 25 }

const person = { name: "Bob" };
const details = { age: 30, job: "Engineer" };

const merged = Object.assign({}, person, details);
console.log(merged); // { name: "Bob", age: 30, job: "Engineer" }

const config = {
    apiKey: "123456",
    maxUsers: 100
};

Object.freeze(config);

config.maxUsers = 200;  // Không thể thay đổi
config.newProp = true;  // Không thể thêm mới

console.log(config.maxUsers); // 100
console.log(config.newProp);  // undefined

const user = {
    name: "David",
    age: 29
};

Object.seal(user);

user.age = 30;  //  Có thể cập nhật
user.gender = "Male";  //  Không thể thêm mới
delete user.name;  //  Không thể xóa

console.log(user); // { name: "David", age: 30 }

const person = {
    name: "Alice",
    age: 25,
    isStudent: false,
    greet: function () {
        return "Hello!";
    }
};

{
    "name": "Alice",
    "age": 25,
    "isStudent": false
}

const person = {
    name: "Alice",
    age: 25,
    isStudent: false
};

const jsonString = JSON.stringify(person);
console.log(jsonString);

{"name":"Alice","age":25,"isStudent":false}

const jsonString = '{"name":"Alice","age":25,"isStudent":false}';

const personObject = JSON.parse(jsonString);
console.log(personObject);

{ name: 'Alice', age: 25, isStudent: false }

const data = {
    username: "john_doe",
    email: "[email protected]"
};

fetch("https://api.example.com/users", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.error("Lỗi:", error));

const user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser);