When it comes to object-oriented programming in JS, there is a common denominator, the choice of prototype properties or constructors, both have pros and cons, and on the one-sided from the creation of JS object and the implementation of the two aspects of inheritance, the official recommendation is the combination of the two, do their duty, each take its long, in the previous example, I've made a few summaries of the way objects are created in JavaScript, and the following inheritance says one or two:
1: Prototype chain inheritance:
Each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains a pointer to the inside of the prototype object (the default prototype, all default types inherit object, and this inheritance is implemented using the prototype chain)
functionsupertype () { This. property =true; } SuperType.prototype.getSuperValue=function(){ return This. property; }; functionsubtype () { This. Subproperty =false; } //Inherit supertypeSubtype.prototype =Newsupertype (); SubType.prototype.getSubValue=function(){ return This. Subproperty; }; varInstance =Newsubtype (); alert (Instance.property); Alert (Instance.getsupervalue ()); Alert (Instance.getsubvalue ());
Problem with prototype inheritance:
1: The prototype attribute is shared by all instances of a change, and the rest is changed.
2: You cannot pass parameters to a super-type constructor When you create an instance of a subtype
Summary: In practice, the prototype chain is seldom used alone
(This seems to be the same as the problem with object creation)
2: Borrow constructor to create:
functionsupertype () { This. colors = ["Red", "Blue", "green"]; } functionsubtype () {//inherited the subtype.Supertype.call ( This); } varInstance1 =Newsubtype (); Instance1.colors.push ("Black"); alert (instance1.colors); ["Red", "Blue", "green", "black"]varInstance2 =Newsubtype () alert (instance2.colors); //["Red", "Blue", "green"]No, with an instance .
Changes to
//--------------------------------------------------------------------------//parameter passing: functionsupertype (name) { This. Name =name; } functionsubtype () {//inherits the Supertype, and also passes the parametersSupertype.call ( This, "Nicholas");//Instance Properties This. Age = 29; } varInstance =Newsubtype (); alert (instance.name); Nicholas alert (instance.age); in
Cons: methods are defined within the constructor, so the reuse of the function is impossible to talk about (what does it mean: groping).
Combination Inheritance:
//Combination Inheritance: functionsupertype (name) { This. Name =name; This. colors = ["Red", "Blue", "green"]; } SuperType.prototype.sayName=function() {alert ( This. Name); } functionsubtype (name, age) {//Inheritance properties: calling ConstructorsSupertype.call ( This, name);//Call Supertype () for the first time This. Age =Age ; } //Inheritance Method:Subtype.prototype =Newsupertype ();//second call to Supertype () SubType.prototype.constructor=subtype; SubType.prototype.sayAge=function() {alert ( This. Age); }; varInstance1 =NewSubtype ("Nicholas", 29); Instance1.colors.push ("Black"); alert (instance1.colors); Instance1.sayname (); Instance1.sayage (); varInstance2 =NewSubtype ("Greg", 27); alert (instance2.colors); Instance2.sayname (); Instance2.sayage ();
Naturally, this combination of creation also has its place, that is, to call the Supertype constructor two times, so that the instance properties colors and name of the repeated creation, the next time the creation of the nature will overwrite the previous.
With the derivation < parasitic combined inheritance >
On the code:
// Parasitic combined inheritance: function Inheritprototype (subtype, supertype) { var prototype = Object (supertype.prototype); The creation of an object prototype
A copy
//Add the constructor property to the created copy to point to its own constructor = subtype;
//Assign the newly created (copy) object to a prototype of the subtype Subtype.prototype=prototype; } functionsupertype (name) { This. Name =name; This. colors = ["Red", "Blue", "green"]; } SuperType.prototype.sayName=function() {alert ( This. Name); }; functionsubtype (name, age) {Supertype.call ( This, name); This. Age =Age ; } inheritprototype (subtype, supertype); SubType.prototype.sayAge=function() {alert ( This. Age); };
From the code, we can see that the value called a supertype constructor, although there is no unnecessary unnecessary property creation.
On the implementation of the inheritance in JavaScript