Platform under construction

Objects, Prototypes & Classes

Advanced

Constructors

Constructor functions create similar objects with new. They are older than class syntax, but still important to understand.

function Record(title) {
  this.title = title;
  this.createdAt = new Date();
}

const record = new Record("Dashboard");

Objects, Prototypes & Classes

A constructor function builds object instances.

A constructor function is called with new. JavaScript creates a new object, sets this to that object and returns it unless the constructor returns another object explicitly.

Constructor names usually start with a capital letter. That convention tells readers the function is meant to be called with new.

Methods should usually be placed on the constructor prototype instead of recreated inside every instance. Class syntax later gives a cleaner way to write the same idea.

new

Creates a new object and binds this inside the constructor.

Capital name

A convention for functions meant to be constructors.

Instance

An object created by a constructor.

Prototype methods

Shared methods for all instances.

Examples

Object code becomes clear when shape, state and behavior are visible.

Constructor plus shared prototype method

function Record(title) {
  this.title = title;
}

Record.prototype.getTitle = function () {
  return this.title;
};

Forgetting new

function Record(title) {
  this.title = title;
}

const item = Record("Overview");

// In strict mode this throws because this is undefined.

Code patterns

Reusable examples for quick reference.

These patterns focus on the pieces developers actually reuse: object literals, methods, constructors, prototypes, getters, copying, classes and inheritance.

Basic constructor

Assign instance properties through this.

function Record(title) {
  this.title = title;
}

const item = new Record("Overview");

Constructor with defaults

Set fallback values inside the constructor.

function Task(title, done = false) {
  this.title = title;
  this.done = done;
}

Prototype method

Share methods instead of recreating them.

function Record(title) {
  this.title = title;
}

Record.prototype.label = function () {
  return `Record: ${this.title}`;
};

instanceof

Check whether an object was created by a constructor.

const item = new Record("Overview");

console.log(item instanceof Record);

Rules that matter

Model data deliberately before adding behavior.

Objects are where JavaScript programs start to model real application state. Good object shape makes later functions, classes and UI updates much easier to maintain.

Use new with constructors

Constructor functions are designed for new.

Capitalize constructor names

Record and Task signal constructor intent.

Put shared methods on the prototype

Do not recreate the same method for every instance.

Prefer class for modern APIs

Class syntax is usually clearer for new code.

Keep constructors simple

Initialize state; avoid surprising side effects.

Validate required values

A constructor should not create unusable objects silently.

Production thinking

Object design decides how understandable the rest of the code can be.

Why does this matter?

Constructors explain how older JavaScript creates object instances and why prototypes matter.

Accessibility

Constructor-created UI models should still expose clear labels and state for rendering accessible interfaces.

Production note

Production code may still encounter constructor functions in libraries and legacy code. Knowing the pattern prevents confusion.

SEO note

Content models created by constructors should have predictable properties used by rendering code.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a createdAt property.
Add a second prototype method.
Remove new and read the error.

Practice assignment

Do this before moving to the next topic.

Write one constructor function.
Create two instances with new.
Add one shared method on the prototype.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Constructors.