How JavaScript Prototype Works: Constructors, Inheritance, and new

JavaScript objects can inherit properties from other objects through the prototype chain. You will learn the difference between a function’s .prototype property and an object’s actual prototype, what new does, and why methods placed on a constructor’s prototype are shared by every instance.

JavaScript uses prototype-based inheritance. Instead of copying all methods into each newly created object, an object can delegate property lookups to another object called its prototype.

A key distinction is important:

• A constructor function has a public .prototype property.
• Every object has an internal prototype link, commonly inspected with Object.getPrototypeOf(object).

When you use a constructable function with new, JavaScript creates a fresh object and sets that new object's internal prototype to the function's .prototype object.

function MyObject() {}

MyObject.prototype.test = function () {
  console.log("OK");
};

const obj = new MyObject();
obj.test();

obj does not have its own test property. When JavaScript evaluates obj.test, it first checks obj. It does not find test there, so it follows obj's prototype link to MyObject.prototype, where it finds the method.

This matters because all instances share one method function rather than each instance receiving a separate copy.

The original code is different:

const obj = new Object();
obj.prototype = {};

obj is an ordinary object, not a constructor function. Adding a property named prototype merely adds a normal property. It does not turn obj into something that can be called with new, and it does not change the prototype of any other object.

Modern JavaScript also has class syntax. Classes are not exactly the same as older constructor functions in every detail, but class methods are still stored on a prototype and instances still use prototype lookup.

Think of an object as a worker and its prototype as a shared instruction manual.

When you ask a worker for an instruction such as test:

1. The worker looks in its own pocket first (its own properties).
2. If it is not there, the worker checks the shared manual (its prototype).
3. If it is still not there, JavaScript checks that manual's prototype, continuing up the prototype chain.
4. If no object has the property, the result is undefined.

A constructor function's .prototype is the instruction manual that will be assigned to future objects created with new Constructor().

Adding a prototype label to an ordinary object is like putting an unused folder named “manual” in the worker's pocket. JavaScript does not treat that folder specially.

A constructor function is a function intended to create objects with new. By convention, its name starts with an uppercase letter.

function User(name) {
  this.name = name;
}

User.prototype.greet = function () {
  console.log(`Hello, ${this.name}!`);
};

const ada = new User("Ada");
const lin = new User("Lin");

ada.greet(); // Hello, Ada!
lin.greet(); // Hello, Lin!

ada and lin each have their own name value. However, they share the same greet function:

console.log(ada.greet === lin.greet); // true
console.log(Object.getPrototypeOf(ada) === User.prototype); // true
console.log(ada.hasOwnProperty("greet")); // false

What new does

For this expression:

const ada = new User("Ada");

JavaScript broadly does the following:

1. Creates a new empty object.
2. Sets its internal prototype to User.prototype.
3. Calls User with this set to the new object.
4. Returns that object, unless User explicitly returns another non-primitive object.

You can also create an object with a chosen prototype directly:

const animalMethods = {
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
};

const dog = Object.create(animalMethods);
dog.name = "Milo";
dog.speak(); // Milo makes a sound.

Here, Object.create(animalMethods) sets animalMethods as dog's prototype.

Consider this code:

function Counter(start) {
  this.value = start;
}

Counter.prototype.increment = function () {
  this.value += 1;
};

const counter = new Counter(5);
counter.increment();
console.log(counter.value);

Step by step:

1. JavaScript evaluates new Counter(5).
2. It creates a new empty object.
3. It links that object's internal prototype to Counter.prototype.
4. It runs Counter(5) with this set to the new object.
5. this.value = start stores an own property on the new object, so it becomes { value: 5 } conceptually.
6. The new object is assigned to counter.
7. JavaScript evaluates counter.increment.
8. counter does not have its own increment property, so JavaScript checks Counter.prototype.
9. It finds increment and calls it with this set to counter.
10. The method changes counter.value from 5 to 6.
11. The final console.log prints 6.

The method is inherited, but the state it changes belongs to the individual counter object.

Prototype lookup is used constantly in JavaScript, including when you do not explicitly write .prototype.

• Array methods: Arrays inherit methods such as map, filter, and push from Array.prototype.

  const prices = [10, 20, 30];
  const withTax = prices.map(price => price * 1.2);
  

• String methods: Strings can use methods such as includes because JavaScript provides methods through String.prototype.

  "admin@example.com".includes("@"); // true
  

• Domain models: A server-side app might create User, Order, or Invoice objects with shared behavior.

• Reusable browser components: Shared methods can validate form data, format values, or update component state.

• Custom data structures: A Queue or Timer constructor can keep per-instance data while exposing shared methods on its prototype.

In modern codebases, developers often write class syntax, factory functions, or plain objects. Understanding prototypes is still essential because JavaScript's property lookup and many built-in APIs rely on them.

