Understanding javascript object inheritance_javascript skills

Let’s start with a deeper study: What is JavaScript object inheritance?

For example, we have a constructor for the "animal" object.

  function animal() {
    this.type = '动物';
  }

There is also a constructor for the "cat" object.

  function cat(name,color) {
    this.name = name;
    this.color = color;
  }

We know that cats are also animals. If this cat object wants to inherit the attributes of the animal object, what should we do?

Constructor Binding
Using constructor binding is the simplest method. Just use call or apply to bind the parent object to the self object.

 function cat(name,color) {
    animal.apply(this,arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new cat("haha", 'red');
  console.log(cat1.type); //动物

However, this method is relatively rare.

Copy inheritance
If you copy all the properties and methods of the parent object into the child object, inheritance can also be achieved.

  function extend(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;   //桥梁作用
　　}

How to use:

 extend(cat, animal);
  var cat1 = new cat("haha","red");
  alert(cat1.type);   // 动物

Prototype inheritance (prototype)
Compared with the direct binding above, the prototype inheritance method is more common. Regarding prototype, I briefly summarized it myself.

Each function has a prototype attribute, which is a reference to an object. When using the new keyword to create a new instance, the instance object will inherit the properties and methods from the prototype object.

In other words, if the prototype attribute of the "cat" constructor points to an "animal" instance, then when the "cat" object instance is created, the properties and methods of the "animal" object will be inherited.

Inherited instance

 cat.prototype = new animal();
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.constructor == cat);  //true
  console.log(cat1.type); // 动物

1. In the first line of the code, we point the prototype object of the cat function to an instance of the animal object (which contains the type attribute of animal).

2. What does the second line of code mean?

1), first, if we did not add this line of code, run

cat.prototype = new animal();
console.log(cat.prototype.constructor == animal); //true
In other words, each prototype object actually has a constructor attribute pointing to its constructor.

2), let’s look at the code below

 cat.prototype = new animal();
  var cat1 = new cat("haha", 'red');
  console.log(cat1.constructor == animal);  //true

From the above we see that the constructor of instance cat1 is animal, so it is obviously wrong. . . cat1 is obviously generated by new cat(), so we should correct it manually. The constructor value of the cat.prototype object is changed to cat.

3), So this is something we should pay attention to. If we replace the prototype object, we should manually correct the constructor attribute of the prototype object.

o.prototype = {};
o.prototype.constructor = o;
Inherit prototype directly
Since in animal objects, immutable attributes can be written directly in animal.prototype. Then directly let cat.prototype point to animal.prototype to achieve inheritance.

Now we first rewrite the animal object as:

  function animal() {
  }
  animal.prototype.type = '动物';

Then implement inheritance:

 cat.prototype = animal.prototype;
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Compared with the previous method, this method is more efficient (no animal instance is created) and saves space. But is this the right thing to do? The answer is incorrect, let's keep looking.

cat.prototype = animal.prototype;
This line of code makes cat.prototype and animal.prototype point to the same object, so if a certain attribute of cat.prototype is changed, it will be reflected in animal.prototype, which is obviously not what we want to see.

For example, if we run:

console.log(animal.prototype.constructor == animal) //false
The result is false, why? cat.prototype.constructor = cat; This line will also change the constructor attribute of animal.prototype.

Use empty objects as intermediaries

  var F = function(){};
  F.prototype = animal.prototype;
  cat.prototype = new F();
  cat.prototype.constructor = cat;

Combining the above two methods, because F is an empty object, it takes up almost no memory. At this time, modifying the prototype object of cat will not affect the prototype object of animal.

console.log(animal.prototype.constructor == animal); // true
Then we encapsulate the above method:

  function extend(Child, Parent) {
　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

When using it, the method is as follows:

 extend(cat,animal);
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Child.uber = Parent.prototype; This line of code acts as a bridge, allowing the uber attribute of the child object to directly point to the prototype attribute of the parent object. This is equivalent to opening a channel called uber on the self-object, allowing instances of the child object to Ability to use all properties and methods of the parent object.

The above is my understanding of JavaScript object inheritance. I hope it can help you more or less. Thank you for reading.