Javascript code reuse mode (2)

Javascript code reuse mode (2)
Class inheritance mode-the borrow constructor uses the borrow constructor method to obtain any number of parameters passed by the parent constructor from the sub-constructor. This mode uses the Parent constructor, which transmits sub-objects to bind to this and forwards any number of parameters: function Child (a, B, c, d) {Parent. apply (this, arguments);} In this method, you can only inherit the attributes added to this in the parent constructor, and cannot inherit the members added to the prototype. When using the borrow function constructor mode, the sub-object obtains a copy of the inherited Member, which is different from the method for obtaining reference only in the default prototype inheritance. You can refer to the following example: funciton Article () {this. tags = ['js', 'css '];} var article = new Article (); function BlogPost () {} BlogPost. prototype = article; var blog = new BlogPost (); function StaticPage () {Article. call (this);} var page = new StaticPage (); console. log (article. hasOwnProperty ('tags'); // trueconsole. log (blog. hasOwnProperty ('tags'); // falseconsole, log (page. hasOwnProperty ('tags'); // true the above two methods inherit Article (), The prototype mode allows the blog object to obtain its access to the tags attribute through prototype. Therefore, the blog object does not use article as its own attribute. Therefore, false is returned when hasOwnProperty () is called. the page object itself has a tags attribute, because when calling the parent constructor, the new object will obtain a copy of the tags member in the parent object, rather than reference. The following code shows the difference: blog. tags. push ('html '); page. tag. push ('php'); console. log (article. tags. join (','); // "js, css, html" in the code above, the sub-object blog modifies its tags attribute. In this way, the parent object article is also modified, because it is essentially a blog. tags and article. the tags points to the same array, but modifying the tags of the page does not affect the parent object article, because the page is inherited. tags is a copy created independently. Workflow about the prototype chain: function Parent (name) {this. name = name | "Adam";} Parent. prototype. say = {return this. name ;}; function Child (name) {Parent. apply (this, arguments);} var kid = new Child ("Patrick"); console. log (kid. name); // "Patric" console. log (typeof kid. say); // undefined the above Code does not use Child. prototype, which only points to an empty object. When the parent constructor is used, kid obtains its own attribute name and does not inherit the say () method. Inheritance is completed at one time. It only copies the attributes of the parent object and uses them as its own attributes. Therefore, the _ proto _ link is not retained. When using borrow constructor, you can use multiple constructor to implement multiple inheritance: function Cat () {this. legs = 4; this. say = function () {return "meaowww" ;};} function Bird () {this. wings = 2; this. fly = true;} function CatWings () {Cat. apply (this); Bird. apply (this);} var jane = new CatWings (); console. dir (jane); run result: fly true legs 4 wings 2 say function () borrow constructor disadvantages, obviously, cannot inherit any attributes and methods from the prototype, for example, the preceding Parent and Child examples. Multiple copies are also created for the methods defined by this on the parent constructor. The advantage is that the real copy of the members of the parent object can be obtained without the risk that the sub-object will overwrite the parent object. You can pass parameters and perform multiple inheritance. Class inheritance mode-borrow and set the prototype. This mode combines the previous two methods: Borrow the constructor first, and set the prototype of the sub-constructor to point to the instance created by a constructor. The Code is as follows: function Child (a, B, c, d) {Parent. apply (this, arguments);} Child. prototype = new Parent, the result object after the code is run can obtain a copy of the members of the parent object and point to the reusable function of the parent object (features implemented in prototype). At the same time, sub-objects can also pass any parameter to the parent constructor. This is the closest Implementation Method to Java or C. It can inherit everything from the parent object, and can also safely modify its own attributes, without the risk of modifying the parent object. The disadvantage is that the Parent constructor is called twice, which leads to low efficiency and its attributes are inherited twice, as shown in the following name: function Parent (name) {this. name = name | "Adam";} Parent. prototype. say = {return this. name ;}; function Child (name) {Parent. apply (this, arguments);} Child. prototype = new Parent (); var kid = new Child ("Patrick"); kid. name; // "Patrick" kid. say (); // "Patrick" delete kid. name; kid. say (); // "Adam" in the above Code. Say () is inherited. We can see that the name attribute is inherited twice. After deleting the copy of the name attribute of the kid itself, we can see that the output is the name produced by the prototype chain. the class inheritance mode-the shared prototype and the previous mode need to call the parent constructor two times. The following mode does not involve calling the parent constructor. The rule of this mode is that reusable members should be transferred to the prototype rather than in this. Therefore, for the purpose of inheritance, any attributes and methods to be inherited should be placed in the prototype, therefore, you can only set the prototype of the sub-object to the same as that of the parent object. The Code is as follows: function inherit (C, P) {C. prototype = P. prototype;} This mode provides a short and rapid prototype chain query, because all objects actually share a prototype. But this is also a drawback, because if a prototype is modified in a child object that exists under the Inheritance chain, it will affect all parent objects and ancestor objects. For example, the following sub-objects and parent objects share the same prototype and can access the say () method equally, but the sub-objects do not inherit the name attribute.