JavaScript Inheritance Analysis

Tag: New does not initialize CAL Coder Parent Class A subclass of the Func construct

One, the traditional JS inheritance method:

1, prototype-type inheritance:

　　　　

//declaring a parent classfunction Person (name,age) { This. Name =name;  This. Age =Age ;  This. Flag =true;}//to add a method to a parent classPerson.prototype.sayName =function () {Console.log ( This. name);}//instantiating a parent classvarperson =NewPerson ('ZHL', -);//calling the parent class methodPerson.sayname ();//ZHL//declaring a subclassfunction Worker (name,age,work) { This. Name =name;  This. Age =Age ;  This. Work =Work ;}//prototype inheritance is actually a prototype of a subclass that points to an instance of the parent classWorker.prototype =NewPerson ();//add a method to a subclassWorker.prototype.sayWork =function () {Console.log ( This. Work);}//instantiate a subclassvarWorker =NewWorker ('Vsmart', +,'Itcoder');//Calling Subclass MethodsWorker.sayname ();//VsmartWorker.saywork ();//Itcoder

Seemingly can use, do not be happy too early, here is a lot of pits!

There are several drawbacks to this inheritance approach:

1, the declaration of the parent class and the subclass of the constructor has a lot of duplicate initialization assignment;

2, instantiating the object of the subclass the Flag property is True

However, the subclass of this property itself is not initialized, where does it come from?

Console.log (Worker.flag)//true
Console.log (Worker.prototype.flag)//true

Oh, originally found from the prototype of the subclass, that is, from an instance of the parent class obtained;

Originally we want to do attribute and method separation, now, this attribute actually in the prototype, the prototype should only put the method.

3, the subclass constructor constructor actually points to the constructor of the parent class, this pointing error will inevitably bring coupling

Console.log (worker.constructor)//

function Person (name,age) {    this. Name = name;      this. Age = Age ;      This true ;}

Combine the above points we want to do optimization;

1, we can borrow the constructor of the parent class to initialize the subclass's constructors to use apply or call to change the pointer to

2, we're going to re-change the constructor of the subclass to point to

　　

//declaring a parent classfunctionPerson (name,age) { This. Name =name;  This. Age =Age ;  This. Flag =true;}//to add a method to a parent classPerson.prototype.sayName =function() {Console.log ( This. name);}//instantiating a parent classvarperson =NewPerson (' ZHL ', 30);//calling the parent class methodPerson.sayname ();//ZHL//declaring a subclassfunctionWorker (name,age,work) {person.apply ( This, arguments); Borrowing parent class construction methods This. Work =Work ;  This. Flag =false;}//prototype inheritance is actually a prototype of a subclass that points to an instance of the parent classWorker.prototype =NewPerson ();//add a method to a subclassWorker.prototype.sayWork =function() {Console.log ( This. Work);}//Change Constructor PointWorker.prototype.constructor =Worker;//instantiate a subclassvarWorker =NewWorker (' Vsmart ', +, ' Itcoder ');//Calling Subclass MethodsWorker.sayname ();//VsmartWorker.saywork ();//ItcoderConsole.log (Worker.flag)//false//Sub-class own propertiesConsole.log (Worker.prototype.flag)//true to look up from the sub-class prototypeConsole.log (worker.constructor)//correct point to own construction method

function Worker (name,age,work) {
Person.apply (this,arguments);
This.work = Work;
This.flag = false;
}

2, Mixed copy inheritance:

The so-called hybrid copy inheritance refers to the way the constructor or the parent class is borrowed, but the method inheritance is the way to simulate the copy,

　　　　

//declaring a parent classfunctionPerson (name,age) { This. Name =name;  This. Age =Age ;  This. Flag =true;}//to add a method to a parent classPerson.prototype.sayName =function() {Console.log ( This. name);}//instantiating a parent classvarperson =NewPerson (' ZHL ', 30);//calling the parent class method//Person.sayname (); ZHL//declaring a subclassfunctionWorker (name,age,work) {person.apply ( This, arguments);  This. Work =Work ;  This. Flag =false;}//prototype inheritance is actually a prototype of a subclass that points to an instance of the parent classextends2 (worker.prototype,person.prototype);//add a method to a subclassWorker.prototype.sayWork =function() {Console.log ( This. work);} Copy Inheritance Core methodfunctionExtends2 (child,parent) { for(varattrinchparent) {        if(Parent.hasownproperty (attr)) {child[attr]=Parent[attr]; }    }}//instantiate a subclassvarWorker =NewWorker (' Vsmart ', +, ' Itcoder ');//Calling Subclass MethodsWorker.sayname ();//VsmartWorker.saywork ();//ItcoderConsole.log (Worker.flag)//false//Sub-class own propertiesConsole.log (Worker.prototype.flag)//false The subclass prototype did not find theConsole.log (Worker.constructor)///*function Worker (name,age,work) {person.apply (this,arguments);    This.work = Work; This.flag = false;}*/

　　

　　　　

JavaScript Inheritance Analysis