JavaScript combination inheritance method code instance analysis

Javascript组合继承方法代码实例解析

Combined inheritance combined inheritance, refers to a combination of the technique of the prototype chain and the borrowing constructor to a piece, thereby exerting the two A long inheritance mode. Its behind the idea uses the original chain to achieve inheritance of the prototype attribute and method, and the inheritance of the instance attribute is achieved by constructive functions. In this way, the function multiplexing is implemented by defining methods on prototyping, but also ensures that each instance has its own properties.

Next example


function supertype (name) {this.name = name; this.color = [‘red’, ‘Blue’, ‘Green’];}; // supertype.prototype.sayname = function () {console.log (this.name);}; // function subtype (name, age) {// Inherit Property Supertype. Call (this, name); // Second call supertype // this.age = age;}; // Inherit method SUBTYPE.PROTYPE = new supertype (); // First call supertypeconsole.log (Subtype.Prototype .constructor); // source SuperType output function, i.e., at this time point SuperType SubType.prototype.constructor function SubType.prototype.constructor = SubType; // pointer back to the SubType.prototype.constructor SubType function SubType.prototype.sayAge = FUNCTION () {console.log (this.g);}; // var instance1 = new subtype (‘jake’, 20) instance1.color.push (‘black “; console.log (instance1.color); / /’RED, BLUE, Green, BLACKSTANCE1.SAYNAME (); // ‘jake’instance1.sayage (); // 20 // var instance2 = new subtype (‘ Greg ‘, 21); console.log (Instance2 .color); // ‘red, blue, green’instance2.sayname (); //’ greg ‘; instance2.sayage (); // 21
   Observation Output results, you can find that two subtype instances (instance1 and instance2) have their own properties, but also using the same way. 

Combined inheritance avoids the deficiencies of the prototype strand and the use of constructor, which combines their advantages, so it is the most common inheritance mode in JS. . Moreover, instanceOf and isprototypeOf () can also be used to identify objects based on combined inheritance.

Call two SUPERTYPE constructor

Create unnecessary attributes on Subtype.Prototype



function supertype (name) {this.name = nAme this.colors = [‘Red’, ‘Blue’, ‘Yellow’]} Supertype.Prototype.SAYNAME = Function ()} Function Subtype (Name, AGE) {Supertype.Call (SUPERTYPE.CALL This, name) // By constructor inheritance instance attribute this.Prototype = Object.create (supertype.prototype) // Inherited parent class sharing method Subtype.Prototype.Constructor = Subtype // will subtype.Prototype .Constructor pointer refers back the subtype function Subtype.Prototype.Sayage = function ()} let obj = new subtype (‘jake’, 22) obj.SAYNAME () // jakeobj.sayage () // 22console.log (Obj InstanceOf Subtype) // TrueConsole.log (Obj InstanceOf Supertype) // True

Advantages

Parasitic Combination Inherit is only called a SUPERTYPE, so it is more efficient
  to avoid unnecessary attributes on Subtype.Prototype  
below to talk about the original chain and constructor Disadvantages


Protocol chain


Disadvantages:When the reference type value is included in the original chain, the prototype attribute will be shared by all instances;


Next example


function supertype () {this.color = [‘red’, ‘blue’, ‘green’];} // function subtype ()}; // subtype.prototype = new supertype (); // Inherited Supertype // var instance1 = New subtype (); instance1.color.push (‘black “; console.log (instance1.color); //’ red, blue, green, black ‘// var instance2 = new subtype (); console.log Instance2.color); // ‘Red, Blue, Green, Black’
Borrowing Construction Function

Disadvantages: If only constructor is used The method is defined in the constructor, so the function cannot be reused. Moreover, the method defined in the super-type prototype is also invisible for subtypes.


The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment