JavaScript - ES5 物件方法

Hello there, future JavaScript wizards! Today, we're going to dive into the magical world of ES5 Object Methods. Don't worry if you're new to programming – I'll be your friendly guide through this adventure, and we'll take it step by step. By the end of this tutorial, you'll be manipulating objects like a pro!

JavaScript ES5 物件方法

Before we start, let's quickly recap what objects are in JavaScript. Think of an object as a container that holds related information. For example, a "car" object might contain properties like color, brand, and year.

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

Now, ES5 introduced several powerful methods to work with these objects. Let's explore them one by one!

JavaScript Object.create() 方法

The Object.create() method allows us to create a new object using an existing object as the prototype. It's like saying, "Hey JavaScript, make me a new object that inherits from this other object!"

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!

In this example, we created a dog object that inherits from the animal object. The dog can use the makeSound method from animal, but it also has its own bark method.

JavaScript Object.defineProperty() 方法

Object.defineProperty() allows us to add or modify a property of an object. It's like being able to add a new feature to your car after you've bought it!

let person = {};

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

console.log(person.name); // Output: John
person.name = "Jane"; // This won't change the name
console.log(person.name); // Output: John

Here, we added a name property to the person object. We set it as non-writable, which means we can't change its value after it's set.

JavaScript Object.defineProperties() 方法

Object.defineProperties() is like defineProperty(), but on steroids! It allows us to define multiple properties at once.

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"; // This works
book.author = "Scott"; // This doesn't work

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

In this example, we defined two properties for our book object in one go. The title is writable, but the author isn't.

JavaScript Object.getOwnPropertyDescriptor() 方法

This method allows us to get the description of a property. It's like asking for the specs of a particular feature of your car.

let car = {
brand: "Toyota"
};

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

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

Here, we're getting the descriptor of the brand property of our car object. It tells us the value and whether the property is writable, enumerable, and configurable.

JavaScript Object.getOwnPropertyNames() 方法

This method returns an array of all properties (enumerable or not) found directly in a given object. It's like getting a list of all features of your car, even the hidden ones!

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"]

Even though we made ssn non-enumerable, getOwnPropertyNames() still includes it in the list.

JavaScript Object.getPrototypeOf() 方法

This method returns the prototype of the specified object. It's like asking, "Who's your parent?"

let animal = {
eats: true
};

let rabbit = Object.create(animal);

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

Here, we confirm that rabbit's prototype is indeed the animal object.

JavaScript Object.keys() 方法

Object.keys() returns an array of a given object's own enumerable property names. It's like getting a list of all visible features of your car.

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

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

This method only returns the enumerable properties, unlike getOwnPropertyNames() which returns all properties.

JavaScript Object.freeze() 方法

Object.freeze() freezes an object. A frozen object can no longer be changed. It's like putting your car in a block of ice – you can't add, remove, or modify its properties!

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

Object.freeze(car);

car.year = 2020; // This won't work
car.brand = "Honda"; // This won't work either

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

After freezing the car object, we can't add the year property or change the brand.

JavaScript Object.seal() 方法

Object.seal() seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. It's like sealing your car – you can't add new features, but you can still modify existing ones.

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

Object.seal(person);

person.gender = "Male"; // This won't work
person.age = 31; // This works

delete person.name; // This won't work

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

We can change age, but we can't add gender or delete name.

JavaScript Object.isFrozen() 方法

This method determines if an object is frozen. It's like checking if your car is indeed trapped in that block of ice!

let car = {
brand: "Toyota"
};

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

Object.freeze(car);

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

JavaScript Object.isSealed() 方法

Similar to isFrozen(), this method checks if an object is sealed.

let person = {
name: "John"
};

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

Object.seal(person);

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

JavaScript Object.preventExtensions() 方法

This method prevents new properties from being added to an object. It's like putting a "No More Features" sign on your car.

let car = {
brand: "Toyota"
};

Object.preventExtensions(car);

car.model = "Corolla"; // This won't work

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

After preventing extensions, we can't add the model property.

JavaScript Object.isExtensible() 方法

This method determines if an object is extensible (whether it can have new properties added to it).

let car = {
brand: "Toyota"
};

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

Object.preventExtensions(car);

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

Here's a summary of all the methods we've covered:

方法	描述
Object.create()	Creates a new object with the specified prototype object and properties
Object.defineProperty()	Adds the named property described by a given descriptor to an object
Object.defineProperties()	Defines new or modifies existing properties directly on an object, returning the object
Object.getOwnPropertyDescriptor()	Returns a property descriptor for an own property of an object
Object.getOwnPropertyNames()	Returns an array of all properties found directly in a given object
Object.getPrototypeOf()	Returns the prototype of the specified object
Object.keys()	Returns an array of a given object's own enumerable property names
Object.freeze()	Freezes an object: other code can't delete or change its properties
Object.seal()	Seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable
Object.isFrozen()	Determines if an object is frozen
Object.isSealed()	Determines if an object is sealed
Object.preventExtensions()	Prevents new properties from ever being added to an object
Object.isExtensible()	Determines if an object is extensible

And there you have it! You've just taken a grand tour of ES5 Object Methods. Remember, practice makes perfect, so don't hesitate to experiment with these methods in your own code. Happy coding, future JavaScript masters!

Credits: Image by storyset