JS is a flexible language, to achieve a function is often a variety of practices, ECMAScript no explicit inheritance mechanism, but by imitation, according to the characteristics of the JS language itself, JS implementation of the following common methods of inheritance
1. Using an object to impersonate the inheritance (this implementation can implement multiple inheritance)
Implementation principle: Make the constructor of the parent class A method of the subclass, then call the method of the subclass, assign the value to all the properties and methods through the This keyword
JS Code
- function Parent (FirstName)
- {
- This.fname=firstname;
- this.age=40;
- this.sayage=function ()
- {
- Console.log (this.age);
- }
- }
- function Child (FirstName)
- {
- this.parent=parent;
- this.parent (FirstName);
- Delete this.parent;
- this.saysomething=function ()
- {
- Console.log (this.fname);
- This.sayage ();
- }
- }
- var mychild=New Child ("Lee");
- Mychild.saysomething ();
2. Use the call method to change the function context implementation of inheritance (this way can not inherit the prototype chain, if you want to inherit the prototype chain, then 5 mixed mode)
Implementation principle: Change the function context inside the function this so that it points to the specific object passed into the function
JS Code
- function Parent (FirstName)
- {
- This.fname=firstname;
- this.age=40;
- this.sayage=function ()
- {
- Console.log (this.age);
- }
- }
- function Child (FirstName)
- {
- this.saysomething=function ()
- {
- Console.log (this.fname);
- This.sayage ();
- }
- this.getname=function ()
- {
- return firstname;
- }
- }
- var child=New Child ("Zhang");
- Parent.call (Child,child.getname ());
- Child.saysomething ();
3. Use the Apply method to change the function context implementation inheritance (this way can not inherit the prototype chain, if you want to inherit the prototype chain, the use of 5 mixed mode)
Implementation principle: Change the function context inside the function this so that it points to the specific object passed into the function
JS Code
- function Parent (FirstName)
- {
- This.fname=firstname;
- this.age=40;
- this.sayage=function ()
- {
- Console.log (this.age);
- }
- }
- function Child (FirstName)
- {
- this.saysomething=function ()
- {
- Console.log (this.fname);
- This.sayage ();
- }
- this.getname=function ()
- {
- return firstname;
- }
- }
- var child=New Child ("Zhang");
- Parent.apply (Child,[child.getname ());
- Child.saysomething ();
4. Implement inheritance in the form of a prototype chain
Implementation principle: The subclass prototype object points to the parent class to implement inheritance, that is, rewrite the prototype of the class, the disadvantage is not directly implement multiple inheritance
JS Code
- function Parent ()
- {
- this.sayage=function ()
- {
- Console.log (this.age);
- }
- }
- function Child (FirstName)
- {
- This.fname=firstname;
- this.age=40;
- this.saysomething=function ()
- {
- Console.log (this.fname);
- This.sayage ();
- }
- }
- Child.prototype=new Parent ();
- var child=New Child ("Zhang");
- Child.saysomething ();
5. Implementing inheritance with Mixed mode
JS Code
- function Parent ()
- {
- this.sayage=function ()
- {
- Console.log (this.age);
- }
- }
- parent.prototype.sayparent=function ()
- {
- Alert ("This is Parentmethod!!!");
- }
- function Child (FirstName)
- {
- Parent.call (this);
- This.fname=firstname;
- this.age=40;
- this.saysomething=function ()
- {
- Console.log (this.fname);
- This.sayage ();
- }
- }
- Child.prototype=new Parent ();
- var child=New Child ("Zhang");
- Child.saysomething ();
- Child.sayparent ();
JS Implementation inheritance