6 inheritance methods of JS advanced ES6

Preface:

Inheritance is a common topic in object-oriented programming. Before ECMAScript6 , inheritance in JavaScript was very complicated. There were various types of inheritance. Essentially, all inheritances were inseparable from the prototype chain. The newly added extends keyword ES6 also implements inheritance through the prototype chain, but the syntax is relatively simpler.

Regarding the content of the prototype chain, you can refer to the two pictures in the previous article to understand the prototype chain

This article will introduce how inheritance was implemented before ECMAScript6.

1. Prototype chain inheritance

With the help of prototype chain inheritance, the essence is to modify the prototype's pointing. The implementation code is as follows:

function ParentClass() {
  this.name = 'A bowl of Zhou'
}
ParentClass.prototype.getName = function () {
  return this.name
}

// Define a subclass to inherit the parent class in the future function ChildClass() {}

// * Point the prototype of the child class to the instantiation of the parent class. The child class has the content of the instantiation of the parent class ChildClass.prototype = new ParentClass()

// Instantiate the subclass var child = new ChildClass()

console.log(child.getName()) // Yiwan Zhou

The above code is illustrated as follows:

The red line in the figure represents the prototype chain between the constructor and the instance object. Inheritance is achieved through the relationship of this prototype chain.

One disadvantage of implementing inheritance in this way is that multiple instances will cause the content on the prototype object to be shared, and the content will affect each other. The test code is as follows:

function ParentClass() {
  this.colors = ['red', 'blue', 'green']
}
function ChildClass() {}

ChildClass.prototype = new ParentClass()

var child1 = new ChildClass()
var child2 = new ChildClass()
console.log(child1.colors) // [ 'red', 'blue', 'green' ]

child2.colors.push('black')
console.log(child2.colors) // [ 'red', 'blue', 'green', 'black' ]

console.log(child1.colors) // [ 'red', 'blue', 'green', 'black' ]

child1 in the test code is not modified, but after child1 is modified, the value in child1 is also changed.

2. Inheritance with constructors

The so-called inheritance with the help of constructors (some materials also call it pseudo-object or classical inheritance) is to complete inheritance by calling the parent class constructor through the child object with the help of Function.call() or Function.apply() method.

The sample code is as follows:

function Parent() {
  // Parent object this.parent = 'parent'
}

Parent.prototype.name = 'Yiwan Zhou' // Add properties to the prototype of the Parent parent object function Child() {
  // Child object this.child = 'child'

  Parent.call(this) // Use the call() or apply() method to call the parent constructor to implement inheritance.
}

const child = new Child()

console.log(child)

console.log(child.name) // undefined // Will not inherit the prototype of the parent class

The execution flow is as follows:

The advantage of using this method is that it avoids instances of reference types being shared by all objects. The disadvantage is that because all methods are defined in the constructor, they will not inherit the prototype object, and these methods will be recreated after each object is instantiated, taking up memory space, not to mention function reuse.

3. Combinatorial inheritance

The two inheritance methods we have mastered before both have their shortcomings. In the inheritance method based on prototype inheritance, all instantiated objects share the methods and properties of the prototype. If there is a change, all will be changed. However, prototype properties cannot be inherited through constructor inheritance. Therefore, combined inheritance came into being, which is a way of inheritance that combines the prototype-based inheritance method with the inheritance method with the help of constructors, taking the essence and removing the dross.

The basic idea of ​​implementing combined inheritance is as follows:

• Use prototype chaining or prototypal inheritance to inherit the properties and methods of a prototype.
• The inheritance of instance object properties is achieved through the structure constructor.

In this way, function reuse is achieved by defining methods on the prototype, and each object can be guaranteed to have its own unique properties.

The sample code is as follows:

// Parent object function Parent() {
  this.parent = 'parent'
}
// Add properties to the prototype of the Parent parent object Parent.prototype.name = 'Yiwan Zhou'
//Child object function Child() {
  this.child = 'child'
  // Use the call() or apply() method to call the parent constructor to implement inheritance.
  Parent.call(this)
}
// Solve the problem of prototype objects that do not inherit constructors Child.prototype = Parent.prototype

