ES6 Class or something

This is the fourth day of my participation in the August Text Challenge.More challenges in August

1. ES5Defined in the class

There is no class-specific syntax in ES5, it uses functions (for a class, there must be constructors, constructors solve two problems: the first is to pass parameters; The second is instantiation, that is, initialization) to simulate. Here’s an example:

 // Define an Animal class
 let Animal = function (type) {
   this.type = type // Define an attribute and initialize it
   this.eat = function () {} // Define an eat() method
 }
 
 // Generate a dog instance object
 let dog = new Animal('dog')
 // Generate a monkey instance object
 let monkey = new Animal('monkey')
 
 // Prints the dog instance object
 console.log(dog)
 // Print the monkey instance object
 console.log(monkey)
 
 Animal {type: "dog", eat: ƒ} Animal {type: "monkey", eat: ƒ} */
Copy the code

Add a statement to the eat method above, and change the eat method of the monkey object. Then call the eat method of dog and monkey respectively:

 let Animal = function (type) {
   this.type = type
   this.eat = function () {
     console.log('I am eating food.') Add a statement to the eat method}}let dog = new Animal('dog')
 let monkey = new Animal('monkey')
 
 console.log(dog)
 console.log(monkey)
 
 // Change the eat method of the monkey object
 monkey.eat = function () {
   console.log('error')}// Call the dog and monkey eat methods, respectively
 dog.eat()
 monkey.eat()
 
 Animal {type: "dog", eat: ƒ} Animal {type: "monkey", eat: ƒ} I am eating food. Error */
Copy the code

As you can see, changing the eat method of the monkey object does not affect the eat method of the dog object. Dog successfully executed the eat method inherited from Animal, while monkey successfully executed its own eat method instead of Animal’s eat method after modifying it. This violates the principle of inheritance. What is inheritance? Inheritance is when instance objects inherit a method of the parent class, and if the parent class modifies the method, all instance objects will change.

In addition, one problem with defining a class this way is that each instance object generated will be large, since each object will have an EAT method. So how do you write that?

Function (‘ eat ‘, ‘prototype’); function (‘ eat ‘, ‘prototype’);

 let Animal = function (type) {
   this.type = type
 }
 
 // Use the prototype chain to define the eat() method
 Animal.prototype.eat = function () {
   console.log('I am eating food.')}let dog = new Animal('dog')
 let monkey = new Animal('monkey')
 
 console.log(dog)
 console.log(monkey)
 
 dog.eat()
 monkey.eat()
 
 Animal {type: "dog"} Animal {type: "monkey"} I am eating food. I am eating food. */
Copy the code

The screenshot of the running result is as follows:

In the figure above, {type: “dog”} and {type: “Monkey”} represent two instances of itself, and then these two examples point to the scope of a layer, which is on the prototype chain, mount eat method above, this is the way of using the prototype chain of the inheritance (understandable to a two branches, roots and all public methods on the roots, rather than the branch). The result is the same output.

In this case, if we modify the eat method on the prototype chain of one instance object, the eat method on the prototype chain of the other instance object will also change:

 let Animal = function (type) {
   this.type = type 
 }
 
 Animal.prototype.eat = function () {
   console.log('I am eating food.')}let dog = new Animal('dog')
 let monkey = new Animal('monkey')
 
 console.log(dog)
 console.log(monkey)
 
 // Modify the eat method on the monkey object prototype chain
 monkey.constructor.prototype.eat = function () { // monkey. Constructor refers to the Animal function
   console.log('error')
 }
 
 dog.eat()
 monkey.eat()
 
 Animal {type: "dog"} Animal {type: "monkey"} error error */ Animal {type: "monkey"
Copy the code

As you can see, “error” is printed at the end.

Conclusion: In ES5, function is used to define a class as a constructor. Only things unique to the instance object are written in function, and public things are put in the prototype chain.

2. ES6Defined in the class

ES6 uses class to declare classes, for example:

 class Animal {
   // constructor, pass parameters, initialize
   constructor (type) {
     this.type = type
   }
   // Define an eat() method
   eat () {
     console.log('I am eating food.')}}// Generate a dog instance object
 let dog = new Animal('dog')
 // Generate a monkey instance object
 let monkey = new Animal('monkey')
 
 console.log(dog)
 console.log(monkey)
 
 dog.eat()
 monkey.eat()
 // Print the Animal type
 console.log(typeof Animal)
 
 Animal {type: "dog"} Animal {type: "monkey"} I am eating food. I am eating food
Copy the code

The screenshot of the running result is as follows:

Typeof Animal: function (); eat (); eat (); In other words, the effect is the same as that of ES5 directly written on the prototype chain of function. In other words, classes in ES6 are just syntactic sugar 1 for classes declared in ES5 with prototype chains (the syntax is different, but the essence is the same).

Bottom line: Classes in ES6 are really syntactic sugar for declaring classes in ES5 with stereotype chains.