Quickly grasp the class usage of ES6

1. How to construct?

First, review the common methods for building classes in es5:

  1. The first way to write es5 is to use the prototype object method. Why not add a method to the constructor?

    Because when you instantiate an object, many of the same methods are created repeatedly, wasting resources.So you need to mount the object's methods into prtotype.

  2. The binding issues for new and this can be roughly simplified as follows:
    1. First generate a new object from New
    2. Then bind the object to this this of the constructor
    3. Then bind to the prototype object of this construction object
    4. Finally, return this object to the previously defined object

Then let's look at an example:

fuction Animal(name,age){
  this.name = name
  this.age = age
  
  // This is a waste of resources
  // this.eat = function(){
  //   console.log("I ate today")
  // }
}

// Correct practices
Animal.prototype.eat=function(){
  console.log("I ate today")
}

Then the ES6 class,class, clearly simplifies this operation

cosnt dog = new Animal("wangcai",2) // Errors will occur, ES6, like let and const, does not promote class in order to modify bad habits.

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("I ate today")
  }
}

cosnt dog = new Animal("wangcai",2)  //Correct position

class also adds static methods, set, get, and so on.

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("I ate today")
  }
  

 set name(value){
    this.tempname ="Old fellow"+value
  }
  
  get name(){
    return this.tempname
  }
  
  static introuduce(){
    console.log("I am an animal now")
  }
}

//set() get()
const dog = new Animal("giao",2)
dog.name="agiao" 
console.log(dog.name) // Old fellow agiao

// Static method
Animal.introuduce() // I am an animal now

Besides, adding a little knowledge point before inheritance, the method name of a class can be named by calculating attributes

let tempname = "giao"
class Animal{
   constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
  [tempname](){
    console.log("Give me a click giao")
  }
}

const xiaoagiao = new Animal("giaoge",30)
xiaoagiao.giao() // Give me giao

2. Inheritance

Returning to the question of inheritance, how does es5 inherit?

function Animal( name ){
  this.name = name
}
Animal.prototype.break(){
  console.log("Call!")
}

function Dog( name, age ){
  Animal.call(this,name)
  this.age = age
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

So this is called combinatorial inheritance. What combinatorial method?

  1. Attribute inheritance is borrowed inheritance, so you can see that Animal.call(this,name) is equivalent to calling the Animal function once in the Dog's constructor.Attributes They don't have chains of prototype chains, but the code takes it to Dog once, so naturally they inherit Animal's name attribute.

    Animal.call(this,name)
  2. Method inheritance is prototype inheritance. It is well known that a function generates a prototype object when it is created. A prototype property of the function points to its prototype object, and the constructor property of the prototype object points to the function.If you create a new instance of this function with new, it will have a u proto_ property pointing to the prototype object of the function.So borrowing a function instance points to the feature of a function prototype object. We instantiate the inherited function and assign the instantiated object to the prototype property of the inherited constructor, which forms a chain structure.However, the same inherited function instantiation does not have the property constructor, so we need to point its constructor at the inherited constructor.

    Dog.prototype = new Animal()
    Dog.prototype.constructor = Dog

So following this routine, we inherit the name and break methods of the Animal function using es5 syntax.

So what does ES6 do?

class Animal{
  constructor( name ){
    this.name = name 
  }
  
  break(){
    console.log("Call!")
    }
}

class Dog extends Animal {
  constructor( name, age ){
    super(name)
    this.age=age
  }
}

Now you just need to add an extends Animal when declaring the Dog class, then a super in the constructor constructor.

This super(name) is equivalent to Animal.call(this,name).Then, naturally, you don't have to worry about the method. Extds handles it automatically, so you don't have to use prototype anymore.

Tags: Javascript Attribute

Posted on Wed, 04 Mar 2020 12:43:55 -0800 by JREAM