Learn JavaScript Object-oriented JavaScript implements inheritance in the way _javascript skills

The example of this article introduces the 6 kinds of ways that JavaScript can inherit, and share them for everyone's reference, the specific contents are as follows

1, the essence of the implementation of "prototype chain inheritance" is to rewrite the prototype object and replace it with a new type of instance. The constructor attribute of the prototype that is not actually subtype is rewritten, but the subtype prototype points to the prototype of another object--supertype, and the Construtor attribute of the prototype object points to the supertype

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

[Note 1] Carefully define the method, and the code to add the method to the prototype must be placed after the statement that replaces the prototype

function supertype () {
 this.property = true;
}
SuperType.prototype.getSuperValue = function () {return
 this.property;
};
Function subtype () {
 this.subproperty = false;
}
Inherited the supertype
subtype.prototype = new Supertype ();

Added new method
SubType.prototype.getSubValue = function () {return
 this.subproperty;
}
overriding method
SubType.prototype.getSuperValue = function () {return
 false;
}
var instance = new Subtype ();
Alert (Instance.getsupervalue ());//false

[Note 2] When you implement inheritance through a prototype chain, you cannot use object literals to create a prototype method that overrides the prototype chain

function supertype () {
 this.property = true;
}
SuperType.prototype.getSuperValue = function () {return
 this.property;
};
Function subtype () {
 this.subproperty = false;
}
Inherited the supertype
subtype.prototype = new Supertype ();

Adding a new method by using a literal method causes the previous line of code to be invalid
Subtype.prototype = {
 getsubvalue:function () {return
  this,subproperty;
 } ,
 someothermethod:function () {return
  false;
 }
};
var instance = new Subtype ();
Alert (Instance.getsupervalue ());//error

[Disadvantage 1] You cannot pass arguments to a superclass constructor when you create an instance of a subtype
[Disadvantage 2] a prototype property that contains a reference type value is shared by all instances

function supertype () {
 this.colors = [' Red ', ' blue ', ' green '];
}
Function subtype () {}
//Inherits supertype
Subtype.prototype = new Supertype ();
var Instance1 = new subtype ();
Instance1.colors.push (' black ');
alert (instance1.colors);//' Red,blue,green,black '
var instance2 = new subtype ();
alert (instance2.colors);//' Red,blue,green,black '

2. "Borrow constructor Inheritance (also known as spoofed object or classic inheritance)" calls the superclass constructor within the subtype constructor, so you can also perform constructors on future newly created objects by using the Apply () and call () methods

function supertype () {
 this.colors = [' Red ', ' blue ', ' green '];
}
Function subtype () {
 //Inherits Supertype
 Supertype.call (this);
}
var Instance1 = new subtype ();
Instance1.colors.push (' black ');
alert (instance1.colors);//' Red,blue,green,black '
var instance2 = new subtype ();
alert (instance2.colors);//' Red,blue,green '

[Advantages] Pass Parameters

function Supertype (name) {
 this.name = name;
}
Function subtype () {
 //Inherits Supertype, and also passes parameter
 supertype.call (this, "Nicholas");
 Instance property
 This.age =;
var instance = new Subtype ();
alert (instance.name);//"Nicholas"
alert (instance.age);//29 

[note] To ensure that the Supertype constructor does not override the properties of the subtype, you can add the properties that should be defined in the subtype after the superclass constructor is called

function Supertype (name) {
 this.name = name;
 This.age = n
}
Function subtype () {
 //instance property
 This.age =;
 Inherits the supertype and also passes the parameter
 supertype.call (this, "Nicholas");
}
var instance = new Subtype ();
The instance property is overridden as a property
alert (instance.age) of the Supertype constructor;//30

[Disadvantage 1] cannot implement function reuse
[Disadvantage 2] a method defined in a prototype of a superclass is also invisible to a subtype, with the result that all types can only use the constructor pattern
3, "Combinatorial inheritance (also known as pseudo-Classic inheritance)" combines the prototype chain with the technology that borrows the constructor, thus giving play to the long inheritance pattern. The idea behind it is to use the prototype chain to implement the inheritance of the prototype properties and methods, and to inherit the instance property by borrowing the constructor. In this way, both functions are reused by defining the methods on the prototype, and each instance has its own attributes, which becomes the most common inheritance pattern in JavaScript.

function Supertype (name) {
 this.name = name;
 this.colors = [' Red ', ' blue ', ' green '];
}
SuperType.prototype.sayName = function () {
 alert (this.name);
};
Function subtype (name,age) {
 //Inheritance Property
 Supertype.call (this,name);
 This.age = age;
}
Inheritance method
Subtype.prototype = new Supertype ();
SubType.prototype.constructor = subtype;
SubType.prototype.sayAge = function () {
 alert (this.age);
}
var Instance1 = new Subtype ("Nicholas");
Instance1.colors.push ("Black");
alert (instance1.colors);//' Red,blue,green,black '
instance1.sayname ();//"Nicholas"
instance1.sayage () ;//29
var instance2 = new Subtype ("Greg");
alert (instance2.colors);//' Red,blue,green '
instance2.sayname ();//"Greg"
instance2.sayage ();//27

[Disadvantage] In any case, the two-time superclass constructor is called: one time when the subtype prototype is created, and the other is inside the subtype constructor. The subtype eventually contains all instance properties of the superclass object, but it is not necessary to override these properties when calling the child type constructor.

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);//Second Call supertype ()
 this.age = age;
}
Subtype.prototype = new Supertype (); The first call to Supertype ()
SubType.prototype.constructor = subtype;
SubType.prototype.sayAge = function () {
 alert (this.age);
}; 

