series

Front – Type judgment

Front end Stereotype – prototype chain

Front – Write new, bind, call and apply by hand

Class type inheritance

Principle:

Son.prototype = new Father(), which is interpreted as assigning the instantiation object of the parent class to the prototype of the child class

Subclasses can access properties and methods on the parent class prototype, as well as properties and methods in the constructor

Implementation:

Function Father() {this.fathervalue = true; } / / Father parent class to add the prototype method. The prototype. GetFatherValue = () = > enclosing fatherValue / / declare subclasses function Son () {enclosing sonValue = false; } / / * * * * * * * * * * inherit the parent class * * * * * * * * * * Son. The prototype = new Father (); / / add the prototype method Son. Prototype. GetSonValue = () = > enclosing sonValue;Copy the code

Answer:

New Father().__proto__ => Father. Prototype === new Father().__proto__ => FatherCopy the code

Disadvantages:

  • There are reference types for all attributes in the parent class, and changes in the child class affect the parent class, which in turn affects other child classes
  • When a subclass is initialized, it cannot pass arguments to the parent class, and therefore cannot initialize properties in the parent constructor when instantiating the parent class

Constructor inheritance

Principle:

To declare a subclass, call Father. Call (this,… agruments)

Only the attributes and methods in the parent constructor are inherited

Implementation:

Function Father(id) {this.id = id; this.books = ['javascript', 'java', 'css']; } / / Father parent class to add the prototype method. The prototype. ShowBooks = () = > this. Books / / declare subclasses function Son (id) {Father. Call (this, id) } var instance1 = new Son(10); var instance2 = new Son(11); instance1.books.push('html'); console.log(instance1.books ) // ['javascript', 'java', 'css', 'html'] console.log(instance2.books ) // ['javascript', 'java', 'css'] instance1.showBooks() // TypeErrorCopy the code

Answer:

Disadvantages:

  • This type of inheritance does not involve the prototype prototype
  • To inherit, you must place the method property in the constructor with the this binding

Combination of inheritance

Principle:

To declare a subclass, call Father. Call (this,… agruments)

Son. Prototype = new Father(),

Function Father(id) {this.id = id; this.books = ['javascript', 'java', 'css']; } Father. Prototype. GetId = () => {console.log(this.id)} Time) {// The constructor extends Father. Call (this, id) this.time = time; } // Son. Prototype = new Father(); Son.prototype.getTime = () => { console.log(this.time); Var instance1 = new Son(1, 2020); instance1.books.push('html') console.log(instance1.books)// ['javascript', 'java', 'css', 'html'] instance1.getId(); // 1 instance1.getTime(); // 2020 var instance2 = new Son(2, 2021); console.log(instance2.books); // ['javascript', 'java', 'css']; instance1.getId(); // 2 instance1.getTime(); / / 2021Copy the code

Answer:

Disadvantages:

  • Using constructor inheritance, the parent class’s constructor is called once, and the class inheritance of the subclass’s prototype calls the parent class’s constructor again. (Superclass constructor called twice)

Primary inheritance

Principle:

Create a pure function and assign the parent object to the pure function’s prototype

Implementation:

Function inheritObject(o) {function inheritObject(o) {function inheritObject(o) {function inheritObject(o) { // Return an instance of the transition object whose prototype inherits the parent object return new F(); Var animals = {name: 'animal collection ', specialList: ['dog', 'cat', 'mouse']} var newAnimals = inheritObject(animals); Newanimals. name = 'mythical animal '; newAnimals.specialList.push('dragon'); var otherAnimals = inheritObject(animals); OtherAnimals. Name = 'otherAnimals '; Console. log(newanimals.name) // mythical animals console.log(otheranimals.name) // otherAnimals console.log(newanimals.speciallist) // ['dog', 'cat', 'mouse', 'dragon'] console.log(otherAnimals.specialList) // ['dog', 'cat', 'mouse', 'dragon']Copy the code

Answer:

disadvantages

  • As with class inheritance, there are reference types for all attributes in a parent class, and changes in a child class affect the parent class, which in turn affects other children

Parasitic inheritance

Principle:

Secondary encapsulation of stereotype inheritance

Implementation:

Function inheritObject(o) {function inheritObject(o) {function inheritObject(o) {function inheritObject(o) { // Return an instance of the transition object whose prototype inherits the parent object return new F(); } // declare the base object var animals = {name: 'animals ', specialList: ['dog', 'cat', 'mouse'] } function createAnimals(obj) { var o = inheritObject(obj); o.getNmae = () => {console.log(name)} return o; }Copy the code

Answer:

Disadvantages:

Parasitic combinatorial inheritance

Principle:

Copy a prototype copy of the parent (assigning the parent to the pure new constructor) and then assign to the subclass prototype, while fixing and enhancing constructor

Implementation Scheme 1:

Function inheritObject(o) {function inheritObject(o) {function inheritObject(o) {function inheritObject(o) { // Return an instance of the transition object whose prototype inherits the parent object return new F(); } function inheritPrototype(SonClass, FatherClass) { Let p = inheritObject(fatherclass.prototype) console.log(' check if p is an instance of FatherClass ', P instanceof FatherClass) console.log(' instantiated clean instance object ', p) p.constructor = SonClass Need to change the direction of constructor, Function Father(id) {this.id = id; function Father(id) {this.id = id; this.books = ['javascript', 'java', 'css']; } Father. Prototype. GetId = () => {console.log(this.id)} Time) {// The constructor extends Father. Call (this, id) this.time = time; } inheritPrototype(Son, Father); Son.prototype.getTime = () => { console.log(this.time) }Copy the code

Implementation Scheme 2 (Object.create)

function inheritPrototype(subType, superType){ var protoType = Object.create(superType.prototype); Prototype. constructor = subType; // Add object subtype. prototype = prototype; // Specify the object}Copy the code

Answer:

The biggest difference from composite inheritance is that the superclass constructor is not executed twice.