JavaScript Nâng Cao - Kỳ 28: Khám Phá Object.seal, Object.freeze, và Các Tính Năng Nâng Cao Khác

Câu Nói Vui Về JavaScript

Có một câu nói vui rằng: "Trên đời chỉ có thứ nhiều người chửi và thứ không ai thèm dùng." JavaScript chính là một ví dụ điển hình cho sự mâu thuẫn này, khi vừa có nhiều người yêu thích, vừa có người thất vọng vì tính phức tạp của nó. Hôm nay, chúng ta sẽ cùng nhau khám phá những điểm thú vị nhưng cũng không kém phần đau đầu của JavaScript.

Mục Tiêu Của Series

Series này có thể dài và tôi không chắc nó sẽ bao gồm bao nhiêu Kỳ, nhưng tôi sẽ giải thích lại toàn bộ lý thuyết về JavaScript. Để những ai chưa đọc các bài trước có thể nắm bắt tốt hơn nhé!

Hãy cùng bắt đầu nào! 🚀

Nếu có câu hỏi nào, đừng ngần ngại để lại comment bên dưới nhé. Chỉ một câu chào hỏi cũng sẽ giúp tôi có thêm động lực để hoàn thành series này. Cảm ơn các bạn rất nhiều! 🤗

1. Tìm Hiểu Về Object.seal() và Object.freeze()

1.1. Phương Thức Object.seal()

Object.seal() là một phương thức cho phép "niêm phong" một object trong JavaScript. Sau khi niêm phong:

• Không thể thêm thuộc tính mới.
• Không thể xóa các thuộc tính hiện có.
• Có thể thay đổi giá trị của các thuộc tính hiện có.

Ví dụ:

const person = { name: "Lydia Hallie" };  
Object.seal(person);  
person.name = "Evan Bacon"; // Được phép
person.age = 21; // Không được phép
delete person.name; // Không được phép
console.log(person); // { name: "Evan Bacon" }

1.2. Phương Thức Object.freeze()

Object.freeze() là phương thức mạnh mẽ hơn Object.seal(). Khi một object bị đóng băng:

• Không thể thêm thuộc tính mới.
• Không thể xóa các thuộc tính hiện có.
• Không thể thay đổi giá trị của các thuộc tính hiện có, nhưng các thuộc tính con vẫn có thể thay đổi.

Ví dụ:

const person = {  
  name: "Lydia Hallie",  
  address: { street: "100 Main St" }  
};  
Object.freeze(person);  
person.name = "Evan Bacon"; // Không được phép
person.age = 21; // Không được phép
delete person.name; // Không được phép
person.address.street = "101 Main St"; // Được phép
console.log(person);  
// { name: "Lydia Hallie", address: { street: "101 Main St" } }

2. Ví Dụ Cụ Thể Về Object.seal()

const person = { name: "Lydia Hallie" };  
Object.seal(person);

Câu hỏi: Cách nào dưới đây sẽ thay đổi object person?

• A: person.name = "Evan Bacon"
• B: person.age = 21
• C: delete person.name
• D: Object.assign(person, { age: 21 })

Đáp án: A - vì person.name có thể được thay đổi.

3. Ví Dụ Cụ Thể Về Object.freeze()

const person = {  
  name: "Lydia Hallie",  
  address: { street: "100 Main St" }  
};  
Object.freeze(person);

Câu hỏi: Cách nào dưới đây có thể thay đổi object person?

• A: person.name = "Evan Bacon"
• B: delete person.address
• C: person.address.street = "101 Main St"
• D: person.pet = { name: "Mara" }

Đáp án: C - vì person.address.street là thuộc tính con và không bị ảnh hưởng bởi Object.freeze().

4. Giá Trị Mặc Định và Arrow Function

const add = x => x + x;
function myFunc(num = 2, value = add(num)) {  
  console.log(num, value);
}
myFunc();  
myFunc(3);

Câu hỏi: Output sẽ là gì?

• A: 2``4 và 3``6
• B: 2``NaN và 3``NaN
• C: 2``Error và 3``6
• D: 2``4 và 3``Error

Đáp án: A - Output cho lần gọi đầu tiên là 2 4 và lần gọi thứ hai là 3 6.

5. Private Fields trong Class

class Counter {
  #number = 10;
  increment() {
    this.#number++;
  }
 
  getNum() {
    return this.#number;
  }
}
const counter = new Counter();  
counter.increment();
console.log(counter.#number);

Câu hỏi: Output là gì? **

• A: 10
• B: 11
• C: undefined
• D: SyntaxError

Đáp án: D - Không thể truy cập private field từ bên ngoài class.

6. Generator Functions

const teams = [  
  { name: "Team 1", members: ["Paul", "Lisa"] },  
  { name: "Team 2", members: ["Laura", "Tim"] }  
];
function* getMembers(members) {  
  for (let i = 0; i < members.length; i++) {  
    yield members[i];  
  }
}
function* getTeams(teams) {
  for (let i = 0; i < teams.length; i++) {
    // ✨ SOMETHING IS MISSING HERE ✨
  }
}
const obj = getTeams(teams);
obj.next(); // { value: "Paul", done: false }
obj.next(); // { value: "Lisa", done: false }

Câu hỏi: Câu lệnh còn thiếu là gì?

• A: yield getMembers(teams[i].members)
• B: yield* getMembers(teams[i].members)
• C: return getMembers(teams[i].members)
• D: return yield getMembers(teams[i].members)

Đáp án: B - đúng vì muốn yield từng giá trị từ một generator function khác.

7. Tổng Kết

Chúng ta đã cùng tìm hiểu một số tính năng nâng cao trong JavaScript:

1. Object.seal() và Object.freeze(): Kiểm soát việc thay đổi object.
2. Giá trị mặc định và Arrow Function: Tương tác giữa giá trị mặc định và arrow function.
3. Private Fields trong Class: Tăng cường tính encapsulation trong OOP.
4. Generator Functions: Cách sử dụng generator để tạo iterator phức tạp.

8. Thử Thách

Tạo lớp BankAccount với các yêu cầu:

• Private field #balance cho số dư tài khoản.
• Phương thức deposit(amount) và withdraw(amount).
• Sử dụng Object.freeze() để khóa các phương thức của class.
• Tạo transactionHistory() dưới dạng generator.

Chúc các bạn học tập hiệu quả và hẹn gặp lại trong bài học tiếp theo! 👋
source: viblo