const child = new Child()
console.log(child.name) // Yiwan Zhou

4. Prototype inheritance

We can use the Object.create() method to implement a kind of inheritance. The example code is as follows:

var person = {
  name: 'A bowl of Zhou',
  friends: ['Zhang San', 'Li Si', 'Wang Wu'],
}

var anotherPerson = Object.create(person)
anotherPerson.name = 'A bowl of sweet'
anotherPerson.friends.push('赵六')

console.log(person.friends) // [ 'Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu' ]

The disadvantage of this method is the same as the first one, that is, multiple instances will cause the contents on the prototype object to be shared, and the contents will affect each other.

5. Parasitic inheritance

The basis of parasitic inheritance is to enhance the object and return the constructor on the basis of prototype inheritance. The example code is as follows:

var person = {
  name: 'A bowl of Zhou',
  friends: ['Zhang San', 'Li Si', 'Wang Wu'],
}

function createAnother(original) {
  var clone = Object.create(original) // Create a new object by calling the object() function clone.sayMe = function () {
    // Enhance the object in some way}
  return clone // Return this object }

var anotherPerson = createAnother(person)
anotherPerson.sayMe()

Its disadvantages are the same as those of native inheritance.

6. Parasitic Combinatorial Inheritance

This inheritance method is implemented by passing parameters through the constructor and parasitic inheritance. The example code is as follows:

function inheritPrototype(ChildClass, ParentClass) {
  var prototype = Object.create(ParentClass.prototype) // Create an object and create a copy of the parent class prototype // Modify the constructor of the created copy of the parent class prototype and point the child class prototype to this class, forming a class unrelated to the parent class prototype.constructor = ChildClass
  ChildClass.prototype = prototype
}

// Parent class initializes instance properties and prototype properties function ParentClass(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
ParentClass.prototype.sayName = function () {
  console.log(this.name)
}

// Use the constructor to pass enhanced subclass instance properties (support parameter passing and avoid tampering)
function ChildClass(name, age) {
  //Copy all the parent class's own properties ParentClass.call(this, name)
  this.age = age
}

// Point the parent class prototype to the child class inheritPrototype(ChildClass, ParentClass)

// Add subclass prototype property ChildClass.prototype.sayAge = function () {
  console.log(this.age)
}

var instance1 = new ChildClass('一碗周', 19)
var instance2 = new ChildClass('A bowl of sweet', 18)

instance1.colors.push('black')
console.log(instance1.colors) // [ 'red', 'blue', 'green', 'black' ]
instance1.sayName() // A bowl of Zhouinstance2.colors.push('yellow')
console.log(instance2.colors) // [ 'red', 'blue', 'green', 'yellow' ]

This example is efficient because it calls ParentClass constructor only once and thus avoids creating unnecessary, redundant properties on ChildClass.prototype . At the same time, the prototype chain remains unchanged; therefore, instanceof and isPrototypeOf()。

If you don't understand, then keep reading. First, we extract the core code, as shown below:

The above picture shows our core code. Let's take a look at what the default prototype chains of ParentClass and ChildClass look like.

The picture is as follows:

Then we call the inheritPrototype() method and modify the prototype of ChildClass. The parsing diagram is as follows:

Finally, don’t forget to call the parent class through call() method in the subclass to copy the parent class’s own properties. This will achieve a relatively complete inheritance method.

Conclusion:

This article introduces six inheritance methods other than the extends keyword. Although class keyword and all class-related content were added in ECMAScript6 , the inheritance methods introduced in the text are no longer used much.

However, the new classes added ECMAScript6 are essentially syntactic sugar. Whenever we talk about inheritance in JavaScript, we can’t do without the class keyword.

This concludes this article about 6 inheritance methods of JS advanced ES6. For more information about 6 inheritance methods of ES6, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!