Class Creation (ES5)

Definition: new a function. Add properties and methods to the prototype of this function

Create an Animal class:

/ / create a Animal function Animal (name) {/ / attribute this. Name = name | | "Animal" / / instance methods this. Sleep = function () {the console. The log (this name + "Sleeping!" } // animal.prototype. eat = function(food){console.log(this.name + "eating" + food); }Copy the code

So that creates an Animal class, instantiated as an object, with methods and properties

2. Class Inheritance (several kinds of JS inheritance)

  1. Prototype chain inheritance
  2. Inheritance by constructor (classical inheritance)
  3. Combinatorial inheritance: prototype chain + borrowing constructor (most commonly used)
  4. Primitive inheritance (Object.create)
  5. Parasitic inheritance
  6. Parasitic combinatorial inheritance (best)
  7. Inheritance in ES6

(1) Prototype chain inheritance

Definition: The prototype of a subtype is an instance of the parent type

function Parent(){
    this.name = 'big';
    this.colors = ['red','blue']
}
Parent.prototype.getName = function(){
    console.log(this.name)
}
function Child(){
    this.subName = 'litter'
}
Child.prototype = new Parent();

let child1 = new Child();
let child2 = new Child();

child1.getName(); //big

child1.colors.push('pink');

console.log(child1.colors); //['red','blue','pink']
console.log(child2.colors); //['red','blue','pink']

Copy the code

Prototype = new Parent();

Features:
  • The parent class adds a method on top of the constructor that all subclasses can access
Disadvantages:
  • All properties from the stereotype object are shared by all instances
  • Cannot pass arguments to the parent constructor when creating a subclass instance

(2) Inheritance by constructor

Definition: Call the superclass constructor using call() or apply() in a subclass constructor

function Parent(name){ this.name = name; this.colors = ['red','blue'] } Parent.prototype.getName = function(){ console.log(this.name) } function Child(name,age){ // Core code 'borrows' Parent type constructor parent.call (this,name); this.age = age; } let child1 = new Child('litter'); let child2 = new Child('lucky'); console.log(child1.name); //litter console.log(child2.name); Child1.getname (); child1.getName(); child1.getName(); //TypeErrorCopy the code

Parent. Call (this,name);

Features:
  • Avoid attributes of reference types being shared by all instances
  • When you create a subclass instance, you can pass parameters to the parent class
Disadvantages:
  • An instance is not an instance of a parent class, only an instance of a subclass
  • Only instance properties and methods of the parent class can be inherited, not stereotype properties and methods
  • Function reuse is not possible, and methods are created every time an instance is created, affecting performance

(3) Combinatorial inheritance: prototype chain + borrowing constructor

function Parent(name){ this.name = name; this.colors = ['red','blue']; } Parent.prototype.getName = function(){ console.log(this.name); } function Child(name,age){Parent. Call (this,name); This.age = age} // prototype = new Parent(); Child.prototype.constructor = child; let child1 = new Child('litter'); let child2 = new Child('lucky'); child1.getName(); //litter child2.getName(); //lucky child1.colors.push('pink'); // Changing child1.colors does not affect child2.colors console.log(child1.colors); //['red','blue','pink'] console.log(child2.colors); //['red','blue']Copy the code

Parent. Call (this,name); And child.prototype = new Parent()

Features:
  • Combining the advantages of class prototype chains with borrowed constructors is the most commonly used inheritance pattern in JavaScript
Disadvantages:

  • Call the parent constructor twice to generate two instances of the class

    • Once is when you set the prototype for an instance of a subtypeChild.prototype = new Parent();
    • Once when you create a subclass real,let child1 = new Child('litter');The call to new will executeParent.call(this,name);, will be called againParentThe constructor

(4) Original type inheritance (Object.create)

Var B = object.create (A) generates an Object based on an Object, and B inherits all the attributes and methods of class A.

Const person = {name:'star', colors:['red','blue']} const person2 = Object.create(person); person1.name = 'litter'; person2.name = 'lucky'; person1.colors.push('yellow'); console.log(person1.colors); //['red','blue','yellow'] console.log(person2.colors); //['red','blue','yellow']Copy the code

Const person1 = object.create (person);

Features:
  • There are no strict constructors, and prototypes allow you to create new objects based on existing ones
Disadvantages:
  • All attributes from the stereotype object are shared by all instances, and changing colors for Person1 affects colors for Person2, just as with stereotype chain inheritance.

(5) Parasitic inheritance

Definition: Create a function that encapsulates the inheritance process and internally enhances the object in some way

Function createObj(original){var clone = object.create (original); SayName = function(){console.log('hi'); } // return clone; }Copy the code
Disadvantages:
  • Methods are created each time an object is created, just like the constructor pattern

(6) Parasitic combination inheritance (optimal)

The most common JavaScript inheritance pattern: composite inheritance (prototype chain + borrow constructor), disadvantages: call the Parent constructor twice (child.prototype = new Parent(); And let child1 = new Child(‘litter’);

How can you only call it once? You can give child. prototype access to Parent. Prototype

If you use child. prototype = parent. prototype, you will modify parent. prototype when modifying child. prototype

This can be implemented using Object.create(), which is explained in object.create MDN: it creates a new Object using an existing Object to provide __Prototype__ of the newly created Object

function Parent(name){ this.name = name; this.colors = ['red','blue']; } Parent.prototype.getName = function(){ console.log(this.name); } function Child(name,age){Parent. Call (this,name); this.age = age; Prototype = object.create (Parent. Prototype); Child.prototype.constructor = Child;Copy the code

Call (this,name); And the Child. The prototype = Object. The create (Parent. The prototype);

(7)ES6 class inheritance

Definition: ES6 introduced the class keyword, which can be inherited using the extends keyword

class Parent{} class Child extends Parent{ constructor(name,age,color){ super(name,age); this.color = color; } toString(){ return this.color + ''+super.toString(); }}Copy the code

The class keyword is just syntactic sugar for the stereotype, and JavaScript inheritance is still implemented based on the stereotype.