Prototype inheritance

Object inheritance in programming, there are class inheritance and prototype inheritance:

  1. The form of class inheritance is,extendsThe subclass has the attributes and methods of its parent class as follows:
// Here is the ES6 class syntax, which is syntactically the same as class inheritance, but is actually still prototypical inheritance
// But can illustrate the class inheritance pattern
class Animal {
  constructor (x, y) {
    this.x = x;
    this.y = y;
  }
  run () {
    console.log('running')}}class Dog extends Animal {
  constructor (x, y, z) {
    super(x, y)
    this.z = z; }}const dog1 = new Dog(1.2.3);
dog1.run();
console.log(dog1.x);
Copy the code
  1. Archetypal inheritance is another way of getting a property or method from a parent class. The key is to set the constructorprototypeProperties, as follows:
// constructor Animal
function Animal(x, y) {
  this.x = x;
  this.y = y
}
Animal.prototype.run = function () {
  console.log('running')}// Constructor Dog
function Dog (x, y, z) {
  Animal.apply(this, [x, y]);
  this.z = z;
}
Dog.prototype = new Animal();

const dog1 = new Dog(1.2.3);
dog1.run();
console.log(dog1.x);
Copy the code

The prototype

The previous section introduces prototype inheritance from the perspective of inheritance, but does not specify what a prototype is. The constructor’s prototype is only mentioned, so what is prototype? What does it do?

Let’s talk about prototypes and come back to what prototype does above.

In javascript, every Object has a hidden Object “[[Prototype]]”. This Object can be retrieved from target.__proto__ or object.getPrototype (target). This object is what we call a prototype.

Its function is to store some methods and properties, when the object based on it, access some properties or methods, they will come to the prototype to look up. As follows:

const animal = {
  run() {
    console.log('running'); }}const dog = {
  __proto__: animal
}

dog.run(); // We did not define the run method in dog
Copy the code

So that’s the prototype. Easy. So what is prototype and what does it do in the inheritance process?

The relationship between “class” and “instance of class” is just like the relationship between mold and concrete product in industrial production. A class is a mold, and an instance is a concrete product with the attributes and methods of the class copied by the class. The purpose of the inheritance object is to reuse some common method or property. The constructor’s prototype property is used to specify the prototype for the instance to be produced. Those properties or methods that the instance does not have are found here.

That is, there is a prototype, and then there is an object based on that prototype.

The constructor’s prototype and instance object’s prototype point to the same object.

Prototype chain

In the last two sections, we figured out what a prototype is and what the constructor prototype is. So what is the prototype chain?

As the saying goes: Everything is an object. So the prototype itself is also an object, if looking for properties or methods, to the prototype is not found, then go to the prototype to continue to look for the prototype. The javascript runtime environment presets some objects as prototypes, as shown in the following figure:

When you look for a property or method, you trace it up through the prototype, and you form a chain, called a prototype chain.

As for which stereotypes are preset in the runtime environment, how are they related, and why? Wait, you can check out this article: The Birth of the JavaScript world, really wonderful!