Object.create usage in Javascript - Step-by-Step Execution

Concept Flow - Object.create usage

Define prototype object

↓

Call Object.create(prototype)

↓

New object created

↓

New object inherits prototype properties

↓

Add or override properties on new object

↓

Use new object with inherited and own properties

Create a new object that inherits from a given prototype object, then optionally add or override properties on the new object.

Execution Sample

Javascript

const proto = { greet() { return 'Hello'; } };
const obj = Object.create(proto);
obj.name = 'Alice';
console.log(obj.greet());
console.log(obj.name);

Creates an object that inherits a greet method from proto and adds a name property.

Execution Table

Step	Action	Evaluation	Result
1	Define proto object with greet method	proto = { greet: function }	proto object created
2	Create obj with Object.create(proto)	obj inherits from proto	obj created with proto as prototype
3	Add property name to obj	obj.name = 'Alice'	obj has own property name='Alice'
4	Call obj.greet()	obj.greet() looks up proto.greet()	returns 'Hello'
5	Access obj.name	obj.name is own property	returns 'Alice'
6	End of execution		All steps completed

💡 All steps executed; obj inherits from proto and has own property name

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
proto	{ greet() }	{ greet() }	{ greet() }	{ greet() }
obj	undefined	inherits proto	inherits proto, name='Alice'	inherits proto, name='Alice'

Key Moments - 3 Insights

Why does obj.greet() work even though greet is not defined directly on obj?

Because obj was created with proto as its prototype (see Step 2 and Step 4 in execution_table), so obj inherits greet from proto.

What is the difference between obj.name and obj.greet() in terms of where they come from?

obj.name is an own property added directly to obj (Step 3), while obj.greet() is inherited from proto (Step 4).

If we change proto.greet, will obj.greet() reflect the change?

Yes, because obj inherits greet from proto dynamically (see Step 4), so changes to proto.greet affect obj.greet.

Visual Quiz - 3 Questions

Look at the execution table, what does obj.greet() return at Step 4?

A Error

B undefined

C 'Hello'

D 'Alice'

💡 Hint

Check Step 4 in execution_table where obj.greet() calls proto.greet() and returns 'Hello'

At which step does obj get its own property 'name'?

A Step 3

B Step 4

C Step 2

D Step 1

💡 Hint

See Step 3 in execution_table where obj.name is assigned 'Alice'

If proto.greet is changed after obj creation, what happens when calling obj.greet()?

A obj.greet() still returns old value

B obj.greet() returns new value from proto

C obj.greet() becomes undefined

D obj.greet() throws an error

💡 Hint

Refer to key_moments about inheritance and dynamic lookup of proto properties

Concept Snapshot

Object.create(proto) makes a new object inheriting from proto.
New object can have own properties added.
Inherited properties are accessed via prototype chain.
Changes to proto affect all inheriting objects.
Useful for simple inheritance without classes.

Full Transcript

This visual execution shows how Object.create works in JavaScript. First, a prototype object proto is defined with a greet method. Then, obj is created using Object.create(proto), so obj inherits from proto. Next, obj gets its own property name set to 'Alice'. When obj.greet() is called, JavaScript looks up the greet method on proto and returns 'Hello'. Accessing obj.name returns 'Alice' directly from obj. This demonstrates how Object.create sets up inheritance, allowing obj to use proto's methods while having its own properties.