Knowledge points

  • Understand object orientation of JS
  • Learn about prototypes and prototype chains in JS
  • Some common questions

Supplementary knowledge

Object understanding

  • An object is a simple abstraction of a single object, a container that encapsulates properties and methods
    // Simple objects
   const obj = {
       name: '11'.age: 20
   }
   // Function object
   function Obj() {
       this.name = '11';
       this.age = 20;
   }
Copy the code

Constructor – Generates objects

  • JS is not class-based in nature, but based on constructor + prototype chain
    function Person() {
        this.name = '11';
        this.age = 20;
    }
    const person = new Person()
Copy the code

Person is essentially a constructor

  1. The this inside the function represents the generated instance object
  2. Instantiate objects with new
  3. The constructor must be instantiated
  • If constructors are not initialized, how can they be compatible
     function Person() {
        const isClass = this instanceof Person;
        if(! isClass) {return new Person();
        }
        this.name = '11';
        this.age = 20;
    }
    const person = Person()
Copy the code

What is new? What does new do

  • Creates an empty object as the returned object instance
  • Points the generated empty object’s prototype object (__proto__) to the constructor’s Prototype property
  • Assigns the current instance object to the inner this
  • Executes the constructor’s internal initialization code

What is a constructor

  • Each object is automatically created with a constructor attribute
  • The constructor property inherits from the stereotype object and points to a reference to the constructor

A prototype object

  • The constructor initializes the function that creates the object, automatically giving the constructor a prototype property that is actually equal to the instance object’s prototype object (__proto__).

Instance objects

  • Each object has a __proto__
  • Each instance object has a constructor attribute
  • Constructor is derived from inheritance and points to the current constructor

inheritance

All properties and methods on the prototype object can be shared by the instance

Inheritance through the prototype chain

    / / animal
    function Animal() {
        this.name = 'dog'
    }
    Animal.prototype.getName = function() {
        return this.name
    }
    / / dogs
    function Dog() {}
    // Inherit from Animal class
    Dog.prototype = new Animal()
    Dog.prototype.constructor = Dog
    const animal = new Dog() 
Copy the code

The above implementation of inheritance is essentially to rewrite the prototype object, using the properties and methods of the parent object as the properties and methods of the child object

What are the disadvantages of inheritance through a prototype chain

  • Once assigned to a stereotype property of a subclass, that property is a shared property of the subclass
  • Cannot pass a parameter to a parent class when instantiating a child class

Inheritance through constructors

  • Call the superclass constructor inside the subclass constructor
    function Animal(arg) {
        this.name = 'dog'
    }
    Animal.prototype.getName = function() {
        return this.name
    }
    / / subclass
    function Dog(arg) {
        Animal.call(this, arg)
    }
    const animal = new Dog()
Copy the code

Shared attributes and parameter passing issues are resolved, but shared methods on the stereotype chain cannot be inherited

Combination of inheritance

Combinatorial inheritance can solve the above problems

    function Animal(arg) {
        this.name = 'dog'
    }
    Animal.prototype.getName = function() {
        return this.name
    }
    / / subclass
    function Dog(arg) {
        Animal.call(this, arg)
    }
    Dog.prototype = new Animal()
    Dog.prototype.constructor = Dog
    // Dog inherits Animal
    const dog = new Dog()
Copy the code

Disadvantages: Composite inheritance calls the superclass constructor twice in any scenario, once when initializing the subclass prototype and once when calling the superclass inside the subclass constructor

Parasitic combinatorial inheritance

Parasitic combination inheritance can solve the above problems

    / / subclass
    function Dog(arg) {
        Animal.call(this, arg)
    }
    Dog.prototype = Object.create(Animal.prototype)
    Dog.prototype.constructor = Dog
Copy the code

Multiple inheritance

    / / animal
    function Animal(arg) {
        this.name = 'bird'
    }
    Animal.prototype.getName = function() {
        return this.name
    }
    / / skills classes
    function Skill(arg) {
        this.name = 'fly'
    }
    Skill.prototype.getSkill = function() {
        return this.name
    }
    / / birds
    function Bird(arg) {
        Animal.call(this, arg)
        Skill.call(this, arg)
    }
    Bird.prototype = Object.create(Animal.prototype)
    Object.assign(Bird.prototype, Skill.prototype)
    Bird.prototype.constructor = Bird
    
    const bird = new Bird()
Copy the code

The flow chart