JavaScript __proto__ vs prototype: What Is the Difference?

         [Function: Animal]
              |
    Animal.prototype ← (this is where methods live)
         /        \
  [dog instance]  [cat instance]
  dog.__proto__ ──────────────┘
  cat.__proto__ ──────────────┘

function Animal(name) {
  this.name = name;   // Own property — on the instance
}
 
// Adding to Animal.prototype — available to all instances via chain
Animal.prototype.breathe = function () {
  return `${this.name} breathes`;
};
 
const dog = new Animal("Rex");
const cat = new Animal("Whiskers");
 
// PROTOTYPE: the property on the constructor function
console.log(typeof Animal.prototype);          // "object"
console.log(Animal.prototype.breathe);        // [Function: breathe]
 
// __proto__: the link on each instance
console.log(dog.__proto__ === Animal.prototype); // true — same object!
console.log(cat.__proto__ === Animal.prototype); // true — same object, shared!
 
// They point to the SAME prototype object:
console.log(dog.__proto__ === cat.__proto__);  // true
 
// Modifying Animal.prototype affects ALL instances:
Animal.prototype.speak = function () {
  return `${this.name} makes a sound`;
};
console.log(dog.speak()); // "Rex makes a sound" — picked up immediately
console.log(cat.speak()); // "Whiskers makes a sound"

function Animal(name) {
  this.name = name;
}
Animal.prototype.breathe = function () { return "breathing"; };
 
// new Animal("Rex") does this, roughly:
function simulateNew(Constructor, ...args) {
  // 1. Create a new object
  const instance = {};
 
  // 2. Set its [[Prototype]] to Constructor.prototype
  Object.setPrototypeOf(instance, Constructor.prototype);
  // This is what makes instance.__proto__ === Animal.prototype
 
  // 3. Call the constructor with this = instance
  const result = Constructor.apply(instance, args);
 
  // 4. Return the instance (or the constructor's return value if it's an object)
  return (typeof result === "object" && result !== null) ? result : instance;
}
 
const dog = simulateNew(Animal, "Rex");
console.log(dog.breathe()); // "breathing" — works exactly like new Animal

const obj = {};
console.log(obj.prototype);       // undefined — plain objects don't have .prototype
 
function fn() {}
console.log(fn.prototype);        // {} — functions DO have .prototype
 
const arr = [1, 2, 3];
console.log(arr.prototype);       // undefined — arrays are instances, not constructors
console.log(Array.prototype);     // [...] — Array is a constructor function

const proto = { greet() { return "hello"; } };
const obj = Object.create(proto);
 
console.log(Object.getPrototypeOf(obj) === proto); // true
console.log(obj.__proto__ === proto);               // true — same thing, different syntax

function Dog(name) { this.name = name; }
 
console.log(Dog.prototype.constructor === Dog); // true — points back to Dog
console.log(Dog.prototype.constructor.name);    // "Dog"
 
const rex = new Dog("Rex");
console.log(rex.constructor === Dog);           // true — via prototype chain
// rex doesn't have own property "constructor", inherits from Dog.prototype

// Replacing prototype breaks constructor
Dog.prototype = {
  bark() { return "woof"; },
};
// Dog.prototype.constructor is now Object (the {} literal's constructor)
 
const rex = new Dog("Rex");
console.log(rex.constructor === Dog);    // false — broken!
console.log(rex.constructor === Object); // true — wrong!
 
// Fix: restore constructor
Dog.prototype = {
  constructor: Dog, // Manually restore
  bark() { return "woof"; },
};

class Animal {
  constructor(name) { this.name = name; }
  breathe() { return `${this.name} breathes`; }
}
 
class Dog extends Animal {
  bark() { return `${this.name} barks`; }
}
 
const rex = new Dog("Rex");
 
// Same structure as function constructors:
console.log(rex.__proto__ === Dog.prototype);             // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true
 
// Methods live on the prototype objects:
console.log(Dog.prototype.hasOwnProperty("bark"));    // true
console.log(Animal.prototype.hasOwnProperty("breathe")); // true
console.log(rex.hasOwnProperty("bark"));              // false — it's on Dog.prototype

new Dog("Rex")
        |
        v
    rex (instance)
        |
    rex.__proto__ ────────────→ Dog.prototype
                                      |
                              Dog.prototype.__proto__ ──────→ Animal.prototype
                                                                     |
                                                          Animal.prototype.__proto__ ──→ Object.prototype
                                                                                                  |
                                                                                       Object.prototype.__proto__ → null