JavaScript code Reuse Pattern Example Analysis _javascript skill

Source: Internet
Author: User
Tags hasownproperty

Any programming uses code reuse, otherwise every time you develop a new program or write a new feature, you need to write new words, that's a good break, but the code reuse is also bad, the next two articles we will discuss the code reuse, the first article avoids the article, refers to try to avoid using these patterns, Because more or less has brought some problems; the second row is recommended, refers to the recommended mode of use, generally will not have any problems.

Mode 1: Default mode
Code reuse common default mode, which is often problematic, creates an object using the constructor of parent () and assigns the object to the prototype of the child (). Let's take a look at the code:

Copy Code code as follows:

function inherit (C, p) {c.prototype = new P ();}
Parent constructor function Parent (name) {this.name = name | | ' Adam ';}
Add say functionality to the prototype Parent.prototype.say = function () {return this.name;};
The child constructor is an empty function child (name) {}
Execute 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: cannot allow arguments to be passed to the child constructor var s = new Child (' Seth '); Console.log (S.say ());
The disadvantage of this pattern of "Adam" is that the child is not able to pass in parameters and is essentially obsolete.


Mode 2: Borrowing constructors
The pattern is that the child uses the constructor of parent to apply, and then passes the this and parameters of the child to the Apply method:
Copy Code code as follows:

Parent constructor function Parent (name) {this.name = name | | ' Adam ';}
Add say functionality to the prototype Parent.prototype.say = function () {return this.name;};
Child constructor function Child (name) {parent.apply (this, arguments);} var kid = new Child ("Patrick"); Console.log (Kid.name);
"Patrick"/Disadvantage: Say Method Console.log (typeof Kid.say) is not inherited from constructors;
"Undefined" shortcomings are also obvious, say method is not available, because did not inherit over.


Mode 3: Borrow the constructor and set the prototype
Both of these models have their own shortcomings, then how to remove the shortcomings of both, we try to:
Parent constructor function Parent (name) {this.name = name | | ' Adam ';} Add say functionality to the prototype Parent.prototype.say = function () {return this.name;};/ /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);d elete Kid.name;console.log (Kid.say ()); "Adam" was running, everything was fine, but there was no discovery that the parent constructor was executed two times, so although the program is available, it is inefficient.

Mode 4: Shared prototypes
Shared prototypes refer to the same prototype used by the child and parent, as follows:
Copy Code code as follows:

function inherit (C, P) {c.prototype = P.prototype;}
Parent constructor function Parent (name) {this.name = name | | ' Adam ';}
Add say functionality to the prototype Parent.prototype.say = function () {return this.name;};
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); to be sure, the child's parameters are not properly received.


Mode 5: Temporary constructors
The constructor is first borrowed, then the child's prototype is set to an instance of the borrowed constructor, and finally the constructor of the child prototype is restored. The code is as follows:
Copy Code code 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 say functionality to the prototype Parent.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); False as usual, the child does not receive parameters correctly.

mode 6:klass
This mode, first the code bar:
var klass = function (Parent, props) {var child, F, I;//
1.//New Constructor child = function () {if (Child.uber && Child.uber.hasOwnProperty ("__construct")) {Child.uber.__const Ruct.apply (this, arguments); } if (Child.prototype.hasOwnProperty ("__construct")) {child.prototype.__construct.apply (this, arguments);}}; //
2.//Inheriting 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 ("Mans ' constructor"); this.name = what;}, Getname:fun Ction () {return this.name;}}); var-i = new Man (' Adam ');
Logs "man ' s Constructor" First.getname ();
"Adam" var Superman = Klass (man, {__construct:function (what) {Console.log ("Superman ' constructor");}, Getname:fun Ction () {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);

Look is not a little dizzy, say, the pattern of syntax and specification twist and other languages, you are willing to use it?

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.