JavaScript Learning Notes (iii)--implementation of inheritance

Source: Internet
Author: User

first, JavaScript implements the three-layer meaning of inheritance:  instances of the ① subclass can share methods of the parent class;② subclasses can override the methods of the parent class or extend a new method;both the ③ subclass and the parent class are instances of subclasses. Second, the implementation of several methods of inheritance: 1. Prototype chain inheritanceExample: function Box () {//inherited functions are called super (parent) type;this.name = "Andy";     }function Desk () {//inherited functions are called subtypesthis.age = +;     }Desk.prototype = new Box (); Give desk information and prototype information in box constructionvar desk = new Desk ();alert (desk.name); return Andy; Desk.prototype.name = "Jack";//Overrides a property in the parent typevar desk2 = new Desk (); alert (desk2.name); Back to Jack;  PS: ① As in the example above, if a subtype is to override a method or property in a parent type, the code added to the prototype must be placed after the statement that replaced the prototype. ② cannot create prototype objects with literal literals when inheriting through a prototype chain, which overrides the prototype chain      2. Object Impersonation method (i.e. borrowing constructor)resolves an issue where reference sharing and hyper-type cannot be passed, inherited by the "object impersonation" technique. Example: function Box (name,age) {this.name = "Andy";this.age = +;this.family = ["elder sister", "elder brother", "sister"];       } function Desk (name,age) {Box.call (this,name,age)//desk posing as Box      }   var desk = new Desk ();alert (desk.name); Back to Andyalert (desk.family); Back to sister, brother, sister  PS:Both the ①call and the apply methods can be inherited, and the second parameter is different, and call is a list of arguments.the second argument to apply is an array. Example: Box.call (this,name,age);box.apply (This,[name,age]); ② Object Impersonation can only inherit information from constructsExample: Add the following example:Box.prototype.family = "Family";alert (desk.family); Can not inherit, still return to sister, brother, sister        3. Combination Inheritance method (object impersonation + prototype chain inheritance mode)using prototype chains to implement inheritance of prototype properties and methods, using object impersonation to implement inheritance of instance propertiesExample: function Box (name,age) {this.name = name;this.age = age; }  Box.prototype.work = function () {return this.name+this.age+ "in operation";   }function Desk (name,age) {Box.call (This,name,age)//object posing, inheritance in construction     }Desk.prototype = new Box (); Prototype chain inheritancevar desk = new Desk ("Andy");alert (Desk.work ()); Back to Andy 25 in run  Summary① prototype chain inheritance , a prototype property that contains a prototype of a reference type value is shared by all instances , and when an instance of a subtype is created, arguments cannot be passed to the constructor of the superclass. Therefore, in practice, the prototype chain is seldom used alone.  ② Object Impersonation (borrowing constructor method) , the call () or the Apply () method can be used to implement the constructor on the newly created object, which solves the problem of sharing and failing to pass the parameters in the prototype chain inheritance method. But an object can only inherit information from a construct, which can cause the function to be reused .  in the ③ combination inheritance , using the prototype chain to implement the inheritance of the prototype properties and methods, and by borrowing the constructor to implement the inheritance of the instance attributes, can not only realize the function reuse, but also ensure that each instance has its own properties , so Become a common inheritance pattern for JavaScript (the only problem: the super type is called two times ) 4. Prototype inheritance (similar to prototype chain inheritance)Example://temporary transfer functionfunction obj (o) {//o represents an object that will be passed intofunction F () {}//temporary new object to store the object passed overf.prototype = o; Assign an O object instance to the prototype object of the F constructreturn new F ();       }var box = {//equals var box = new box ();Name: "Andy",age:28,family:["elder brother", "sister"]           } var box1 = obj (box); Equivalent to var box1 = new F ();alert (box1.name); Back to Andyalert (box1.family); Back to brother, sisterBox1.family.push ("brother");alert (box1.family); Back to brother, sister, brothervar box2 = obj (box);alert (box2.family); Back to brother, sister, brother Therefore, the problem with archetypal inheritance is that properties that contain reference type values always share the corresponding values  5. Parasitic Inheritance (prototype + Factory mode)Example: function obj (o) {//Same as prototype inheritance, temporary transit functionfunction F () {}f.prototype = o; return new F ();        } function Create (o) {//Create parasitic functionvar f = obj (o);F.run = function () {return this.name+ "method";        }return F;        } var box = {Name: "Andy",age:100,family:["elder brother", "sister"]  }; var box1 = create (box);alert (box1.name)//andyalert (Box1.run ()); Andy Method This method can add a function to an object, but it is also not possible to reuse the function, similar to borrowing constructor inheritance. 6. Parasitic combined inheritancefunction obj (o) {function F () {};f.prototype = o;return new F (); } function Create (box,desk) {var f = obj (Box.prototype);f.constructor = desk; Adjusting the prototype construction pointersdesk.prototype = f;} function Box (name,age) {this.name = name;this.age = age;}box.prototype.run=function () {return this.name+this.age + "start";}function Desk (name,age) {Box.call (this,name,age); Object Impersonation}Create (Box,desk); Alternative Desk.prototype = new Box ();var desk = new Desk ("Andy");alert (Desk,run ()); Eject Andy28 boot  problem : Combinatorial inheritance is the most common way to inherit from JS, but the combination of inherited super types will be called two times during use, one time when creating subtypes, once within the subtype constructor, i.e.: Desk.prototype = new Box (); First Call ; Box.call (this,name,age); second call. workaround : Parasitic combined inheritance solves the problem that the super type is called two times

JavaScript Learning Notes (iii)--implementation of inheritance

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.