The Object.create()
method creates a new object, using an existing object as the prototype of the newly created object. This is a powerful way to implement inheritance in JavaScript, allowing objects to access properties and methods from other objects.
Example 1: Simple Prototypal Inheritance
// A prototype object with a greeting method.
const humanPrototype = {
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
// Create a new object 'person' with 'humanPrototype' as its prototype.
const person = Object.create(humanPrototype);
person.name = "Alice"; // Add a property to the new object.
person.greet(); // Outputs: Hello, my name is Alice
Explanation
We define a humanPrototype
object with a greet
method. Object.create()
makes a new person
object that inherits from humanPrototype
, so person
can use the greet
method.
Example 2: Sharing a Base Configuration
// A base configuration object.
const baseConfig = {
host: "api.example.com",
port: 443
};
// Create a specific configuration that inherits from the base.
const userConfig = Object.create(baseConfig);
userConfig.endpoint = "/users";
// Access properties from both the new object and its prototype.
console.log(`${userConfig.host}${userConfig.endpoint}`); // Outputs: api.example.com/users
Explanation
userConfig
is created with baseConfig
as its prototype. Even though userConfig
doesn't have a host
property itself, it can access it from baseConfig
through the prototype chain.
Example 3: Creating an Object with No Prototype
// Create an object that does not inherit anything.
const pureObject = Object.create(null);
// This object won't have default methods like toString.
console.log(pureObject.toString); // Outputs: undefined
Explanation
By passing null
to Object.create()
, we create a "pure" dictionary object. It doesn't inherit any properties or methods from Object.prototype
, which can be useful for creating hashmaps without potential property name collisions.
Example 4: Extending a Shape Prototype
// A generic shape prototype.
const shape = {
getType: function() {
return this.type;
}
};
// Create a circle that inherits from shape.
const circle = Object.create(shape);
circle.type = "Circle";
circle.radius = 5;
console.log(circle.getType()); // Outputs: Circle
Explanation
The circle
object is based on the shape
prototype. This allows circle
to have its own specific properties (type
, radius
) while also having access to the shared getType
method.
Example 5: Multiple Levels of Inheritance
// Base animal prototype.
const animal = {
breathe: function() {
console.log("Breathing...");
}
};
// Mammal inherits from animal.
const mammal = Object.create(animal);
mammal.feedMilk = function() {
console.log("Feeding milk...");
};
// Dog inherits from mammal.
const dog = Object.create(mammal);
dog.bark = function() {
console.log("Barking!");
};
dog.breathe(); // Outputs: Breathing...
Explanation
This shows a prototype chain. The dog
object can access methods from its direct prototype (mammal
) and also from mammal
's prototype (animal
), demonstrating multi-level inheritance.
Example 6: Overriding a Prototype Method
// A vehicle prototype.
const vehicle = {
start: function() {
console.log("Engine starting...");
}
};
// Electric car inherits from vehicle.
const electricCar = Object.create(vehicle);
// Override the start method.
electricCar.start = function() {
console.log("Silent start...");
};
electricCar.start(); // Outputs: Silent start...
Explanation
The electricCar
object inherits from vehicle
but provides its own, more specific start
method. When electricCar.start()
is called, its own method is used instead of the one on the vehicle
prototype.
Example 7: Initializing Properties with Object.create()
// A student prototype.
const studentProto = {
displaySchool: function() {
console.log(`School: ${this.school}`);
}
};
// Create and initialize a new student in one step.
const newStudent = Object.create(studentProto, {
name: { value: "Maria" },
school: { value: "Midtown High", writable: true }
});
newStudent.displaySchool(); // Outputs: School: Midtown High
Explanation
Object.create()
can take a second argument to define properties for the new object. This allows you to create an object with a specific prototype and initialize its properties at the same time.