How to implement inheritance in JavaScript (listing 3 types in the previous chapter, we've explained that the best way to create a class is to define a property with a constructor and define the method with a prototype. ）

The first type: Object impersonation

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
    
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };    
}

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
objB.sayColor();
objB.sayName();

  Note: All new properties and new methods must be defined after the line of code for the new method has been deleted. Otherwise, the related properties and methods of the superclass may be overwritten: 

The second way: Use the call on the function object, apply method to implement inheritance.

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, arguments);

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
objB.sayColor();
objB.sayName();

The third type: Prototype Chain prototype Property object.

function ClassA() {
}

ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};

function ClassB() {
}

ClassB.prototype = new ClassA();

ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
    alert(this.name);
};

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

  Note: Call ClassA's constructor without passing parameters to it. This is standard practice in the prototype chain. Make sure that the constructor does not have any parameters .

In practical applications, there may be mixed modes:

(The main problem with impersonation is that you must use a constructor, which is not the best option.) However, if you use a prototype chain, you cannot use a constructor with parameters.)

in the previous chapter, we explained that the best way to create a class is to define a property with a constructor and define the method with a prototype. This approach also applies to the inheritance mechanism, using the object to impersonate the inheritance constructor property, using the prototype chain to inherit the method of the prototype object . Rewrite the previous example in either of these ways, with the following code:

function ClassA(sColor) {
    this.color = sColor;
}

ClassA.prototype.sayColor = function () {
    alert(this.color);
};

function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName;
} ClassB.prototype = new ClassA(); ClassB.prototype.sayName = function () {
    alert(this.name);
};


var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
objB.sayColor();
objB.sayName();

  Note: In the code highlighted in the first line, in the ClassB constructor, impersonate the ClassA class with an object that inherits the Scolor property. In the second line of highlighted code, the prototype chain inherits the method of the ClassA class. Because this hybrid uses the prototype chain, the instanceof operator can still run correctly.

Yang Zhiwang
Links: https://www.zhihu.com/question/20289071/answer/14644278
Source: Know
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

LZ to understand the existence of call and apply the reason, to remember a bit:
In JavaScript oop, we often define this:

function Cat () {
}
cat.prototype={
Food: "Fish",
Say:function () {
Alert ("I Love" +this.food);
}
}


var blackcat = new Cat;
Blackcat.say ();

But if we have an object Whitedog = {food: "Bone"}, we do not want to redefine it say method, then we can use call or Apply with Blackcat say method: BlackCat.say.call (Whitedog );

So, you can see that call and apply are in order to dynamically change this,when an object does not have a method, but the other one, we can use call or apply the method of other objects to manipulate。

Using more of the DOM selected by document.getElementsByTagNameA node is an array of arrays. It cannot apply methods such as Push,pop under the array. We can do this by:
var domnodes = Array.prototype.slice.call (document.getElementsByTagName ("*"));
This allows the domnodes to apply all the methods under the array.

Others do not mention, more and more confused.

How to implement inheritance in JavaScript (listing 3 types in the previous chapter, we've explained that the best way to create a class is to define a property with a constructor and define the method with a prototype. ）