The way JS implements inheritance

Source: Internet
Author: User

First you have to have a parent class

//define an animal classfunctionAnimal (name) {//Properties   This. Name = Name | | ' Animal '; //instance Method   This. Sleep =function() {Console.log ( This. name + ' Sleeping! ‘); }}//Prototyping MethodsAnimal.prototype.eat =function(food) {Console.log ( This. Name + ' eating: ' +Food );};

1. Prototype chain inheritance

Core: Prototype an instance of a parent class as a child class

//prototype chain inheritance        functionCat () {} Cat.prototype=NewAnimal (); Cat.prototype.name= ' Cat '; varCat =NewCat (); Console.log (cat.name);//CatConsole.log (cat.eat (' fish '));//undefinedConsole.log (Cat.sleep ());//undefinedConsole.log (catinstanceofAnimal);//trueConsole.log (catinstanceofCat);//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
    3. Simple and easy to implement

Disadvantages:

  1. To add properties and methods to subclasses, you can add instance properties to your cat instance in the cat constructor. If you want to add a prototype property and method, you must new Animal() do so after the statement is placed. must be new Animal() executed after such a statement and cannot be placed in the constructor
  2. Unable to implement multiple inheritance
  3. The reference property from the prototype object is shared by all instances (see Appendix Code for details: Example 1)
  4. When you create a subclass instance, you cannot pass parameter 2 to the parent class constructor, construct 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)

  5.  function   Cat (name) {Animal.call ( this   this . Name = Name | |        ' Tom ' ;  var  cat = new   Cat (); Console.log (cat.name);  // tom  console.log (Cat.sleep ()); // undefined  console.log (cat instanceof  Animal); //  false  Console.log (cat instanceof  cat); //  

    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. Cannot implement function reuse, each subclass has a copy of the parent class instance function, affecting performance 3, composite inheritance

      Core: by calling the parent class construct, inheriting the property of the parent class and preserving the advantages of the pass parameter, and then implementing the function reuse by using the parent class instance as the subclass prototype

      functionCat (name) {Animal.call ( This);  This. Name = Name | | ' Tom ';} Cat.prototype=NewAnimal ();//composite inheritance is also required to fix the constructor point. Cat.prototype.constructor=Cat;//Test CodevarCat =NewCat (); Console.log (cat.name); Console.log (Cat.sleep ()); Console.log (CatinstanceofAnimal);//trueConsole.log (catinstanceofCat);//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 masked the sub-class prototype)

The way JS implements 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.