Prototype chain in Javascript - Step-by-Step Execution

Concept Flow - Prototype chain

Create object A

↓

Set prototype of A to B

↓

Access property on A

↓

Check if property in A

Yes No↓

Return

↓

Check if property in B

↓

Return

When accessing a property, JavaScript looks first on the object, then up its prototype chain until it finds the property or reaches null.

Execution Sample

Javascript

const parent = {a: 1};
const child = Object.create(parent);
child.b = 2;
console.log(child.a);
console.log(child.b);

Create an object 'child' with 'parent' as prototype, then access properties from both.

Execution Table

Step	Action	Object Checked	Property Searched	Found?	Result
1	Create object 'parent'	N/A	N/A	N/A	{a:1} created
2	Create object 'child' with prototype 'parent'	N/A	N/A	N/A	child created with prototype parent
3	Assign property 'b=2' to child	child	b	N/A	child.b = 2
4	Access child.a	child	a	No	Look in prototype
5	Access parent.a	parent	a	Yes	Value 1 found
6	Access child.b	child	b	Yes	Value 2 found
7	End	N/A	N/A	N/A	All properties accessed

💡 Property found or prototype chain ends at null

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 6	Final
parent	undefined	{a:1}	{a:1}	{a:1}	{a:1}	{a:1}	{a:1}
child	undefined	undefined	Object with prototype parent	Object with b=2	Object with b=2	Object with b=2	Object with b=2

Key Moments - 3 Insights

Why does child.a return 1 even though 'a' is not directly on child?

Because child’s prototype is parent, and JavaScript looks up the prototype chain to find 'a' in parent (see execution_table rows 4 and 5).

What happens if a property is not found on the object or any prototype?

JavaScript returns undefined after reaching the end of the prototype chain (null). This is shown in the exit_note.

Does assigning child.b = 2 affect the parent object?

No, child.b is its own property and does not change parent (see execution_table row 3).

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the property 'a' found when accessing child.a?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Check the 'Found?' and 'Result' columns for child.a access in steps 4 and 5.

According to variable_tracker, what is the value of 'child' after step 3?

A Undefined

B Object with prototype parent

C Object with b=2

D Object with a=1

💡 Hint

Look at the 'After Step 3' column for 'child' in variable_tracker.

If we tried to access child.c which does not exist, what would happen according to the prototype chain?

A Return value from parent.c

B Return undefined after checking all prototypes

C Throw an error

D Return null

💡 Hint

Refer to the exit_note about property not found in prototype chain.

Concept Snapshot

Prototype chain in JavaScript:
- Objects have a prototype link to another object.
- Property access checks own properties first.
- If not found, looks up the prototype chain.
- Stops when property found or prototype is null.
- Enables inheritance and shared properties.

Full Transcript

This visual trace shows how JavaScript uses the prototype chain to find properties. When accessing a property on an object, JavaScript first checks if the property exists directly on that object. If not found, it looks at the object's prototype, then the prototype's prototype, and so on until it finds the property or reaches the end of the chain (null). In the example, 'child' is created with 'parent' as its prototype. Accessing 'child.a' looks up to 'parent' where 'a' is found. Accessing 'child.b' finds 'b' directly on 'child'. This chain allows objects to share properties and methods efficiently.

Practice

1. What does the prototype chain in JavaScript help with?

easy

A. Sharing properties and methods between objects

B. Creating new variables automatically

C. Running code faster

D. Stopping code execution

Solution

1. Step 1: Understand prototype chain purpose

   The prototype chain allows objects to share properties and methods by linking them.

2. Step 2: Identify correct description

   Sharing properties and methods matches the prototype chain's role, unlike other options.

3. Final Answer:

   Sharing properties and methods between objects -> Option A

4. Quick Check:

   Prototype chain = Sharing properties and methods [OK]

Hint: Prototype chain shares properties/methods between objects [OK]

Common Mistakes:

• Thinking it creates variables
• Assuming it speeds up code
• Believing it stops code

2. Which of the following is the correct way to create an object with a specific prototype in JavaScript?

easy

A. let obj = prototypeObj.create();

B. let obj = Object.create(prototypeObj);

C. let obj = new Object(prototypeObj);

D. let obj = Object.prototype(prototypeObj);

Solution

1. Step 1: Recall Object.create syntax

   Object.create(prototypeObj) creates a new object with prototypeObj as its prototype.

2. Step 2: Check other options

   Other options use incorrect syntax or methods that don't exist.

3. Final Answer:

   let obj = Object.create(prototypeObj); -> Option B

4. Quick Check:

   Object.create() creates object with prototype [OK]

Hint: Use Object.create(prototype) to set prototype correctly [OK]

Common Mistakes:

• Using new Object() with prototype argument
• Calling create() on prototype object
• Trying to call Object.prototype as a function

3. What will be the output of this code?

const parent = { greet() { return 'Hello'; } };
const child = Object.create(parent);
console.log(child.greet());

medium

A. undefined

B. null

C. TypeError

D. 'Hello'

Solution

1. Step 1: Understand prototype lookup

   child has no greet method, so JavaScript looks up to parent where greet exists.

2. Step 2: Call greet method from parent

   Calling child.greet() runs parent.greet(), returning 'Hello'.

3. Final Answer:

   'Hello' -> Option D

4. Quick Check:

   Prototype lookup finds greet() = 'Hello' [OK]

Hint: If property missing, JS checks prototype chain [OK]

Common Mistakes:

• Expecting undefined because child lacks greet
• Thinking it causes error
• Assuming null is returned

4. Find the error in this code snippet:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.eats = false;
console.log(rabbit.eats);
console.log(animal.eats);

medium

A. No error; output is as expected

B. Object.create should not be used here

C. rabbit.eats does not override animal.eats

D. animal.eats is changed to false

Solution

1. Step 1: Understand property shadowing

   Setting rabbit.eats creates a new property on rabbit, shadowing animal.eats.

2. Step 2: Check outputs

   rabbit.eats logs false; animal.eats remains true. This is expected behavior.

3. Final Answer:

   No error; output is as expected -> Option A

4. Quick Check:

   Property shadowing works correctly [OK]

Hint: Setting property on child shadows parent's property [OK]

Common Mistakes:

• Thinking parent's property changes
• Believing Object.create is wrong here
• Expecting error from property override

5. You want to create a chain where child inherits from parent, and parent inherits from grandparent. Which code correctly sets this prototype chain?

hard

A. const grandparent = {};
const parent = Object.create(child);
const child = Object.create(parent);

B. const grandparent = {};
const parent = {};
const child = Object.create(parent);
child.__proto__ = grandparent;

C. const grandparent = {};
const parent = Object.create(grandparent);
const child = Object.create(parent);

D. const grandparent = {};
const parent = Object.create(grandparent);
const child = Object.create(grandparent);

Solution

1. Step 1: Set parent prototype to grandparent

   Using Object.create(grandparent) for parent sets grandparent as prototype.

2. Step 2: Set child prototype to parent

   Using Object.create(parent) for child sets parent as prototype, completing chain.

3. Step 3: Check other options

   B incorrectly overrides child's prototype to grandparent using __proto__, skipping parent; C creates a circular reference (child not defined when creating parent); D sets child directly to grandparent, skipping parent.

4. Final Answer:

   const grandparent = {}; const parent = Object.create(grandparent); const child = Object.create(parent); -> Option C

5. Quick Check:

   Prototype chain: child -> parent -> grandparent [OK]

Hint: Use Object.create in order from top to bottom [OK]

Common Mistakes:

• Setting child prototype to grandparent directly
• Reversing prototype chain order
• Using __proto__ instead of Object.create