JS __proto__ vs prototype: What Is the Difference?

The two prototype-related terms in JavaScript look like they should be the same thing, but they are not. The prototype property only exists on functions. The internal prototype link, exposed through proto, exists on every object instead. Confusing them is one of the most common stumbling blocks for intermediate JavaScript developers.

prototype: The Blueprint on Constructors

Every function that can be called with new has a prototype property, and that property is an object. When you call new on that function, the newly created object's internal prototype link is set to point at it.

javascript

function Person(name) {
  this.name = name;
}
 
Person.prototype.greet = function () {
  return `Hi, I am ${this.name}`;
};
 
const alice = new Person("Alice");
console.log(alice.greet()); // "Hi, I am Alice"

The prototype object on Person is an ordinary object. Adding methods to it makes them available to every instance created with new Person(). Alice does not have her own greet method; JavaScript finds it by walking up the chain to the shared prototype.

The diagram makes the relationship visual:

The function's prototype property and the instance's internal prototype link point to the same object. The function defines it. The instance links to it.

proto: The Link on Every Object

The proto accessor exposes the internal prototype link that exists on almost every object. You can read and, in theory, write it, but both are discouraged in favor of the standard Object.getPrototypeOf() and Object.setPrototypeOf() methods.

javascript

const parent = { color: "blue" };
const child = { __proto__: parent };
 
console.log(child.color); // "blue", inherited

When you access a property on child, JavaScript first looks for it on child itself. It is not there, so it follows the internal prototype link to parent, finds the property there, and returns it. This is the prototype chain: a linked list of objects that JavaScript walks until it finds the property or reaches the end.

The Key Rule

For any object created with a constructor, the object's internal prototype link is the constructor's prototype property. This holds whether you use a class, a regular function with new, or a built-in constructor.

javascript

function F() {}
const obj = new F();
 
console.log(Object.getPrototypeOf(obj) === F.prototype); // true
console.log(Object.getPrototypeOf([]) === Array.prototype); // true

That rule holds for every built-in type as well. An array's internal prototype link points to Array.prototype, a date's points to Date.prototype, and so on for every constructor JavaScript ships with.

What prototype Is NOT

A common misconception is that the prototype property is the prototype of the function itself. It is not: a function's own prototype, meaning where the function inherits from, is Function.prototype.

javascript

function greet() {
  return "hello";
}
 
console.log(Object.getPrototypeOf(greet) === Function.prototype); // true
console.log(Object.getPrototypeOf(greet) === greet.prototype); // false

Every function's own internal prototype link points to Function.prototype, because functions inherit methods like call and apply from there. The prototype property is a separate object that only matters when the function is used as a constructor.

Arrow Functions Have No prototype

Arrow functions cannot be used with new, so they do not have a prototype property.

javascript

const regular = function () {};
const arrow = () => {};
 
console.log(typeof regular.prototype); // "object"
console.log(arrow.prototype); // undefined

If you try to use an arrow function as a constructor, JavaScript throws a type error. This is one reason to choose a regular function or a class when you need to create instances.

The Full Prototype Chain

Every object in JavaScript is connected through its internal prototype link, forming a chain that ends at null. An array's chain goes through Array.prototype, then Object.prototype, then null.

javascript

const arr = [1, 2, 3];
console.log(Object.getPrototypeOf(arr) === Array.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null

Array methods like map and filter live on Array.prototype. General object methods like hasOwnProperty and toString live on Object.prototype. Every array inherits both sets of methods through the chain.

Setting the Prototype at Creation Time

The best time to set an object's prototype is when you create it, using Object.create().

javascript

const parent = { shared: true };
const child = Object.create(parent);
child.own = "value";
 
console.log(Object.getPrototypeOf(child) === parent); // true
console.log(child.shared); // true

Avoid Object.setPrototypeOf() after creation unless you have no other option. Changing the prototype of an existing object disrupts engine optimizations and can make property access noticeably slower.