4, "Archetypal inheritance" can create new objects based on existing objects with prototypes, without having to create custom types. Essentially, object () performs a shallow copy of the object passed in.
[note] A prototype inheritance requirement must have an object that can be used as the basis for another object, and if so, pass it to the object () function, and then modify the resulting object according to the specific requirements

function Object (o) {
  function F () {};
  F.prototype = O;
  return new F ();
}
var person = {
  Name: "Nicholas",
  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");

alert (person.friends);//"Shelby,court,van,rob,barbie"

"4.1" "Object.create () method": ECMAScript5 the New Object.create () method standardizes prototype inheritance. This method receives two parameters: an object that is used as a prototype of the new object and (optionally) an object that defines additional attributes for the new object. Object.create () has the same behavior as the Object () method when passing in a parameter

function Object (o) {
 function F () {};
 F.prototype = O;
 return new F ();
}
var person = {
 Name: "Nicholas",
 friends:["Shelby", "Court", "Van"]
};
var Anotherperson = object.create (person);
Anotherperson.name = "Greg";
AnotherPerson.friends.push ("Rob");
var Yetanotherperson = object (person);
Yetanotherperson.name = "Linda";
YetAnotherPerson.friends.push ("Barbie");
alert (person.friends);//"Shelby,court,van,rob,barbie"

Attention The second parameter of the Object.create () method is the same as the second argument of the Object.defineproperties () method: Each property is defined by its own descriptor. Any property specified in this manner overwrites the property with the same name on the prototype object.

var person = {
 Name: "Nicholas",
 friends:["Shelby", "Court", "Van"]
};
var Anotherperson = object.create (person,{
 name: {
  value: "Greg"
 }
});
alert (anotherperson.name);//"Greg" 

"4.2" low version browser compatible Object.create () method

if (typeof object.create!= "function") {
 (function () {
  var F = function () {};
  Object.create = function (o) {
   if (Arguments.length > 1) {
    throw Error (' Second argument Noe supported ');
   }
   if (o = = null) {
    throw Error ("cannot set a null [[Prototype]]");
   }
   if (typeof o!= ' object ') {
    throw TypeError ("Arguments must is an object");
   }
   F.prototype = O;
   return new F ();
  }
 }) ();
} 

5. "Parasitic Inheritance" creates a function that encapsulates only the inheritance process, which in some way enhances the object, and finally, as it does all the work, returns the object
[Disadvantage] cannot implement function reuse

function Object (o) {
 function F () {};
 F.prototype = O;
 return new F ();
}
function Createanother (original) {
 var clone = object (original);//Create a new object by calling the functions
 Clone.sayhi = Functional () {// In some way to enhance this object
  alert ("HI");
 Return clone;//returns this object
}
var person = {
 Name: "Nicholas",
 friends: ["Shelby", "Court", "Van"]
};
var Anotherperson = Createanother (person);
Anotherperson.sayhi ()//"HI"

6, "Parasitic modular inheritance" by borrowing the constructor to inherit the property, through the prototype chain of the hybrid form to inherit the method. The basic idea behind it is that you do not have to invoke a superclass constructor to specify a subtype of a stereotype, and that all you need is a copy of the Super type prototype. In essence, it is the use of parasitic inheritance to inherit the superclass's prototype, and then assign the result to the subtype's prototype. Parasitic combined inheritance is the most ideal inheritance paradigm for reference types.

The high efficiency in this example is that it only calls one super constructor at a time, and thus avoids creating unnecessary, redundant attributes on the Subtype.prototype. At the same time, the prototype chain can remain unchanged.
function Object (o) {
 function F () {};
 F.prototype = O;
 return new F ();
}
function Inheritprototype (subtype,supertype) {
 var prototype = object (supertype.prototype);//Create Objects
 Prototype.constructor = subtype;//Enhanced object
 Subtype.prototype = prototype;//specified object
}
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;
}
Inheritprototype (subtype,supertype);
SubType.prototype.sayAge = function () {
 alert (this.age);
}

The above is the entire content of this article, JavaScript implementation of the way to inherit, thank you for reading, small series will make unremitting efforts!