Several ways of JS inheritance

Source: Internet
Author: User
Tags instance method

As an object-oriented weakly typed language, the inheritance is also one of the most powerful features of JS.

Since we want to implement inheritance, we first define a parent class:

Define an animal class function Animal (name) {  //property  this.name = name | | ' Animal ';  Instance method  This.sleep = function () {    alert (this.name + ' is sleeping!) ');}  } Prototype Method Animal.prototype.eat = function (food) {  alert (this.name + ' is eating: ' + ');};
1. Prototype chain inheritance

Core: prototype An instance of a parent class as a child class

function Cat () {}cat.prototype = new Animal (); Cat.prototype.name = ' cat ';//Test Codevar cat = new Cat (); alert (cat.name); alert (cat.eat (' fish ')); alert (Cat.sleep ()); Alert (cat instanceof Animal); True alert (cat instanceof cat); True

Characteristics:

    1. A very purely inherited relationship, an instance of a subclass, and an instance of the parent class.
    2. The parent class adds a new prototype method/prototype property that the subclass can access to

Disadvantages:

    1. To add properties and methods to a subclass, you must new Animal() execute after such a statement and not put it in the constructor
    2. Unable to implement multiple inheritance
    3. The reference property from the prototype object is shared by all instances
    4. Cannot pass parameter to parent class when creating child class instance
2. Borrowing constructor inheritance

Core: Use the constructor of the parent class to enhance the subclass instance, which is equivalent to copying the instance property of the parent class to the subclass (useless to the prototype)

function Cat (name) {  Animal.call (this);  this.name = Name | | ' Tom '; Test Codevar cat = new Cat (), alert (cat.name), alert (Cat.sleep ()), alert (cat instanceof Animal); Falsealert (cat instanceof cat); True

Characteristics:

    1. Resolves an issue where subclass instances share parent class reference properties in 1
    2. When you create a child class instance, you can pass parameters to the parent class
    3. Multiple inheritance can be implemented (call multiple parent objects)

Disadvantages:

    1. The instance is not an instance of the parent class, just an instance of the child class
    2. Only instance properties and methods of the parent class can be inherited and cannot inherit the prototype properties/methods
    3. Function reuse is not possible, each subclass has a copy of the parent class instance function, which affects performance
3. Combination Inheritance

Core: by calling the parent class constructor, inheriting the properties of the parent class and preserving the advantages of the pass parameter, and then inheriting the parent class instance as a subclass prototype, inherits the properties and methods of the parents, implements the function reuse

function Cat (name) {  Animal.call (this);  this.name = Name | | ' Tom '; Cat.prototype = new Animal ();//Test Codevar cat = new Cat (); alert (cat.name); alert (Cat.sleep ()); alert (cat instanceof Anim AL); Truealert (cat instanceof cat); True

Characteristics:

    1. compensate for the defect in mode 2, can inherit instance properties/methods, or inherit prototype properties/Methods
    2. is both an instance of a subclass and an instance of the parent class
    3. There is no reference attribute sharing issue
    4. Can be passed the parameter
    5. Functions can be reused

Disadvantages:

    1. A two-time parent constructor was called, and two instances were generated (the subclass instance masks that portion of the subclass prototype) (consumes only a bit of memory)

4 prototype Inheritance

Core: Inheriting an existing object instead of a function

Performs a shallow copy function object (o) {      function F () {}      F.prototype = O on the incoming object;      return new F (); Example var Animal = {      name: "Cat",      friend:["Aaron", "Cassic"]}var cat=object (Animal); cat.name= "SSS"; Cat.friend.push ("Aseaff"); alert (cat.name); alert (cat.friend);

  

Characteristics:

    1. There is no need to create a constructor, just to keep one object similar to another object

Disadvantages:

    1. As with prototype mode, property values that contain reference types are shared

5 Parasitic inheritance

The core is closely related to the prototype inheritance, just a lot of methods

Performs a shallow copy function object (o) {      function F () {}      F.prototype = O on the incoming object;      return new F (); Enhanced Object function CreateObject (o) {     var clone=object (o);     Clone.sayname=function () {        alert ("HI");};    return clone;} Example var Animal = {      name: "Cat",      friend:["Aaron", "Cassic"]}var cat=createobject (Animal); Cat.sayname ();

Characteristics:

    1. There is no need to create a constructor, just to keep one object similar to another object
    2. Compared to prototype inheritance, it has its own method.

Disadvantages:

    1. As with prototype inheritance, property values that contain reference types are shared
6. Parasitic combination inheritance

Core: by parasitic way, the instance property of the parent class is cut off, so that when two times the construction of the parent class is called, the two instance method/property is not initialized, the disadvantage of avoiding the combination inheritance

function Cat (name) {  Animal.call (this);  this.name = Name | | ' Tom '; (function () {  //Create a class with no instance method  var Super = function () {};  Super.prototype = Animal.prototype;  Prototype the instance as a subclass  Cat.prototype = new Super ();}) ();//Test Codevar cat = new Cat (); Console.log (cat.name); Console.log (Cat.sleep ()); Console.log (cat instanceof Animal); Trueconsole.log (cat instanceof cat); True

  

Characteristics:

    1. Perfect

Disadvantages:

    1. Achieve more complex

Several ways of JS inheritance

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.