Prototype inheritance in Javascript - Step-by-Step Execution

Concept Flow - Prototype inheritance

Create object A

↓

Assign prototype of A to object B

↓

Access property on B

↓

Check if property exists on B

↓

Return property

↓

Return property from A if found

↓

If not found, return undefined

When accessing a property on an object, JavaScript looks first on the object itself. If not found, it looks up the prototype chain until it finds the property or returns undefined.

Execution Sample

Javascript

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

This code creates a child object inheriting from parent and accesses properties from both child and parent.

Execution Table

Step	Action	Object Accessed	Property Looked Up	Found On	Value Returned
1	Create parent object	parent	-	-	-
2	Create child with prototype parent	child	-	-	-
3	Assign property b=2 on child	child	b	child	2
4	Access child.a	child	a	parent	1
5	Access child.b	child	b	child	2

💡 Property lookup stops when property is found or prototype chain ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
parent	{a:1}	{a:1}	{a:1}	{a:1}
child	undefined	prototype -> parent	prototype -> parent, b=2	prototype -> parent, b=2

Key Moments - 3 Insights

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

Because child inherits from parent via prototype. The lookup finds 'a' on parent as shown in execution_table step 4.

What happens if a property is not found on child or parent?

The lookup continues up the prototype chain until no prototype exists, then returns undefined. This is implied in the exit_note.

Does assigning child.b = 2 affect parent?

No, child.b is a direct property on child only, parent remains unchanged as shown in variable_tracker after step 3.

Visual Quiz - 3 Questions

Look at the execution_table step 4, where is property 'a' found when accessed on child?

A On parent

B On child

C Undefined

D On global object

💡 Hint

Check the 'Found On' column in step 4 of execution_table.

At which step is property 'b' assigned directly to child?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Action' column in execution_table for property assignments.

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

A Return value from parent if exists

B Throw an error

C Return undefined

D Return null

💡 Hint

Refer to the exit_note about property lookup stopping when property is not found.

Concept Snapshot

Prototype inheritance in JavaScript:
- Objects can inherit properties via prototype chain.
- Accessing a property checks own properties first.
- If not found, lookup continues up prototype chain.
- If property not found anywhere, returns undefined.
- Use Object.create(proto) to set prototype.

Full Transcript

Prototype inheritance means when you ask for a property on an object, JavaScript first looks on that object. If it doesn't find it, it looks on the object's prototype. This continues up the chain until the property is found or there are no more prototypes. In the example, child inherits from parent. So child.b is found directly on child, but child.a is found on parent. If a property is missing on both, the result is undefined.

Practice

1. What does prototype inheritance allow in JavaScript?

easy

A. Arrays to store only numbers

B. Functions to run faster

C. Variables to be private

D. Objects to share properties and methods

Solution

1. Step 1: Understand prototype inheritance concept

   Prototype inheritance allows one object to use properties and methods from another object.

2. Step 2: Match concept to options

   Only Objects to share properties and methods correctly describes sharing properties and methods between objects.

3. Final Answer:

   Objects to share properties and methods -> Option D

4. Quick Check:

   Prototype inheritance = share properties and methods [OK]

Hint: Prototype inheritance means sharing properties/methods [OK]

Common Mistakes:

• Thinking it speeds up functions
• Confusing with variable privacy
• Assuming it limits array types

2. Which syntax correctly creates an object that inherits from another object parentObj?

easy

A. const child = parentObj.create();

B. const child = new Object(parentObj);

C. const child = Object.create(parentObj);

D. const child = Object.inherit(parentObj);

Solution

1. Step 1: Recall correct syntax for prototype inheritance

   Use Object.create(parentObj) to create a new object inheriting from parentObj.

2. Step 2: Check options for correct method

   Only const child = Object.create(parentObj); uses Object.create correctly; others are invalid or incorrect.

3. Final Answer:

   const child = Object.create(parentObj); -> Option C

4. Quick Check:

   Object.create() creates inherited object [OK]

Hint: Use Object.create(parent) to inherit prototype [OK]

Common Mistakes:

