JavaScript code reuse mode instance analysis

Code reuse is proposed for any programming. Otherwise, every time you develop a new program or write a new function, you need to write a new one. But code reuse is also good or bad, in the next two articles, we will discuss code reuse. In the first article, we will avoid using these models as much as possible, because there are more or less problems; the second row is the recommendation article, which refers to the recommended mode. Generally, there is no problem.

Mode 1: Default Mode
Code reuse is a common default mode, which is often problematic. This mode uses the Parent () constructor to create an object and assign the object to the Child () prototype. Let's take a look at the Code:

Copy codeThe Code is as follows: function inherit (C, P) {C. prototype = new P ();}
// Parent constructor function Parent (name) {this. name = name | 'Adam ';}
// Add the say function Parent. prototype. say = function () {return this. name;} to the prototype ;};
// The Child constructor is null. function Child (name ){}
// Execute the inheritance inherit (Child, Parent); var kid = new Child (); console. log (kid. say ());
// "Adam" var kiddo = new Child (); kiddo. name = "Patrick"; console. log (kiddo. say ());
// "Patrick" // disadvantage: The parameter cannot be passed to the Child constructor var s = new Child ('seth'); console. log (s. say ());
// The disadvantage of the "Adam" mode is that the Child cannot pass in the parameter, which is basically useless.

Mode 2: Borrow Constructor
In this mode, Child uses the constructor of Parent to apply, and then passes this and parameters of child to the apply method:Copy codeThe Code is as follows: // The Parent constructor function Parent (name) {this. name = name | 'Adam ';}
// Add the say function Parent. prototype. say = function () {return this. name;} to the prototype ;};
// Child constructor function Child (name) {Parent. apply (this, arguments);} var kid = new Child ("Patrick"); console. log (kid. name );
// "Patrick" // disadvantage: The say method console. log (typeof kid. say) is not inherited from the constructor );
// The disadvantage of "undefined" is obvious. The say method is unavailable because it is not inherited.

Mode 3: Borrow the constructor and set the prototype
The above two models both have their own shortcomings. How can we remove the disadvantages of the two models? Let's try:
// Parent constructor function Parent (name) {this. name = name | 'Adam ';} // Add the say function Parent to the prototype. prototype. say = function () {return this. name ;}; // The Child constructor function Child (name) {Parent. apply (this, arguments);} Child. prototype = new Parent (); var kid = new Child ("Patrick"); console. log (kid. name); // "Patrick" console. log (typeof kid. say); // functionconsole. log (kid. say (); // Patrickconsole. dir (kid); delete kid. name; co Nsole. log (kid. say (); // "Adam" is running normally, but have you found that the Parent constructor has been executed twice? Therefore, although the program is available, the efficiency is very low.

Mode 4: Shared prototype
A shared prototype means that Child and Parent use the same prototype. The Code is as follows:Copy codeThe Code is as follows: function inherit (C, P) {C. prototype = P. prototype ;}
// Parent constructor function Parent (name) {this. name = name | 'Adam ';}
// Add the say function Parent. prototype. say = function () {return this. name;} to the prototype ;};
// Child constructor function Child (name) {} inherit (Child, Parent); var kid = new Child ('Patrick '); console. log (kid. name );
// Undefinedconsole. log (typeof kid. say );
// Functionkid. name = 'Patrick '; console. log (kid. say ());
// Patrickconsole. dir (kid); are you sure it is the same? The Child parameter is not correctly received.

Mode 5: Temporary Constructor
First, borrow the constructor, set the Child prototype to the instance of the borrow constructor, and then restore the constructor of the Child prototype. The Code is as follows:Copy codeThe Code is as follows:/* closure */var inherit = (function () {var F = function () {}; return function (C, P) {F. prototype = P. prototype; C. prototype = new F (); C. uber = P. prototype; CC. prototype. constructor = C ;}} (); function Parent (name) {this. name = name | 'Adam ';} // Add the say function Parent to the prototype. prototype. say = function () {return this. name ;}; // Child constructor function Child (name) {}inherit (Child, Parent); var kid = new Child () ; Console. log (kid. name); // undefinedconsole. log (typeof kid. say); // functionkid. name = 'Patrick '; console. log (kid. say (); // Patrickvar kid2 = new Child ("Tom"); console. log (kid. say (); console. log (kid. constructor. name); // Childconsole. log (kid. constructor === Parent); // if the error is false, the Child cannot receive parameters normally.

Mode 6: klass
In this mode, go to the code first:
Var klass = function (Parent, props) {var Child, F, I ;//
1. // new constructor Child = function () {if (Child. uber & Child. uber. hasOwnProperty ("_ construct") {Child. uber. _ construct. apply (this, arguments);} if (Child. prototype. hasOwnProperty ("_ construct") {Child. prototype. _ construct. apply (this, arguments );}};//
2. // inherit ParentParent = Parent | Object; F = function () {}; F. prototype = Parent. prototype; Child. prototype = new F (); Child. uber = Parent. prototype; ChildChild. prototype. constructor = Child ;/
3. // Add Implementation Method for (I in props) {if (props. hasOwnProperty (I) {Child. prototype [I] = props [I];}
// Return the "class" return Child;}; var Man = klass (null, {_ construct: function (what) {console. log ("Man's constructor"); this. name = what;}, getName: function () {return this. name ;}}); var first = new Man ('Adam ');
// Logs "Man's constructor" first. getName ();
// "Adam" var SuperMan = klass (Man, {_ construct: function (what) {console. log ("SuperMan's constructor") ;}, getName: function () {var name = SuperMan. uber. getName. call (this); return "I am" + name ;}}); var clark = new SuperMan ('clark Kent '); Clark. getName ();
// "I am Clark Kent" console. log (clark instanceof Man );
// Trueconsole. log (clark instanceof SuperMan );

Is it a bit dizzy? Let's say it better. The syntax and norms of this mode are screwed in the same way as other languages. Would you like to use it?

Summary
Although the above six modes have implemented some functions under certain special circumstances, they all have their own shortcomings. Therefore, we should avoid using them in general.