Understanding __proto__ vs prototype in JavaScript

1// Constructor function
2    function Person(name) {
3      this.name = name;
4    }
5
6    // Adding a method to the prototype
7    Person.prototype.sayHello = function() {
8      console.log(`Hello, I'm ${this.name}`);
9    };
10
11    // Creating an instance
12    const person = new Person('John');
13
14    // The relationship between __proto__ and prototype
15    console.log(person.__proto__ === Person.prototype); // true
16    console.log(person.sayHello()); // "Hello, I'm John"

1// Base class
2    function Animal(name) {
3      this.name = name;
4    }
5
6    Animal.prototype.makeSound = function() {
7      console.log('Some generic sound');
8    };
9
10    // Derived class
11    function Dog(name, breed) {
12      // Call the Animal constructor to initialize 'name' in the Dog instance
13      Animal.call(this, name); // <-- This ensures Dog instances get the 'name' property from Animal
14      this.breed = breed;
15    }
16
17    // Set up inheritance
18    Dog.prototype = Object.create(Animal.prototype);
19    Dog.prototype.constructor = Dog;
20
21    // Add Dog-specific method
22    Dog.prototype.bark = function() {
23      console.log('Woof!');
24    };
25
26    // Create instances
27    const dog = new Dog('Rex', 'German Shepherd');
28
29    // The prototype chain
30    console.log(dog.__proto__ === Dog.prototype); // true
31    console.log(dog.__proto__.__proto__ === Animal.prototype); // true
32    console.log(dog.__proto__.__proto__.__proto__ === Object.prototype); // true
33
34    // Method calls
35    dog.makeSound(); // "Some generic sound"
36    dog.bark(); // "Woof!"