Summary of inheritance operation examples of JavaScript classes

This example summarizes the inheritance operation of the JavaScript class. Share to everyone for reference, specifically as follows:

The first thing to do is to create a constant function. According to the practice, its name is a class name, and the first letter should be capitalized. In the constructor, create instance properties To use keywords

this . The method of class is added to the prototype object. To create an instance of this class, simply use the keyword New to call this constructor.

/ * Class Person. * / Function Person (Name) { = name;} Person.Prototype.getName = function () {return; } var reader = new Person (‘John Smith’); Reader.GetName ();
 Second, prototype chain   
Each object of JavaScript has an attribute called prototype
. This property either points to another object, or null. When the member is visited, if this member is not seen in the current object, then Go to the object referred to in Prototype. If you still haven’t found it, you will access each prototype object along the prototype chain until you find this member. This means that one class inherits another class, just set the

prototype of the subclass to the superclass.

In order to allow Author inherited Person, you must manually set the Author’s

Prototype to an instance of Person. The final step is prototype construct The attribute is reset to Author (because


property is set to Person’s instance, its construct attribute is erased. Function Author (Name, Books) { (this, name); // Call the superclass’ Constructor in the scope of this. This.books = books ;. // Add an attribute to Author} Author.prototype = new Person (); // Set up the prototype chain.Author.prototype.constructor = Author; // Set the constructor attribute to Author.Author.prototype.getBooks = Function () {// add a method to author. Return this.books;}; var author = []; author [0] = new author (‘Dustin Diaz’, [‘JavaScript Design Patterns’]); Author [1 ] = New Author (‘Ross Harmes’, [‘JavaScript Design Patterns’); Console.log (Author [1] .getname ()); console.log (author [1] .getbooks ()); Third, Extend function

In order to simplify the statement of the class, the entire process of sending the genetics can be packaged in a function called Extend. Its role is similar to other languages ​​
 extend , that is, create a new class based on a given class:  

Function Extend (subclass, superclass) {var f = function () {}; f.Prototype = superclass.prototype; subclass.prototype = new f (); subclass.prototype.constructor = subclass;}

Actually, what is the same as before. It first sets prototype

, and then reset it
Constructor to the appropriate value. And in the middle, an empty function can be avoided, so you can avoid the creation of an exemplary instance. Writing:
Function Person (Name) { = Name;} Person.Prototype.getName = function () { Return;} / * class author. * / function author (name, books) { (this, name); this.books = books;} extend (author, person); author.prototype.getbooks = Function () {Return this.books;};

However, there is a problem with the presence of super-class Person Corrupted in the declaration of the Author class. More universal practices should be like this: / * extend function, improved. * / Function extend (SUBCLASS, SuperClass) {var f = function () { }; F.prototype = superClass.prototype; subClass.prototype = new F (); subClass.prototype.constructor = subClass; subClass.superclass = superClass.prototype; if (superClass.prototype.constructor == Object.prototype.constructor) {superClass.prototype.constructor = superClass;}} / * Class Author * / function Author (name, books) { (this, name);. this.books = books;} extend (Author, “Author.prototype.getbooks = function () {return this.books;}; author.prototype.getname = function () {var name = (this); return name +’, Author of’ + this.getBooks (). Join (‘,’);}; This

After the improvement, there is more The properties of SuperClass, this property can weaken the coupling between Author and Person. EXTEND
 The three lines used to ensure that the superclass's construTor has been set correctly. With the properties of SuperClass, you can directly call methods in the superclass. This can be used in both a method of redefining the superclass and wants to access its implementation in the superclass. For example, in order to redefine the same name method in the Person class with a new GetName method, you can use  Author.superclass.GetName  to add new information on the basis. 
4, prototype inheritance

Prototype inheritance and class inheritance is quite different, we are best forgetting everything about classes and instances when learning him Think only from the perspective of the object. When using prototype inheritance, you don’t need to define the structure of the object with a class, just create an object directly. This object can then be used by new objects, which is called a prototype object.
 The following use prototype objects are redesigned above Person and Author:   
VAR PERSON = {Name: ‘default name’, getName: function () { Return;}}; var reader = clone (read); reader.getname ()); // this will output ‘default name’ =’ john smith ‘; Alert (Reader).getname ()); // this will now output ‘john smith’.

Clone function can be used to create new Person objects, Create an empty object and the prototype object of the object is set to Person. Find in the prototype object when you find a certain method in the new object. You don't have to define a Person subclass in order to create Author, just perform a clone: ​​

VAR Author = Clone (Person); Author .books = []; // default = function () {Return this.books;}

You can redefine the method in this clone And attributes. You can modify the default value of the Person. New properties and methods can also be added. In this way, create a new prototype object, you can use it to create a new Author object:
   VAR author = []; author [0] = Clone (author); author [0] .name = 'DUSTIN DIAZ'; Author [0] .books = ['JavaScript design pattern "; author [1] = clone (author); author [1] .name =' Ross Harmes'; Author [1] .books = ['JavaScript Design Patterns']; Author [1] .GetName (); Author [1] .Getbooks (); 

Function Clone (Object) {Function F () {} f.Prototype = Object; Return New F; }
  Five, the comparison between prototyping inheritance and type inheritance  
can summarize yourself,
from memory Analysis of the scope, advantages and disadvantages

   There is a method of reusing code does not need to be strict inheritance, if you want to A function is used to multiple classes, which can make these class sharing functions by expanding methods. Its actual approach is to create a variety of common method classes, then expand other classes, which contain common method classes are called dial categories, they usually do not be instantiated and directly called, the purpose of its existence It is a method to provide yourself to other classes. 
VAR Mixin = function () {}; mixin.Prototype = {serialize: function () {var output = []; for (key in this) {Output. Push (Key + ‘:’ + this [key]);} return output.join (‘,’);}}; augment (author, mixin); var author = new author (‘Ross Harmes “, [‘ JavaScript Design Patterns’]); var serializedstring = author.Serialize (); function augment (receivingClass, givingClass) {for (methodName in givingClass.prototype) {if (receivingClass.prototype [methodName]) {receivingClass.prototype [methodName] = givingClass.prototype [methodName];!}}}

 But sometimes you don't need all methods, so we also need to provide additional parameters to choose what we need. If not, copy it all.   
Function Augment (ReceivingClass, GivingClass) {if (arguments [2]) {// ONLY GIVE CERTAIN METHODS. FOR (VAR i = 2, len = arguments.length i

More about JavaScript Related Contents can also view this topic: “JavaScript Object-Oriented Getting Started”, “JavaScript error and debugging skill summary”, “JavaScript data Structure and Algorithm Skill Summary

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment