People don’t talk too much, get right to the point

How do YOU implement a class

In ES5 you can implement a class using constructors. What is a constructor? The function that instantiates an object through new is called a constructor and is defined with a capital letter.

The following code declares a constructor Animal and instantiates an object Animal with a name attribute and a sayName method via new.

// ES5
function Animal(name) {
  this.name = name
  this.sayName = function () {
    console.log(this.name)
 } }  var animal = new Animal('dog') animal.sayName() // dog Copy the code

The downside is that each instance object has its own sayName method that cannot be reused, which is a waste of resources. For this reusable method, we can put it on the Animal class prototype object. (Here is the knowledge of the prototype chain, added later)

//ES5
function Animal(name) {
  this.name = name
}
Animal.prototype.sayName = function () {
 console.log(this.name) }  var animal = new Animal('dog') animal.sayName() // dog console.log(animal)  var animal2 = new Animal('cat') animal2.sayName() // cat console.log(animal2) Copy the code

You can compare the two ways of writing it

Animal.__proto__ === animal.prototype Instance objects and classes are associated by the prototype chain

ES6 introduced the concept of Class, which can be thought of as a syntactic sugar.

// ES6
class Animal {
  constructor(name) {
    this.name = name
  }
 age = 2  sayName() {  console.log(this.name)  console.log(this.age)  } } const animal = new Animal('dog') animal.sayName() // dog 2 Copy the code

Here constructor is a constructor in which the properties and methods defined by this are properties and methods on the instance object. The declared sayName method is actually placed on the prototype object of this class.

Properties and methods defined by constructor belong to instance objects. Methods defined outside of class constructor exist on the class’s prototype object, and the properties defined belong to the instance object.

Unlike ES5, classes define methods declared inside classes that are not enumerable

How do I inherit a class

“In ES5, this can be done by combinatorial inheritance (stereotype chain inheritance + constructor inheritance)“

// Prototype chain inheritance
function Parent() {
  this.nums = [1.2.3]
}

function Child() {} Child.prototype = new Parent()  const child1 = new Child() child1.nums.push(4) console.log(child1.nums) / / [1, 2, 3, 4] const child2 = new Child() console.log(child2.nums) / / [1, 2, 3, 4] Copy the code

One disadvantage of prototype chain inheritance is that changing the reference type data in one instance affects other instance objects.

// Constructor inheritance
function Parent() {
  this.nums = [1.2.3]
}

function Child() {  Parent.call(this) }  const child1 = new Child() child1.nums.push(4) console.log(child1.nums) / / [1, 2, 3, 4] const child2 = new Child() console.log(child2.nums) / / [1, 2, 3] Copy the code

Constructor inheritance also has the disadvantage of not reusing common methods. So combinatorial inheritance was born

// Combinatorial inheritance
function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function () {
 console.log(this.name) }  function Child(name) {  Parent.call(this, name) } Child.prototype = new Parent() Child.prototype.constructor = Child // Specify the constructor on the instance prototype as the constructor of the current subclass  const child = new Child(Big Head boy) child.getName() // Big Head's son Copy the code

There are prototype inheritance, parasitic inheritance, parasitic combination inheritance, understand the good ~ (do not want to write lol)

Here’s how ES6 implements inheritance

// extends implements inheritance
class Animal {
  constructor(name) {
    this.name = name
  }
 sayName() {  console.log(this.name)  } } class Child extends Animal {  constructor(name) {  super(name)  this.name = name  } } const child = new Child('dog') child.sayName() // dog Copy the code

In a subclass, the constructor method is implicitly called by default if it is not shown to have been called.

class Child extends Animal {
}
/ / is equivalent to
class Child extends Animal {
  constructor(... args) { super(... args); } } Copy the code

Another thing to note is that in the constructor of a subclass, the this keyword can only be used after super is called, otherwise an error will be reported. This is because subclass instances are built on superclass instances, and only super methods can call superclass instances.

conclusion

Classes can be implemented through constructors in ES5, and there are six ways to implement inheritance

ES6 added the class and extends syntax sugar to implement a class and class inheritance

JS inheritance is mainly realized through the prototype chain.

There’s nothing more to say…

To the end.

This article is formatted using MDNICE