REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Constructor Functions

AI & DATA SCIENCE // constructors

Constructor functions create objects when called with 'new'. By convention they start with uppercase. They set up 'this' as the new instance.

Syntax

function Person(name, age) {
  this.name = name;
  this.age  = age;
}
const alice = new Person('Alice', 30);

Deep Dive Course

When called with **new**, a constructor function: (1) creates a new empty object, (2) sets its `__proto__` to `Constructor.prototype`, (3) runs the function body with `this` = new object, (4) returns the object. Methods defined on `Constructor.prototype` are shared across all instances (memory efficient).

1Understanding Constructor Functions

When called with new, a constructor function: (1) creates a new empty object, (2) sets its __proto__ to Constructor.prototype, (3) runs the function body with this = new object, (4) returns the object. Methods defined on Constructor.prototype are shared across all instances (memory efficient).

💡

Modern JavaScript prefers class syntax over constructor functions — it's syntactic sugar over the same prototype mechanism but much more readable.

editor.html

function Animal(name, sound) {
  this.name  = name;
  this.sound = sound;
}
// Shared method on prototype
Animal.prototype.speak = function() {
  return `${this.name} says ${this.sound}`;
};

const dog = new Animal('Dog', 'woof');
const cat = new Animal('Cat', 'meow');
console.log(dog.speak()); // Dog says woof
console.log(cat.speak()); // Cat says meow

localhost:3000

2Practical Example

Here is a real-world application of Constructor Functions showing how it is used in production JavaScript code.

editor.html

// What 'new' actually does
function fakeNew(Constructor, ...args) {
  const obj = Object.create(Constructor.prototype);
  const result = Constructor.apply(obj, args);
  return result instanceof Object ? result : obj;
}

const p = fakeNew(Animal, 'Parrot', 'squawk');
console.log(p.speak());

localhost:3000

3Best Practices

Follow these guidelines when working with Constructor Functions:

1. Capitalize constructor function names

2. Add shared methods to Constructor.prototype

3. Prefer class syntax in modern code

⚠️

Tip: Modern JavaScript prefers class syntax over constructor functions — it's syntactic sugar over the same prototype mechanism but much more readable.

editor.html

function Animal(name, sound) {
  this.name  = name;
  this.sound = sound;
}
// Shared method on prototype
Animal.prototype.speak = function() {
  return `${this.name} says ${this.sound}`;
};

const dog = new Animal('Dog', 'woof');
const cat = new Animal('Cat', 'meow');
console.log(dog.speak()); // Dog says woof
console.log(cat.speak()); // Cat says meow

localhost:3000

Examples

Example 01Basic Usage

function Animal(name, sound) {
  this.name  = name;
  this.sound = sound;
}
// Shared method on prototype
Animal.prototype.speak = function() {
  return `${this.name} says ${this.sound}`;
};

const dog = new Animal('Dog', 'woof');
const cat = new Animal('Cat', 'meow');
console.log(dog.speak()); // Dog says woof
console.log(cat.speak()); // Cat says meow

Example 02Advanced Example

// What 'new' actually does
function fakeNew(Constructor, ...args) {
  const obj = Object.create(Constructor.prototype);
  const result = Constructor.apply(obj, args);
  return result instanceof Object ? result : obj;
}

const p = fakeNew(Animal, 'Parrot', 'squawk');
console.log(p.speak());

Best Practices

Capitalize constructor function names
Add shared methods to Constructor.prototype
Prefer class syntax in modern code

Interview Question

What happens when 'new' is called on a function?▼

Hint: Four steps: create, link, run, return.

new: (1) creates a new plain object, (2) sets the object's __proto__ to Constructor.prototype, (3) executes Constructor with 'this' = the new object, (4) returns the new object (unless the constructor explicitly returns a different object).

Exercises

MediumPractice using Constructor Functions in a real scenario.

View Solution

function Animal(name, sound) {
  this.name  = name;
  this.sound = sound;
}
// Shared method on prototype
Animal.prototype.speak = function() {
  return `${this.name} says ${this.sound}`;
};

const dog = new Animal('Dog', 'woof');
const cat = new Animal('Cat', 'meow');
console.log(dog.speak()); // Dog says woof
console.log(cat.speak()); // Cat says meow

Frequently Asked Questions

What happens when 'new' is called on a function?▼

Related Functions

ClassesPrototypesthisInheritance