了解原型 inheritance (Javascript)

Question

I'm trying to understand how prototypal inheritance works when using constructor functions in Javascript. Take the following code for example:

let Animal = function (name, species, birthYear) {
  this.name = name;
  this.species = species;
  this.birthYear = birthYear;
};

let spike = new Animal(`Spike`, `Dog`, 2000);

Animal.prototype.calculateAge = function () {
  let age = 2022 - this.birthYear;
  return age;
};

Animal.prototype.color = `brown`;

spike.calculateAge();
console.log(spike.color);
console.log(spike);

These last three lines are what I'm struggling to understand. Please let me know if my understanding is misguided at any point in my explanation.

I can call the calculateAge() method on the spike object because it inherited the method from the Animal prototype. Similarly, I can log spikes color property to the console because the spike object inherited the color property from the Animal prototype. When I inspect the spike object using console.log(), it has the properties of name, species, and birthYear that I defined, but there is also a prototype. Does this mean that the spike object contains the prototype, or is this simply identifying the prototype from which it inherited the aforementioned method and property? Also, I don't really feel like I understand what this Animal prototype is. I get that the code works and that's all well and good, but just what in the world is this Animal prototype thing? Is it its own object in and of itself?

Thank you for any explanation you can offer.

Answer 1

I think you should first deeply understand the object oriented paradigm behind Javascript.

Javascript is a prototype based object oriented programming language.

The operations are encoded in the prototype data structure in a prototype language, which is copied and updated at run time. However, a class is still the equivalence class for all objects with the same state space and methods when viewed abstractly. You're effectively creating an element of a new equivalence class when you add a method to the prototype.

So, why are you doing that? Mostly because it results in a run-time system that is straightforward, logical, and elegant. To create a new object or class, simply do a deep copy, which copies all of the data as well as the prototype data structure. Then you get inheritance and polymorphism for almost nothing: A method lookup always entails requesting a method implementation by name from a dictionary.

To be more specific, JavaScript is a prototype-based object-oriented language, which means it doesn't have classes and instead defines behaviors using constructor functions, which can then be reused using the prototype.