JavaScript learns the inheritance in JavaScript

JavaScript learns the inheritance in JavaScript

inherit the first way: Object Impersonation

<script type= "Text/javascript" >//Inherit the first way: Object impersonationfunction Parent (username)//Parent class Object{This.username = Username;//The most critical part of the following code is to pass this child object's this to the parent objectThis.sayhello =function() {Alert (This. username); }}function child (username, password)//Sub-class object{//The following three lines of code are the most critical codeThis.method = Parent;//Defines the method property, pointing to the parent, which points to the constructor aboveThis.method (username);//Pass the username over, call the constructor, and this is the current child object in the parent function bodyDeleteThis.method;// Delete the method attribute because child already has the parent's properties and methods //this.password = password; this.sayworld = function this// Generate objects of these two classes var Parent = new Parent ("Zhangsan" ); var child = new Child ("Lisi", "1234" );p Arent.sayhello ( ); Child.sayhello (); Child.sayworld (); </script>         

　　

When implementing inheritance in this way, JS can achieve multiple inheritance, but sometimes it causes some interference, such as overwriting the method with the same name, so it is not recommended to use multiple inheritance.

Inherit the second way: Call method Mode

　　The call method is a method that is defined in a function object, so each function that we define has that method.

The call method can be called by a function name, andthe first parameter of the calling method is passed to this in the function, starting with the second argument and assigning it to the arguments in the function one by one.

　　Call method :

<script type= "Text/javascript" >//CallMethod mode, method function Test (str, STR2) in function object {    alert (this.name + "," + str + "," + str2);} new Object (); object.name = "Zhangsan";  // assigns object to this//the first parameter is assigned to this, and subsequent arguments are assigned to the method parameters successively </script>     

　　The call method implements inheritance :

<script type= "Text/javascript" >//Implementing object inheritance by using the call methodfunctionParent (username) {This.username =UsernameThis.sayhello =function() {Alert (This. username); }}functionChild (username, password) {Parent.call (this, username);// This statement is critical, equivalent to the three-line statement in the object impersonation /// /this.password =  password; this.sayworld = function thisvar parent = new parent ("Zhangsan" ); var child = new Child ("Lisi", "123" );p Arent.sayhello (); Child.sayhello (); Child.sayworld (); </script>      

inherit the Third way: Apply method Mode

Apply, like call, is defined within a function object.

<script type= "Text/javascript" >//Implementing object inheritance using the Apply methodfunctionParent (username) {This.username =UsernameThis.sayhello =function() {Alert (This. username); }}function child (username, password) {parent.apply (this, new Array (username)); //apply method implements inheritance, and subsequent arguments are passed in as an array this.password = password; this.sayworld = function thisvar parent = new parent ("Zhangsan" ); var child = new Child ("Lisi", "123" );p Arent.sayhello (); Child.sayhello (); Child.sayworld (); </script>      

Inherit the fourth way: Prototype chain mode

<script type= "Text/javascript" >//Implementing object inheritance using the prototype chain (prototype chain)functionParent () {}parent.prototype.hello = "Hello"; Parent.prototype.sayHello =function () {alert (.hello);} function child () {}child.prototype = new Parent (); // subclasses have properties and methods of the parent class //< Span style= "color: #008000;" > extended attribute Child.prototype.world = "World" function () {alert (this.world);} var child = new child (); Child.sayhello (); Child.sayworld (); </script>         

　　The disadvantage of the prototype chain is that parameters cannot be passed to the constructor.

the fifth way of inheritance: Hybrid mode

　　This approach is an improvement to the way the prototype chain works, allowing parameters to be passed to the constructor.

This is a more recommended way to do this.

<script type= "Text/javascript" >//Implementing object inheritance using a hybrid approach (recommended)//Parent objectfunctionParent (Hello) {This.hello =Hello;} Parent.prototype.sayHello =function() {Alert (This. hello);}//Child objectsfunction Child (Hello, world) {parent.call (this, hello); // Inheritance of properties by call this.world = World;//}child.prototype = new Parent (); //function () {alert (this.world);} var child = new Child ("Hello", "World"         

Example

<script type= "Text/javascript" >functionShape (Edge) {This.edge = Edge;//property, how many edges, defined by the constructor}shape.prototype.getarea =function ()//Define methods in a prototype way{return-1;//The base class returns a value that has no meaning}shape.prototype.getedge =function(){ReturnThis. Edge;}//Define Child Objects TrianglefunctionTriangle (bottom, height) {Shape.call (This, 3);//Properties of the TriangleThis.bottom =BottomThis.height =Height;} Triangle.prototype =New Shape ();//Inherit all the methods in ShapleTriangle.prototype.getArea =function ()//overriding method{Return 0.5 *This.bottom *This. Height;}var triangle =New Triangle (10, 4);//Alert (Triangle.getedge ());//Alert (Triangle.getarea ());//Another subclass: QuadrilateralfunctionRectangle (bottom, height) {Shape.call (This, 4);this.bottom = bottom; this.height = height;} Rectangle.prototype = new Shape ();  Inherit all methods of the parent class rectangle.prototype.getarea = function ()  overwrite method { Span style= "color: #0000ff;" >return this.bottom * this .height;} var rectangle = new Rectangle ($ 40     

References

Santhiya Garden Zhang Long teacher Java web series video tutorial.

JavaScript learns the inheritance in JavaScript