JavaScript - ES5 Object Methods

Xin chào các bạn future JavaScript wizards! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của các phương thức Object ES5. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong chuyến phiêu lưu này, và chúng ta sẽ cùng nhau bước từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ manipulates objects như một chuyên gia!

Các phương thức Object ES5 trong JavaScript

Trước khi bắt đầu, hãy cùng nhanh chóng回顾 lại objects là gì trong JavaScript. Hãy nghĩ của một object như một容器 chứa thông tin liên quan. Ví dụ, một object "car" có thể chứa các thuộc tính như màu sắc, thương hiệu và năm.

let car = {
color: "red",
brand: "Toyota",
year: 2020
};

Bây giờ, ES5 đã giới thiệu nhiều phương thức mạnh mẽ để làm việc với các objects này. Hãy cùng khám phá chúng một cái một!

Phương thức JavaScript Object.create()

Phương thức Object.create() cho phép chúng ta tạo một object mới sử dụng một object hiện có làm prototype. Nó giống như nói, "Hey JavaScript, hãy tạo cho tôi một object mới thừa hưởng từ object này!"

let animal = {
makeSound: function() {
console.log("Some generic animal sound");
}
};

let dog = Object.create(animal);
dog.makeSound(); // Output: Some generic animal sound

dog.bark = function() {
console.log("Woof woof!");
};

dog.bark(); // Output: Woof woof!

Trong ví dụ này, chúng ta đã tạo một object dog thừa hưởng từ object animal. dog có thể sử dụng phương thức makeSound từ animal, nhưng nó cũng có phương thức bark riêng.

Phương thức JavaScript Object.defineProperty()

Object.defineProperty() cho phép chúng ta thêm hoặc sửa đổi một thuộc tính của một object. Nó giống như có thể thêm một tính năng mới cho xe của bạn sau khi bạn đã mua nó!

let person = {};

Object.defineProperty(person, "name", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});

console.log(person.name); // Output: John
person.name = "Jane"; // Điều này sẽ không thay đổi tên
console.log(person.name); // Output: John

Ở đây, chúng ta đã thêm thuộc tính name vào object person. Chúng ta đã đặt nó là không thể ghi đè, có nghĩa là chúng ta không thể thay đổi giá trị của nó sau khi đã đặt.

Phương thức JavaScript Object.defineProperties()

Object.defineProperties() giống như defineProperty(), nhưng mạnh mẽ hơn! Nó cho phép chúng ta định nghĩa nhiều thuộc tính cùng một lúc.

let book = {};

Object.defineProperties(book, {
title: {
value: "The Great Gatsby",
writable: true
},
author: {
value: "F. Scott Fitzgerald",
writable: false
}
});

console.log(book.title); // Output: The Great Gatsby
console.log(book.author); // Output: F. Scott Fitzgerald

book.title = "Gatsby"; // Điều này hoạt động
book.author = "Scott"; // Điều này không hoạt động

console.log(book.title); // Output: Gatsby
console.log(book.author); // Output: F. Scott Fitzgerald

Trong ví dụ này, chúng ta đã định nghĩa hai thuộc tính cho object book trong một lần. Thuộc tính title có thể ghi đè, nhưng author thì không.

Phương thức JavaScript Object.getOwnPropertyDescriptor()

Phương thức này cho phép chúng ta lấy mô tả của một thuộc tính. Nó giống như yêu cầu thông số kỹ thuật của một tính năng cụ thể của xe của bạn.

let car = {
brand: "Toyota"
};

let descriptor = Object.getOwnPropertyDescriptor(car, "brand");

console.log(descriptor);
// Output:
// {
//   value: "Toyota",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Ở đây, chúng ta đang lấy mô tả của thuộc tính brand của object car. Nó cho chúng ta biết giá trị và thuộc tính có thể ghi đè, có thể đếm và có thể cấu hình hay không.

Phương thức JavaScript Object.getOwnPropertyNames()

Phương thức này trả về một mảng của tất cả các thuộc tính (có thể đếm hoặc không) được tìm thấy trực tiếp trong một object cho trước. Nó giống như lấy danh sách tất cả các tính năng của xe của bạn, cả những tính năng ẩn!

let person = {
name: "John",
age: 30
};

Object.defineProperty(person, "ssn", {
value: "123-45-6789",
enumerable: false
});

console.log(Object.getOwnPropertyNames(person));
// Output: ["name", "age", "ssn"]

Dù chúng ta đã làm ssn không thể đếm, getOwnPropertyNames() vẫn bao gồm nó trong danh sách.

Phương thức JavaScript Object.getPrototypeOf()

Phương thức này trả về prototype của object được chỉ định. Nó giống như hỏi, "Ai là cha mẹ của bạn?"

let animal = {
eats: true
};

let rabbit = Object.create(animal);

console.log(Object.getPrototypeOf(rabbit) === animal); // Output: true

Ở đây, chúng ta xác nhận rằng prototype của rabbit thực sự là object animal.

Phương thức JavaScript Object.keys()