Class syntax uses prototypes

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}`;
  }
}

const user = new User("Ada");
console.log(user.greet());
console.log(Object.getPrototypeOf(user) === User.prototype); // true

The greet method is on User.prototype, not copied onto every User instance.

Prefer own data and prototype methods

A common constructor pattern keeps instance-specific data on this and shared behavior on the prototype:

function Session(token) {
  this.token = token;
}

Session.prototype.isAuthenticated = function () {
  return this.token.length > 0;
};

Use guard clauses in methods

Methods commonly validate input before performing work:

function BankAccount(balance) {
  this.balance = balance;
}

BankAccount.prototype.withdraw = function (amount) {
  if (!Number.isFinite(amount) || amount <= 0) {
    throw new Error("Amount must be a positive number.");
  }

  if (amount > this.balance) {
    return false;
  }

  this.balance -= amount;
  return true;
};

Avoid modifying built-in prototypes in application code

Changing Array.prototype, Object.prototype, or other built-in prototypes can affect unrelated code and third-party libraries. Prefer standalone utility functions or your own types.

Treating an ordinary object as a constructor

This is broken because obj is not callable or constructable:

const obj = new Object();
const obj2 = new obj(); // TypeError: obj is not a constructor

Use a function or class with new, or use Object.create when you already have a prototype object.

Assuming .prototype is every object's prototype

const person = { name: "Ada" };
person.prototype = { greet() {} };

This creates an ordinary own property called prototype. It does not set the prototype used for property lookup.

Inspect the actual prototype with:

Object.getPrototypeOf(person);

Replacing a constructor's prototype without restoring constructor

function User() {}

User.prototype = {
  greet() {
    console.log("Hello");
  }
};

This works for inheritance, but User.prototype.constructor now points to Object through inheritance rather than directly to User. If that property matters to your code, restore it:

User.prototype = {
  constructor: User,
  greet() {
    console.log("Hello");
  }
};

Putting mutable values on the prototype unintentionally

function Playlist() {}
Playlist.prototype.songs = [];

const first = new Playlist();
const second = new Playlist();
first.songs.push("Song A");

console.log(second.songs); // ["Song A"] — shared array

Put per-instance arrays and objects in the constructor instead:

function Playlist() {
  this.songs = [];
}

Losing this when extracting a method

const user = new User("Ada");
const greet = user.greet;
greet(); // `this` is not `user`

Call the method through the object (user.greet()), bind it (user.greet.bind(user)), or use an arrow wrapper where appropriate.

Changing a prototype after instances exist without understanding the effect

Existing instances generally see newly added methods because they reference the same prototype object:

User.prototype.logout = function () {};

But if you replace User.prototype entirely, old instances keep their link to the old prototype while new instances use the replacement.

Constructor function vs class

function Car(make) {
  this.make = make;
}
Car.prototype.drive = function () {
  return `${this.make} is driving`;
};

class Car {
  constructor(make) {
    this.make = make;
  }

  drive() {
    return `${this.make} is driving`;
  }
}

Both approaches create instances that can find drive through Car.prototype. Classes are usually clearer for new code, while constructor functions are common in older JavaScript.

Prototype inheritance vs cloning

Instances are not normally full clones of a constructor or its prototype. Each instance is a separate object that delegates missing property lookups to its prototype. This is why shared methods can exist once and be available to many instances.

• A prototype is an object another object can delegate property lookups to.
• Object.getPrototypeOf(obj) reads an object's actual prototype.
• Constructor.prototype is used by new Constructor() to set the new object's prototype.
• Put per-instance state in the constructor with this.
• Put shared methods on Constructor.prototype.

function User(name) {
  this.name = name; // unique per instance
}

User.prototype.greet = function () { // shared method
  return `Hello, ${this.name}`;
};

const user = new User("Ada");
user.greet();

Useful checks:

Object.getPrototypeOf(user) === User.prototype; // true
user.hasOwnProperty("name"); // true
user.hasOwnProperty("greet"); // false

Important rules:

• An ordinary object's obj.prototype is just a normal property unless some code uses it.
• Do not store mutable per-instance values, such as arrays, on a shared prototype.
• Adding a method to an existing prototype is visible to instances linked to that prototype.
• Replacing a constructor's .prototype does not update existing instances.
• class methods are prototype methods.

What is the difference between .prototype and __proto__ in JavaScript?

A function's .prototype is the object that new uses for future instances. __proto__ is a legacy accessor for an individual object's internal prototype. Prefer Object.getPrototypeOf(obj) instead of __proto__.

Does every JavaScript object have a .prototype property?

No. Functions commonly have a .prototype property. Ordinary objects may have a property with that name, but it has no automatic prototype behavior. Every ordinary object can have an internal prototype link, though objects made with Object.create(null) have no prototype.

Does new copy methods from the prototype?

No. new links the new object to the constructor's prototype. Methods are found later through property lookup, so they are normally shared rather than copied.

Why are prototype methods memory-efficient?

One method function can be stored on the prototype and used by all instances. If the method were created inside the constructor, each instance would usually receive a separate function object.

Can I use prototypes without new?

Yes. Use Object.create(prototypeObject) to make an object that delegates to a specific prototype.

Are JavaScript classes prototype-based?

Yes. Class syntax provides a more structured way to define constructor behavior and prototype methods. Instances of a class still use a prototype chain.

Should I use constructor functions or classes?

For most new code that needs this style of object modeling, use class syntax for readability. Learn constructor functions and prototypes because they explain how the language works and appear in older code.

What happens if an object and its prototype have the same property name?

The object's own property wins. It shadows the prototype property until you delete or change the own property.

• JavaScript objects — Prototypes define how objects find inherited properties.
• Constructor functions — Functions used with new to create objects linked to a shared prototype.
• The new operator — Creates an object and sets its prototype link.
• JavaScript classes — Modern syntax built around constructors and prototype methods.
• Object.create() — Creates objects with an explicitly chosen prototype.
• Property lookup and shadowing — Explains why own properties take priority over inherited ones.
• this in JavaScript — Prototype methods depend on how they are called to determine this.
• Inheritance — Prototype chains provide JavaScript's built-in inheritance mechanism.