• Using new Object(parentObj) which doesn't inherit
• Using non-existent Object.inherit method
• Calling create on parentObj instead of Object

3. What is the output of this code?

function Parent() { this.name = 'Parent'; }
Parent.prototype.greet = function() { return 'Hello from ' + this.name; };

function Child() { Parent.call(this); this.name = 'Child'; }
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const c = new Child();
console.log(c.greet());

medium

A. 'Hello from Parent'

B. 'Hello from Child'

C. undefined

D. TypeError: c.greet is not a function

Solution

1. Step 1: Understand property assignment in Child constructor

   Child calls Parent constructor to set this.name, then overwrites it with 'Child'.

2. Step 2: Check prototype chain and method call

   Child's prototype inherits from Parent.prototype, so greet() is available and uses this.name which is 'Child'.

3. Final Answer:

   'Hello from Child' -> Option B

4. Quick Check:

   Child instance uses own name 'Child' in greet() [OK]

Hint: Child overwrites name, greet uses Child's name [OK]

Common Mistakes:

• Assuming greet uses Parent's name
• Forgetting to call Parent.call(this)
• Not resetting Child.prototype.constructor

4. Find the error in this code that tries to set up prototype inheritance:

function Animal() { this.alive = true; }
Animal.prototype.breathe = function() { return 'breathing'; };

function Dog() { Animal.call(this); this.bark = function() { return 'woof'; } }
Dog.prototype = Animal.prototype;

const d = new Dog();
console.log(d.breathe());

medium

A. Dog.prototype should be Object.create(Animal.prototype)

B. Animal.call(this) should be Dog.call(this)

C. Dog.prototype.bark should be defined outside constructor

D. No error, code works fine

Solution

1. Step 1: Identify prototype assignment mistake

   Assigning Dog.prototype = Animal.prototype links both constructors to same prototype object, causing shared mutations.

2. Step 2: Correct way to inherit prototype

   Use Dog.prototype = Object.create(Animal.prototype) to create a new object inheriting from Animal.prototype without sharing it directly.

3. Final Answer:

   Dog.prototype should be Object.create(Animal.prototype) -> Option A

4. Quick Check:

   Use Object.create for prototype inheritance [OK]

Hint: Use Object.create to avoid shared prototype object [OK]

Common Mistakes:

• Assigning prototype directly instead of using Object.create
• Confusing call() usage
• Defining methods inside constructor unnecessarily

5. You want to create a Car object that inherits from Vehicle and adds a drive method. Which code correctly sets this up and calls drive on a Car instance?

hard

A. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { Vehicle.call(this); }
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;
Car.prototype.drive = function() { return 'driving'; };

const myCar = new Car();
console.log(myCar.drive());

B. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { this.wheels = 4; }
Car.prototype = Vehicle.prototype;
Car.prototype.drive = function() { return 'driving'; };

const myCar = new Car();
console.log(myCar.drive());

C. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { Vehicle.call(this); }
Car.prototype.drive = function() { return 'driving'; };

const myCar = new Car();
console.log(myCar.drive());

D. function Vehicle() { this.wheels = 4; }
Vehicle.prototype.move = function() { return 'moving'; };

function Car() { Vehicle.call(this); }
Car.prototype = Object.create(Vehicle.prototype);

const myCar = new Car();
console.log(myCar.drive());

Solution

1. Step 1: Set up inheritance correctly

   Use Vehicle.call(this) inside Car constructor to copy properties, then set Car.prototype = Object.create(Vehicle.prototype) to inherit methods.

2. Step 2: Add drive method and create instance

   Define drive on Car.prototype, then create instance and call drive().

3. Final Answer:

   Code in option A correctly sets inheritance and calls drive() -> Option A

4. Quick Check:

   Call parent, use Object.create, add method, then call [OK]

Hint: Call parent, Object.create prototype, add method, then use instance [OK]

Common Mistakes:

• Assigning prototype directly instead of Object.create
• Not calling Vehicle.call(this) in Car
• Forgetting to set constructor property
• Defining methods before setting prototype