Notes on JS object-oriented programming: five inheritance methods

start

The video content of notes is from station B JavaScript from getting started to giving up Chapter 12 object oriented programming The notes are for self arrangement and review. Welcome to learn and communicate with us. Please inform the original author if you reprint them

3, Five kinds of inheritance

3.1 prototype chain inheritance

js inheritance: all attributes and methods of the prototype object can be shared by instances:

<body>
    <script>
      //Customize an Animal
      function Animal() {
        this.name = "a";
      }

      Animal.prototype.getName = function () {
        return this.name;
      };

      function Dog() {}
      //Dog inherited Aniaml
        
      //Essence: rewrite the prototype object, taking the properties and methods of the parent object in an instance as the properties and methods of the prototype object of a child object
      Dog.prototype = new Animal();
      Dog.prototype.constructor = Dog;
      var d1 = new Dog();

      console.log(d1.name);
      console.log(d1.getName());
      
    </script>
  </body>

Convert code to illustration as:

Problems of prototype chain inheritance:

1. Once the instance attribute in the parent class is assigned to the prototype attribute of the child class, these attributes belong to the shared attributes of the child class

2. When instantiating a subtype, you cannot pass parameters to the constructor of the parent type, so in practice, you rarely use prototype chain inheritance alone. Just understand

<body>
    <script>
      //Customize an Animal
      function Animal() {
        this.name = "a";
        this.colors = ['red','green','blue'];
      }

      Animal.prototype.getName = function () {
        return this.name;
      };

      function Dog() {
      }
      //Dog inherited Aniaml
      Dog.prototype = new Animal();
      Dog.prototype.constructor = Dog;
      var d1 = new Dog();
      var d2 = new Dog();

      console.log(d1.colors);
      console.log(d2.colors);

      d1.colors.push('purple')

      console.log(d1.colors);
      console.log(d2.colors);
      
    </script>
  </body>

3.2 borrowing constructor inheritance

Also called classic inheritance: call the constructor of the parent class inside the constructor of the child class

<body>
    <script>
      function Animal() {
        this.name = "a";
        this.colors = ["red", "green", "blue"];
      }

      Animal.prototype.getName = function () {
        return this.name;
      };

      function Dog() {
          //Inherited Animal
        Animal.call(this);
      }
      var d1 = new Dog();
      console.log(d1.name);
      console.log(d1.colors);
      console.log(d1.getName());
    </script>
  </body>

The advantage is that internal variables are not shared:

var d1 = new Dog();
var d2 = new Dog();
d1.colors.push('purple')

It also solves the problem that the prototype chain inheritance cannot pass parameters:

<body>
    <script>
      function Animal(name) {
        this.name = name;
        this.colors = ["red", "green", "blue"];
      }

      Animal.prototype.getName = function () {
        return this.name;
      };

      function Dog(name) {
          //Inherited Animal
          //When a new instance is created, this in the internal constructor points to d1, and then call the constructor of the parent class through the call method inside the current constructor. This in the constructor of the parent class points to d1, but the method cannot be inherited
        Animal.call(this,name);
      }
      var d1 = new Dog('chen');
      var d2 = new Dog();
      d1.colors.push('purple')
      console.log(d1.name);
      console.log(d1.colors);
    //   console.log(d1.getName());
    </script>
  </body>

Disadvantages: shared methods defined in the parent class cannot be inherited by the child class

3.3. Combination inheritance

Composite inheritance combines the advantages of prototype chain inheritance and constructor inheritance. Let the instance property of the parent class inherit. The instance modifies the value of the reference type, and the other instance will not change. By rewriting the prototype object, inherit the methods shared by the parent class:

<body>
    <script>
      function Animal(name) {
        this.name = name;
        this.colors = ["red", "green", "blue"];
      }

      Animal.prototype.getName = function () {
        return this.name;
      };

      function Dog(name) {
        //Inherited Animal
        Animal.call(this, name);
      }

      Dog.prototype = new Animal();
      Dog.prototype.constructor = Dog;
      var d1 = new Dog("chen");
      var d2 = new Dog("chen2");
    </script>
  </body>

**Problem: * * in any case, the constructor of the parent class will be called twice

  1. One is when we initialize the prototype object of the subclass
  2. Call the constructor of the parent class inside the constructor of the child class

3.4 parasitic combined inheritance (important)

Through object The Create method transfers the prototype object of Animal into the created instance and assigns it to Dog, reducing one constructor call. This method is the most practical

<body>
    <script>
      function Animal(name) {
        this.name = name;
        this.colors = ["red", "green", "blue"];
      }

      Animal.prototype.getName = function () {
        return this.name;
      };

      function Dog(name) {
        //Inherited Animal
        Animal.call(this, name);
      }

      Dog.prototype = Object.create(Animal.prototype)
      Dog.prototype.constructor = Dog;
      var d1 = new Dog("chen");
      var d2 = new Dog("chen2");
    </script>
  </body>

3.5 summary

1. Prototype chain inheritance
**Features: * * override the prototype object of the subclass, and the properties and methods on the prototype object of the parent class will be inherited by the subclass
**Problem: * * once the instance reference type attribute defined in the parent class is modified, other instances will also be modified. When instantiating a child class, parameters cannot be passed to the parent class
2. Borrow constructor mode
**Features: * * call (call(),apply(),bind()) the constructor of the parent class indirectly inside the constructor of the child class
**Principle: * * change this point in the parent class
**Advantages: * * only takes the instance attribute in the parent class as the instance attribute of the child class, and can also pass parameters
**Disadvantages: * * public methods in the parent class cannot be inherited
3. Composite inheritance
**Features: * * combines the advantages of prototype chain inheritance and borrowing constructor inheritance
**Prototype chain inheritance: * * public methods can be inherited
**Borrow constructor: * * instance attributes can be inherited by subclasses
**Disadvantages: * * called the constructor of the parent class twice

The 1. instantiate subclass objects
The 2. constructor inside subclass (good)
4. Parasitic combinatorial inheritance
​ var b = object.create(a);
The Use the a object as the prototype object of the b instance
The Point the prototype object of the child class to the prototype object of the parent class
​ Dog . prototype = Object. create( Animal . prototype)
The One of the most widely used inheritance patterns in development

3.6 multiple inheritance

js does not allow an object to inherit multiple objects at the same time, but it has a flexible method through object Assign to copy the prototype object to implement multiple inheritance

<body>
    <script>
      function Person() {
        this.name = "Person";
      }

      Person.prototype.sayName = function () {
        console.log(this.name);
      };

      //Custom Parent
      function Parent() {
        this.age = 30;
      }

      Parent.prototype.sayAge = function () {
        console.log(this.age);
      };

      function Me() {
        //Inherit the properties of Person
        Person.call(this);
        Parent.call(this);
      }

      //Method of inheriting Person
      Me.prototype = Object.create(Person.prototype);
      //Cannot override a prototype object to implement inheritance from another object
      //Mixed technology Mixin
      //   Me.prototype = Object.create(Parent.prototype)
      //   Object.assign(targetObj,copyObj)
      Object.assign(Me.prototype, Parent.prototype);

      Me.prototype.constructor = Me;
      var me = new Me();
    </script>
  </body>

Tags: Javascript OOP Front-end

Posted by kinadian on Mon, 30 May 2022 09:07:53 +0530