Object.keys() trả về một mảng của tất cả các tên thuộc tính có thể đếm của một object cho trước. Nó giống như lấy danh sách tất cả các tính năng可见 của xe của bạn.

let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};

console.log(Object.keys(car));
// Output: ["brand", "model", "year"]

Phương thức này chỉ trả về các thuộc tính có thể đếm, khác với getOwnPropertyNames() amely trả về tất cả các thuộc tính.

Phương thức JavaScript Object.freeze()

Object.freeze() đóng băng một object. Một object đã đóng băng không thể thay đổi được. Nó giống như đặt xe của bạn trong một khối băng - bạn không thể thêm, xóa hoặc sửa đổi các thuộc tính của nó!

let car = {
brand: "Toyota",
model: "Corolla"
};

Object.freeze(car);

car.year = 2020; // Điều này sẽ không hoạt động
car.brand = "Honda"; // Điều này cũng không hoạt động

console.log(car); // Output: { brand: "Toyota", model: "Corolla" }

Sau khi đóng băng object car, chúng ta không thể thêm thuộc tính year hoặc thay đổi brand.

Phương thức JavaScript Object.seal()

Object.seal() seal một object, ngăn không cho thêm mới các thuộc tính và đánh dấu tất cả các thuộc tính hiện có là không thể cấu hình. Nó giống như seal xe của bạn - bạn không thể thêm mới các tính năng, nhưng bạn vẫn có thể sửa đổi các tính năng hiện có.

let person = {
name: "John",
age: 30
};

Object.seal(person);

person.gender = "Male"; // Điều này sẽ không hoạt động
person.age = 31; // Điều này hoạt động

delete person.name; // Điều này sẽ không hoạt động

console.log(person); // Output: { name: "John", age: 31 }

Chúng ta có thể thay đổi age, nhưng chúng ta không thể thêm gender hoặc xóa name.

Phương thức JavaScript Object.isFrozen()

Phương thức này xác định xem một object có bị đóng băng hay không. Nó giống như kiểm tra xem xe của bạn có thực sự bị kẹt trong khối băng hay không!

let car = {
brand: "Toyota"
};

console.log(Object.isFrozen(car)); // Output: false

Object.freeze(car);

console.log(Object.isFrozen(car)); // Output: true

Phương thức JavaScript Object.isSealed()

Tương tự như isFrozen(), phương thức này kiểm tra xem một object có bị seal hay không.

let person = {
name: "John"
};

console.log(Object.isSealed(person)); // Output: false

Object.seal(person);

console.log(Object.isSealed(person)); // Output: true

Phương thức JavaScript Object.preventExtensions()

Phương thức này ngăn không cho thêm mới các thuộc tính vào một object. Nó giống như đặt một biển báo "Không thêm tính năng mới" trên xe của bạn.

let car = {
brand: "Toyota"
};

Object.preventExtensions(car);

car.model = "Corolla"; // Điều này sẽ không hoạt động

console.log(car); // Output: { brand: "Toyota" }

Sau khi ngăn không cho mở rộng, chúng ta không thể thêm thuộc tính model.

Phương thức JavaScript Object.isExtensible()

Phương thức này xác định xem một object có thể mở rộng hay không (Có thể thêm mới các thuộc tính vào nó).

let car = {
brand: "Toyota"
};

console.log(Object.isExtensible(car)); // Output: true

Object.preventExtensions(car);

console.log(Object.isExtensible(car)); // Output: false

Dưới đây là tóm tắt của tất cả các phương thức chúng ta đã xem xét:

Phương thức	Mô tả
Object.create()	Tạo một object mới với prototype và các thuộc tính được chỉ định
Object.defineProperty()	Thêm hoặc sửa đổi một thuộc tính của một object
Object.defineProperties()	Định nghĩa mới hoặc sửa đổi các thuộc tính trực tiếp trên một object
Object.getOwnPropertyDescriptor()	Trả về mô tả của một thuộc tính của một object
Object.getOwnPropertyNames()	Trả về một mảng của tất cả các thuộc tính tìm thấy trực tiếp trong một object
Object.getPrototypeOf()	Trả về prototype của object được chỉ định
Object.keys()	Trả về một mảng của các tên thuộc tính có thể đếm của một object
Object.freeze()	Đóng băng một object: các mã khác không thể xóa hoặc thay đổi các thuộc tính của nó
Object.seal()	Seal một object, ngăn không cho thêm mới các thuộc tính và đánh dấu tất cả các thuộc tính hiện có là không thể cấu hình
Object.isFrozen()	Xác định xem một object có bị đóng băng hay không
Object.isSealed()	Xác định xem một object có bị seal hay không
Object.preventExtensions()	Ngăn không cho thêm mới các thuộc tính vào một object
Object.isExtensible()	Xác định xem một object có thể mở rộng hay không

Và đó là tất cả! Bạn đã cùng nhau tham quan một chuyến du lịch lớn qua các phương thức Object ES5. Hãy nhớ, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các phương thức này trong mã của bạn. Chúc các bạn may mắn, các nhà lập trình JavaScript tương lai!

Credits: Image by storyset