Javascript Inheritance – 6 inheritance methods in Javascript

Javascript Inherited operations need to have a parent class, let’s start with a prototype based constructor

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();

1. Prototype chain inheritance

function Child() {
    this.name = 'child';
}
Child.prototype = new Person();
var child = new Child();
console.log(child.job); 


console.log(child instanceof Person); 

Key point: subclass prototype is equal to instance of parent class Child.prototype = new Person()

Features:

1. The properties that an instance can inherit are the properties of the constructor of the instance, the properties of the constructor of the parent class, and the properties on the prototype of the parent class. (The new instance does not inherit the properties of the parent instance)

Note:

1. A new instance cannot pass the argument to parent class constructor
2. Single Inheritance
3. All new instances share the properties of the parent class instance. (Properties on the prototype are shared, one instance modifies the prototype properties, and the prototype properties of the other instance are also modified)

2. Borrow constructor

function Child() {
    Person.call(this, 'reng');
}
var child = new Child();
console.log(child.name); 
console.log(child instanceof Person); 
child.sayHello(); 

The key point: use call or apply to introduce the parent class constructor into the subclass function (self-execution (copy) of the parent class function in the subclass function) Person.call(this, ‘reng’)

Features:

1. Only inherits the properties of the parent class constructor, does not inherit the properties of the parent class prototype
2. Solved Prototype chain inheritance disadvantages: 1, 2, 3
3. Can inherit the properties of multiple constructors (calls can be multiple)
4. You can pass arguments to the parent instance in a child instance.

Note:

1. Can only inherit the properties of the parent class constructor
2. The multiplexing of constructors cannot be implemented. (recall every time you use it)
3. Each new instance has a copy of the constructor, bloated

3. Combined inheritance

Combination inheritance is a combination of Prototype chain inheritance and Borrowing constructor inheritance.

function Child(name) {
    Person.call(this, name);
}
Child.prototype = new Person();
var child = new Child('jia');
child.sayHello(); 
console.log(child instanceof Person); 

Key point: Combine the advantages of the two modes – call and reuse to the parent class

Features:

1. Can inherit the attributes on the parent class prototype, can pass parameters, can be reused
2. The constructor property introduced by each new instance is private

Note:

1. Called the parent class’s constructor twice (memory)
2. The subclass’s constructor replaces the parent class constructor on the prototype (call is equivalent to getting a copy of the parent class constructor)

4. Prototype inheritance

function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}
var super0 = new Person();
var super1 = object(super0);
console.log(super1 instanceof Person); 
console.log(super1.job);

The key point: wrap an object with a function, and then return the call to this function, this function becomes an instance or object that can directly add attributes

Features:

1. Similar to copying an object, wrapping it with a function

Note:

1. All instances inherit the properties on the prototype
2. Unable to implement multiplexing. (new instance properties are added later)

The Object.create() method specifies prototypal inheritance. This method takes two arguments, one as the object for the new object prototype and (optionally) an object that defines additional properties for the new object.

var anotherPerson = Object.create(new Person());
console.log(anotherPerson.job); 
console.log(anotherPerson instanceof Person); 

var anotherPerson = Object.create(new Person(), {
    name: {
        value: 'come on'
    }
});
anotherPerson.sayHello(); 

5. Parasitic inheritance

function object(obj) {
    function F(){}
    F.prototype = obj;
    return new F();
}
var sup = new Person();

function subobject(obj) {
    var sub = object(obj);
    sub.name = 'ming';
    return sub;
}
var sup2 = subobject(sup);

console.log(sup2.name); 
console.log(sup2 instanceof Person); 

The key point is to put a shell on the prototype inheritance.

Features:

1. I didn’t create a custom type, because I just put a shell and returned the object. This function is a newly created object.

Note:

1. No prototypes, no reuse

6. Parasitic combination inheritance

It is the same as Combined Inheritance.

Parasitic: return the object within the function and then call

Combination:

1. The prototype of the function is equal to another instance
2. Introduce another constructor with apply or call in the function

function object(obj) {
    function F(){}
    F.prototype = obj;
    return new F();
}

var obj = object(Person.prototype);




function Sub() {
    this.age = 100;
    Person.call(this); 
} 


Sub.prototype = obj;
console.log(Sub.prototype.constructor); 
obj.constructor = Sub; 
console.log(Sub.prototype.constructor); 
var sub1 = new Sub();

console.log(sub1.job); 
console.log(sub1 instanceof Person); 

Focus: Fixed a problem with combinatorial inheritance

In the above question, you may have found such a comment obj.constructor = Sub; Why correct the pointer to the constructor of the subclass?

Because when you do not correct this pointer, when you get the constructor return, it may cause confusion when calling the same name property or method value. For example below:

function Car() { }
Car.prototype.orderOneLikeThis = 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;              
BMW.prototype.advertise = function () {
    console.log("I am BMW with lots of uber features.");
}

var x5 = new BMW();

var myNewToy = x5.orderOneLikeThis();

myNewToy.advertise();

Reference

JavaScript Advanced Programming

Reng 99 Blog