Constructor functions in Javascript - Step-by-Step Execution

Concept Flow - Constructor functions

Call Constructor Function with new

↓

Create empty object

↓

Set this to new object

↓

Add properties/methods to this

↓

Return this object

↓

Store object in variable

↓

Use object

When you call a constructor function with 'new', JavaScript creates a new object, sets 'this' inside the function to that object, adds properties, then returns the object.

Execution Sample

Javascript

function Person(name) {
  this.name = name;
  this.greet = function() {
    return `Hi, I am ${this.name}`;
  };
}

const p = new Person('Anna');
console.log(p.greet());

Creates a Person object with a name and a greet method, then calls greet to show a message.

Execution Table

Step	Action	this value	Properties added	Result/Output
1	Call Person('Anna') with new	empty object {}	none yet	new empty object created
2	Assign this.name = 'Anna'	{}	name: 'Anna'	property 'name' added
3	Assign this.greet = function() {...}	{ name: 'Anna' }	greet: function	method 'greet' added
4	Return this object	{ name: 'Anna', greet: function }	all properties set	object returned and stored in p
5	Call p.greet()	{ name: 'Anna', greet: function }	none	returns 'Hi, I am Anna'

💡 Execution stops after greet method returns the greeting string.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
this	undefined	{}	{ name: 'Anna' }	{ name: 'Anna', greet: function }	{ name: 'Anna', greet: function }
p	undefined	undefined	undefined	undefined	{ name: 'Anna', greet: function }

Key Moments - 3 Insights

Why does 'this' inside the constructor refer to the new object?

Because when you call a function with 'new', JavaScript automatically sets 'this' to the new empty object being created, as shown in execution_table step 1.

What happens if you call the constructor function without 'new'?

Without 'new', 'this' does not point to a new object but usually to the global object or undefined, so properties won't be set on a new object. This is why step 1 is important.

Why does the greet method use 'this.name'?

Because 'this' inside greet refers to the object that called it (p), so it accesses the 'name' property of that object, as seen in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'this' after step 2?

A {} (empty object)

B undefined

C { name: 'Anna' }

D null

💡 Hint

Check the 'this value' column in execution_table row for step 2.

At which step is the greet method added to the object?

A Step 3

B Step 1

C Step 2

D Step 5

💡 Hint

Look at the 'Properties added' column in execution_table for when 'greet' appears.

If you forget to use 'new' when calling Person('Anna'), what will happen?

A A new object is created anyway

B 'this' will be undefined or global object, so properties won't be set correctly

C The greet method will still work normally

D JavaScript will throw a syntax error

💡 Hint

Refer to key_moments about what happens without 'new'.

Concept Snapshot

Constructor functions create objects using 'new'.
Inside, 'this' is the new object.
Add properties/methods to 'this'.
Return is automatic if no other object returned.
Use to make many similar objects easily.

Full Transcript

When you use a constructor function in JavaScript with the 'new' keyword, the language creates a new empty object and sets 'this' inside the function to that object. Then, properties and methods are added to 'this'. Finally, the object is returned and stored in a variable. For example, calling 'new Person("Anna")' creates an object with a 'name' property set to 'Anna' and a 'greet' method. Calling 'p.greet()' returns the greeting string. If you forget 'new', 'this' won't point to a new object, so properties won't be set correctly. This process helps you make many similar objects easily.