Get straight to the point:

An inherited operation requires a parent class, which is created using a constructor and a prototype:

// super
function Person(name){
    this.name = name;
}
Person.prototype.job = 'frontend';
Person.prototype.sayHello = function() {
    console.log('Hello '+this.name);
}
var person = new Person('jia ming');
person.sayHello(); // Hello jia ming
Copy the code

Prototype chain inheritance

// Prototype chain inheritance
function Child() {
    this.name = 'child';
}
Child.prototype = new Person();
var child = new Child();
console.log(child.job); // frontend
// instanceof determines if an element is on another element's prototype chain
// Child is an instance of the Person class
console.log(child instanceof Person); // true
Copy the code

Key point: Subclass prototype equals parent instance child.prototype = new Person()

One of my previous articles talked about understanding prototype objects and prototype chains in depth

Features:

  1. Instance inheritable properties are: properties of the instance constructor, properties of the parent constructor, and properties on the parent stereotype. (The new instance does not inherit the attributes of the parent instance.)

Matters needing attention:

  1. The new instance cannot pass arguments to the parent constructor
  2. Inheriting the single
  3. All new instances share the attributes of the parent instance. (Attributes on the stereotype are shared; if a stereotype attribute is modified in one instance, the stereotype attribute in the other instance is also modified.)

Borrowing constructor

// borrow constructor inheritance
function Child() {
    Person.call(this.'reng');
}
var child = new Child();
console.log(child.name); // reng
console.log(child instanceof Person); // false
child.sayHello(); // Failed to inherit from the parent prototype
Copy the code

Person.call(this, ‘reng’) person.call (this, ‘reng’) person.call (this, ‘reng’)

As for the use of Call, apply, and bind in JavaScript, a previous article talked about call, apply, and bind.

Features:

  1. Only the properties of the superclass constructor are inherited, not the properties of the superclass prototype
  2. Solve the attention (disadvantage) of inheritance of prototype chain 1,2,3
  3. Properties of multiple constructors can be inherited (call can be multiple)
  4. A child instance can pass arguments to its parent

Matters needing attention:

  1. Only attributes of the parent constructor can be inherited
  2. Constructor reuse cannot be implemented. (Call it again every time you use it)
  3. Each new instance has a bloated copy of the constructor

Combination of inheritance

Combinatorial inheritance is a combination of stereotype chain inheritance and borrowed constructor inheritance.

// Combinatorial inheritance
function Child(name) {
    Person.call(this, name);
}
Child.prototype = new Person();
var child = new Child('jia');
child.sayHello(); // Hello jia
console.log(child instanceof Person); // true
Copy the code

Key point: Combines the best of both patterns — call to parent and prototype reuse

Features:

  1. Can inherit the attributes of the parent class prototype, can pass parameters, reusable
  2. The constructor properties introduced by each new instance are private

Matters needing attention:

  1. Constructor of parent class called twice (memory consumption)
  2. The subclass constructor replaces the parent constructor on the prototype (call gets a copy of the parent constructor).

Primary inheritance

// Encapsulate a function container to hold inherited stereotypes and output objects
function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}
var super0 = new Person();
var super1 = object(super0);
console.log(super1 instanceof Person); // true
console.log(super1.job); // frontend
Copy the code

Key point: Wrapping an object with a function and then returning a call to that function turns that function into an instance or object that you can add attributes to at will. Object.create() works this way.

Features:

  1. It’s like copying an object and wrapping it with a function

Matters needing attention:

  1. All instances inherit properties from the stereotype
  2. Reuse cannot be achieved. (New instance attributes are added later)

The ** object.create () method regulates primitive inheritance. ** This method takes two parameters, an object to be used as a prototype for the new object and (optionally) an object that defines additional properties for the new object.

// When passing a parameter
var anotherPerson = Object.create(new Person());
console.log(anotherPerson.job); // frontend
console.log(anotherPerson instanceof Person); // true
Copy the code
// Pass two parameters
var anotherPerson = Object.create(new Person(), {
    name: {
        value: 'come on'}}); anotherPerson.sayHello();// Hello come on
Copy the code

Parasitic inheritance

function object(obj) {
    function F(){}
    F.prototype = obj;
    return new F();
}
var sup = new Person();
// This is the type inheritance, pass parameters to the type inheritance shell
function subobject(obj) {
    var sub = object(obj);
    sub.name = 'ming';
    return sub;
}
var sup2 = subobject(sup);
// This function is declared to be an object to which attributes can be added
console.log(sup2.name); // 'ming'
console.log(sup2 instanceof Person); // true
Copy the code

Key point: is to give the original type inheritance outside a shell.

Features:

  1. I’m not creating a custom type, because I’m just putting a shell around it, and I’m returning an object, and this function becomes the new object that I’m creating.

Matters needing attention:

  1. No prototype, no reuse

Parasitic combinatorial inheritance

It is as common as combinatorial inheritance.

Parasitism: returns an object within a function and then calls

Combination:

  1. The prototype of a function is equal to another instance
  2. Use apply or call to introduce another constructor that takes arguments
/ / the parasitic
function object(obj) {
    function F(){}
    F.prototype = obj;
    return new F();
}
// object is another way to represent an instance of F
var obj = object(Person.prototype);
// The prototype of obj instance (F instance) inherits the prototype of the parent function
// The above is more like prototype chain inheritance, except that only the stereotype attributes are inherited

/ /
function Sub() {
    this.age = 100;
    Person.call(this); // This inherits the attributes of the parent constructor
} // Addresses the feature of the combined-two-call constructor property

/ / the key
Sub.prototype = obj;
console.log(Sub.prototype.constructor); // Person
obj.constructor = Sub; // Be sure to fix the instance
console.log(Sub.prototype.constructor); // Sub
var sub1 = new Sub();
// The Sub instance inherits the constructor attribute, the superclass instance, and the function attribute of object
console.log(sub1.job); // frontend
console.log(sub1 instanceof Person); // true
Copy the code

Important: Fixed a problem with composite inheritance

In the above question, you might have found the comment obj.constructor = Sub; // Be sure to fix the instance. Why correct the pointing of a subclass’s constructor?

Because without fixing this pointer, there could be confusion in calling the same property or method value when retrieving the constructor return. For example:

function Car() { }
Car.prototype.orderOneLikeThis = function() {  // Clone producing function
    return new this.constructor();
}
Car.prototype.advertise = function () {
    console.log("I am a generic car.");
}

function BMW() { }
BMW.prototype = Object.create(Car.prototype);
BMW.prototype.constructor = BMW;              // Resetting the constructor property
BMW.prototype.advertise = function () {
    console.log("I am BMW with lots of uber features.");
}

var x5 = new BMW();

var myNewToy = x5.orderOneLikeThis();

myNewToy.advertise(); // => "I am BMW ..." if `BMW.prototype.constructor = BMW; ` is not
                      // commented; "I am a generic car." otherwise.
Copy the code

Reference & later

  • www.cnblogs.com/Grace-zyy/p…

  • JavaScript Advanced Programming

  • This article introduces six inheritance methods in javascript

More content, please go to my blog, can give a thumbs-up is better 😄