How JavaScript implements Inheritance (six ways) _javascript tips

Most OO languages support two types of inheritance: interface inheritance and implementation inheritance, while ECMAScript cannot implement interface inheritance, ECMAScript only supports implementation inheritance, and its implementation inheritance relies mainly on prototype chains.

1. Prototype chain

Basic idea: Use prototypes to make a reference type inherit properties and methods of another reference type.

Constructors, prototypes, relationships between instances: each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

Prototype chain Implementation Inheritance Example:

function supertype () {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {return
this.property;
}
Function subtype () {
this.property = false;
}
Inherited the supertype
subtype.prototype = new Supertype ();
SubType.prototype.getSubValue = function () {return
this.property;
}
var instance = new Subtype ();
Console.log (Instance.getsupervalue ());//true

2. Borrowing constructors

Basic idea: The superclass constructor is called inside the subtype constructor, and the constructor can be executed on the newly created object by using the call () and the Apply () method.

Example:

function supertype () {
this.colors = ["Red", "Blue", "green"];
}
Function subtype () {
supertype.call (this);//Inherits Supertype
}
var instance1 = new subtype ();
Instance1.colors.push ("Black");
Console.log (instance1.colors);//"Red", "Blue", "green", "Black"
var instance2 = new subtype ();
Console.log (instance2.colors);//"Red", "Blue", "green"

3. Combined inheritance

Basic idea: Combine the prototype chain with the technology that borrows the constructor to play a inheritance pattern of both.

Example:

function Supertype (name) {
this.name = name;
This.colors = ["Red", "Blue", "green"];
}
SuperType.prototype.sayName = function () {
console.log (this.name);
}
Function subtype (name, age) {
supertype.call (this,name);//inheritance property
This.age = age;
}
Inheritance method
Subtype.prototype = new Supertype ();
Subtype.prototype.constructor = subtype;
Subtype.prototype.sayAge = function () {
console.log (this.age);
}
var Instance1 = new Subtype ("Evanchen");
Instance1.colors.push ("Black");
Consol.log (instance1.colors);//"Red", "Blue", "green", "Black"
instance1.sayname ()/"Evanchen"
Instance1.sayage ();//18
var instance2 = new Subtype ("EvanChen666");
Console.log (instance2.colors);//"Red", "Blue", "Green"
instance2.sayname ();/"EvanChen666"
Instance2.sayage ();//20

4. Prototype inheritance

Basic idea: With prototypes, you can create new objects based on existing objects, and you don't have to create a custom type.

The idea of archetypal inheritance can be explained by the following functions:

function Object (o) {
function F () {}
f.prototype = O;
return new F ();
}

Example:

var person = {
Name: "Evanchen",
friends:["Shelby", "Court", "Van"];
var Anotherperson = object (person);
Anotherperson.name = "Greg";
AnotherPerson.friends.push ("Rob");
var Yetanotherperson = object (person);
Yetanotherperson.name = "Linda";
YetAnotherPerson.friends.push ("Barbie");
Console.log (person.friends)//"Shelby", "Court", "Van", "Rob", "Barbie"

ECMAScript5 normalized the stereotype inheritance with the new Object.create () method, which receives two parameters: an object that serves as a prototype for the new object and an object that defines additional attributes as a new object.

var person = {
Name: "Evanchen",
friends:["Shelby", "Court", "Van"];
var Anotherperson = object.create (person);
Anotherperson.name = "Greg";
AnotherPerson.friends.push ("Rob");
var Yetanotherperson = object.create (person);
Yetanotherperson.name = "Linda";
YetAnotherPerson.friends.push ("Barbie");
Console.log (person.friends)//"Shelby", "Court", "Van", "Rob", "Barbie"

5. Parasitic inheritance

Basic idea: Create a function that encapsulates only the inheritance process, which in some way enhances the object, and finally returns the object as if it were really doing all the work.

Example:

function Createanother (original) {
var clone = object (original);
Clone.sayhi = function () {
alert ("HI");
};
return clone;
}
var person = {
Name: "Evanchen",
friends:["Shelby", "Court", "Van"];
var Anotherperson = Createanother (person);
Anotherperson.sayhi ();///"HI"

6. Parasitic Modular inheritance

Basic idea: Inherit the attribute through the borrowing function, inherit the method through the hybrid form of the prototype chain

The basic model looks like this:

function Inheritproperty (subtype, supertype) {
var prototype = object (supertype.prototype);//Create Objects
Prototype.constructor = subtype;//Enhanced object
Subtype.prototype = prototype;//specified object
}

Example:

function Supertype (name) {
this.name = name;
This.colors = ["Red", "Blue", "green"];
}
SuperType.prototype.sayName = function () {
alert (this.name);
};
Function subtype (name,age) {
supertype.call (this,name);
This.age = age;
}
Inheritproperty (subtype,supertype);
SubType.prototype.sayAge = function () {
alert (this.age);
}

The above content for you to introduce JavaScript to achieve the inheritance of six ways, I hope to help you!