inheritance

Inheritance is one of the most discussed topics in object-oriented programming. Many object-oriented languages support two types of inheritance: interface inheritance and implementation inheritance. The former inherits only method signatures; the latter inherits the actual methods. Interface inheritance is not possible in ECMAScript because functions are not signed. Implementing inheritance is the only way ECMAScript supports inheritance, and this is mostly done through a chain of stereotypes.

1. The prototype chain

Ecma-262 (feel the Stetson, Lab 626) defines the stereotype chain as the main inheritance of ECMAScript. The basic idea is to inherit properties and methods of multiple reference types through a stereotype chain. Review the relationship between constructors, stereotypes, and instances: each constructor has a stereotype object, the stereotype has a property that points back to the constructor, and the instance has an internal pointer to the stereotype.

What if the stereotype is an instance of another type? That means that the stereotype itself has an internal pointer to another stereotype, and the corresponding stereotype has a pointer to another constructor. This creates a chain of stereotypes between the instance and the stereotype. 👇

Here two types are defined, SuperType and SubType:

SuperType:

Attribute 👇

function SuperType(){
    this.property = true;   
}
Copy the code

Methods 👇

SuperType.prototype.getSuperValue = function(){
    return this.property;
}
Copy the code

SubType:

Attribute 👇

function SubType(){
    this.subproperty = false;
}
Copy the code

Method 👇 where the prototype of SubType is an instance of SuperType, reassign its own SubType. Prototype implementation inheritance. So all properties and methods that SuperType can access will also exist in subType.prototype. I then created a new method for subtype. prototype.

  / / inherit the SuperType
  SubType.prototype = new SuperType();

  SubType.prototype.getSubValue = function(){
      return this.subproperty;
  }
Copy the code

Prototype can then point to the method getSuperValue(), which, like subtype.prototype, is the ancestor method. It is not stored on instance, but instance inherits properties from its ancestors, such as subProperty. The inherited instance and the constructor of the type both point to the topmost ancestor, SuperType.

1. Default type

There is another link in the stereotype chain, and by default, all reference types inherit from Object, which is also done through the stereotype chain. The default prototype of any function is an instance of Object. That is, the instance has an internal pointer to Object.prototype, which is why default objects have all default methods, including toString() and valueOf().

2. Relationship between prototype and inheritance

instanceof: see 👇

Why is there one herefalseI don’t know why. I’m going to ask the big guy. If YOU know the answer, write it up.

IsPrototypeOf () : This method can be called for each prototype in the prototype chain.

console.log(Object.prototype.isPrototypeOf(instance));	//true
Copy the code

3. About methods

Subclasses sometimes need to override methods of the parent class, or add methods that the parent class does not have. To do this, these methods must be added to the prototype after it has been assigned.

Just add methods directly to the prototype.

Creating a prototype literally breaks the previous prototype chain because it rewrites the prototype chain.

SubType.prototype = {
	nononono;
}

SubType.prototype = fucntion(){
	yeahyeahyeah;
}
Copy the code

4. Prototype chain problem

When you use stereotypes to implement inheritance, stereotypes actually become instances of another type, and their properties are stacked on top of other instances.

Prototype object: [1] Instance 1: Push 2 [1,2] Instance 2: console.log [1,2]Copy the code

A subtype cannot take arguments to the constructor of the parent type when instantiated. So prototype chains are rarely used alone.

2. Embezzle constructors

To solve inheritance problems caused by stereotypes containing reference values, a technique called “stolen constructors” became popular in the development community (” object spoofing “and” classical inheritance “). Call the superclass constructor in the subclass constructor. Because functions are, after all, simple objects that execute code in a particular context, you can use the apply() and call() methods to execute constructors in the context of the newly created object.

function SuperType(){
	this.color = ['red'.'blue']}function SubType(){
	/ / inherit the SuperType
    SuperType.call(this);
}

let instance1 = new SubType();
instance1.color.push('black');
console.log(instance1.color);

let instance2 = new SubType();
console.log(instance2.color);
Copy the code

1. Pass parameters

One advantage of using a stolen constructor over a prototype chain is that you can pass arguments to the superclass constructor in the subclass constructor.2. Disadvantages of embezzling constructors

The main drawback of embezzling constructors is also the problem of using constructor patterns to customize types: methods must be defined in constructors, so functions cannot be reused. In addition, subclasses cannot use methods defined on the parent class prototype, so all types can only use the constructor pattern.

3. Combinatorial inheritance

Composite inheritance combines the advantages of the first two approaches, using stereotype chains to inherit properties and methods from stereotypes and stealing constructors to inherit instance properties.

4. Original type inheritance

Parasitic inheritance

The idea behind parasitic inheritance is similar to the parasitic constructor and factory pattern: Create a function that implements inheritance to enhance objects in some way. The basic parasitic inheritance pattern is 👇

function createAnother(original){
    let clone = object(original);	// Create a new object with a function call
    clone.sayHi = function(){		// Enhance this function in some way
    	console.log('hi');
    };
    return clone;			// Return this function
}
Copy the code

Adding functions to objects through parasitic inheritance makes them difficult to reuse, similar to the constructor pattern.

6. Parasitic combination inheritance

Advanced Programming in JavaScript (4th edition)

Title styles from: juejin.cn/post/684490…

Where write wrong contact me 🐧 : 54269504