Javascrip Succession Text Summary

JavaScript has a variety of inheritance patterns, summed up the use of the method is: The prototype chain transfer, the construction function of borrowing, object replication.

This article is very clear, let us understand: all JS objects from NULL, and through the prototype pointer and prototype object to implement inheritance.

The relationship between the constructor and the prototype object is as follows:

Each constructor has a prototype property, a prototype object that points to the function, and a constructor property in the prototype object that points back to the constructor. The object instance has a prototype pointer [[prototype]] (in Firefox, Safari, and Chrome, corresponding to the attribute Proto), pointing to the prototype object.
After you understand the prototype, you get to the point of succession.

1. Prototype chain inheritance

functionSupertype (){This.superproperty =true;} SuperType.prototype.getSuperValue =function ( return this.superproperty;} function SubType (this.subproperty = FALSE;} Subtype.prototype = new supertype (); //prototype chain inherits SubType.prototype.getSubValue = function (return  This.subproperty;} var instance = new subtype (); alert (Instance.getsupervalue ()) ; //true             

by Subtype.prototype=new Supertype (), the following three points are achieved:
A: Rewrite the prototype of subtype, and let the subclass prototype and the subclass constructor break the connection.
B: The subclass prototype is an instance of the parent class whose prototype pointer [[prototype]] points to the parent class's prototype object, which can be accessed along the prototype chain to the parent class's Method Getsupervalue ().
C: The subclass prototype is the parent class instance, through the parent class constructor, the subclass prototype inherits the parent class's property superproperty.
Finally, the subclass inherits the methods and properties of the parent class.
Problem with prototype chain inheritance:
The instance property of the parent class becomes the prototype property of the subclass, such as the superproperty above, which is shared by all instances of the class. This property is not a problem when it is a base type value, but if it is a reference type value (such as an array), then the property of instance 1 (such as a new value to the array push) is modified, and instance 2 is changed as well.
In other words, the instances are common and cannot maintain their individuality.

2. Constructor inheritance

function SuperType(name){     this.name = name;}function SubType(){ //继承了SuperType，同时还传递了参数 SuperType.call(this,"Nicholas"); this.age = 29;}var instance = new SubType();alert(instance.name); //"Nicholas"alert(instance.age); //29

by Supertype.call (this), the constructor of the parent class is called in the subclass constructor, and the child class instance is created to execute the subclass's constructor (with the constructor of the parent class), and the inheritance is completed. Of course, the child class and the parent class are not related to the prototype, and the subclass instance cannot access the properties and methods in the parent class prototype object.
Problem with constructor inheritance:
The method is defined in the constructor and cannot be used for function reuse. For example, there is a method GetName () in the parent class, and each time a subclass instance is created, a new GetName () is created, which can be verified by Instance1.getname ()!== instance.getname ().
This means that the instances retain their individuality, but cannot share the method.

3. Combining inheritance

functionSupertype (Name) {THIS.name = name;This.colors = ["Red","Blue","Green"];} SuperType.prototype.sayName =function) {alert (THIS.name);}functionSubtype (Name,age) {Inheritance attribute Supertype.call (This,name);Second call to Supertyper ()This.age = age;}Inheritance Method Subtype.prototype =New Supertype ();First Call Supertyper () SubType.prototype.constructor = subtype; SubType.prototype.sayAge =function (this.age);} var Instance1 = new subtype ( " Nicholas ", 29) Instance1.colors.push (//"Red", "Blue", "green", "Black" instance1.sayname (); //"Nicholas" instance1.sayage (); //29var instance2 = new SubType ( Span class= "hljs-string" > "Greg", 27); alert (instance2.colors); //"Red", "Blue", "Green" instance2.sayname (); //"Greg" instance2.sayage (); //27             

Inheriting a method by borrowing a constructor to inherit the property, the prototype chain. Combining the advantages of both, so that the examples are to maintain individuality, but also to share the method.
Problem with combinatorial inheritance:
Two times the constructor of the parent class is called. First time (A): Subtype.prototype=new supertype (), the subclass prototype object obtains the instance property of the parent class. Second time (B):
Supertype.call (this), when a subclass instance is created, invokes the parent class constructor, overriding the instance properties, masking the same name property on the prototype object.

4. prototype-Type Inheritance

functionObjectO) {functionF () {}; 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"               

Based on an object, a shallow copy is made through the object () function, and the resulting object instance is modified.
As you can see, this inheritance method does not have a parent class and a subclass, just copy the object to get the copy.
ES5 has the Object.create () method, which is the normalization of object () and can pass in two parameters: the object to be copied and the extra Property object (such as {Name:{value:greg}}, which overrides the same name property on the underlying object).
Problem with prototype inheritance:
As with the prototype chain inheritance, inherited properties are shared by all instances, and all instances change when the reference type value of an instance is changed.

5. Parasitic inheritance

functionCreateanother(original) {var clone = Object (original); clone.sayhi =  Function () {//enhance this object alert ( "HI");}; return clone; //return This object} var person = {Name: "Nicholas"; Friends:[ "Van"];} //Base Object var Anotherperson = Createanother (person); //new Object Anotherperson.sayhi (); //"HI"             

Parasitic and prototype methods are the same, copying a base object to get a new object, but instead it puts the modification of the object instance into the function and encapsulates the entire process (create, enhance, return).

6. Parasitic combined inheritance

functionInheritprototype (Subtype,supertype) {var prototype = object (Supertype.prototype);Create Object prototype.constructor = subtype;Enhanced object subtype.prototype = prototype;Specify Object}functionSupertype (Name) {THIS.name = name;This.colors = [" Red","Blue","green"];} SuperType.prototype.sayName = function () {alert (this.name);} function subtype (name,age) { //Inherit attribute Supertype.call (this,name); //Call only once Supertyper () this.age = age;} //Inheritance Method Inheritprototype (Subtype,supertype); SubType.prototype.sayAge = function () {alert (this.age);}        

As the name implies, this inheritance pattern is parasitic (copy) + Modular (prototype chain + constructor), combining several methods. Resolves an issue where combined inheritance two calls to the parent class constructor.

Javascrip Succession Text Summary