What is the difference between __proto_

Brief Answer

proto is a property of every object that points to its prototype (who it inherits properties from). prototype is a property of functions that is used as a prototype for new objects created by that function. proto exists on all objects, prototype — only on functions.

Full Answer

The difference between proto and prototype is one of the most confusing topics in JavaScript. It’s important to understand that these are different things that work differently.

What is proto

It’s a property of any object that points to its prototype:

const obj = {};
console.log(obj.__proto__); // Object's prototype

What is prototype

It’s a property of functions that becomes the prototype for new objects:

function User() {}
console.log(User.prototype); // Prototype for new objects

Main Differences

proto

Exists on all objects
Points to current object’s prototype
Used for inheritance

prototype

Exists only on functions
Used as template for new objects
Defines what new objects will inherit

Simple Examples

Working with proto

const parent = { name: 'Parent' };
const child = Object.create(parent);
 
console.log(child.__proto__ === parent); // true
console.log(child.name); // 'Parent' — through __proto__

Working with prototype

function User(name) {
  this.name = name;
}
 
User.prototype.sayHello = function() {
  return 'Hello, ' + this.name;
};
 
const user = new User('John');
console.log(user.sayHello()); // 'Hello, John' — method from prototype

Important Features

1. Connection Between Them

function User() {}
 
const user = new User();
// user.__proto__ === User.prototype
console.log(user.__proto__ === User.prototype); // true

2. Inheritance Chain

function User() {}
User.prototype.method = function() {};
 
const user = new User();
// user → user.__proto__ (User.prototype) → Object.prototype → null

When to Use What

proto for Checking

const obj = {};
// Check object's prototype
console.log(obj.__proto__ === Object.prototype); // true

prototype for Extending

function Animal() {}
// Add method to all future objects
Animal.prototype.speak = function() {
  console.log('I am animal');
};

Common Mistakes

1. Confusion in Purpose

// ❌ Thinking they're the same
const obj = {};
console.log(obj.__proto__); // Object's prototype
console.log(obj.prototype); // undefined — objects don't have prototype
 
// ✅ Proper understanding
function Func() {}
console.log(Func.prototype); // Only functions have prototype

2. Changing prototype After Creation

// ❌ May not work as expected
function User() {}
const user = new User();
 
User.prototype.method = function() {};
// user may not have access to new method in some cases
 
// ✅ Better to add methods before creating objects

Simple Rules

proto — on all objects, points to prototype
prototype — only on functions, template for new objects
Connection — obj.proto === Func.prototype for new objects
Purpose — proto for inheritance, prototype for creation
Checking — use proto to see object’s prototype

Understanding the difference between proto and prototype helps better understand how inheritance works in JavaScript.

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪

What is the difference between __proto__ and prototype?