Classes and inheritance in ES5 and ES6

What is inheritance

To put it bluntly, it is to make connections between objects

Inheritance in ES5

The idea of ​​inheritance in ES5 is like this

• Use functions as classes
• Class as template
• The things made according to the template are called object instances
• Object instances have the same things as classes
• The attributes of the class are written directly in the class
• Functions can also be written in classes
• Too many functions, the properties inherited by each instance may be different, but the behavior is consistent
• So separate the behavior from the class
• Put the behavior in the public area
• This area is the prototype on the method of the class
• Use prototype for inheritance

//使用函数作为类
function Animal(name,age){
    
    
  //把属性放类中
  this.name = name 
  this.age = age
}
//把方法放在类的原型上
Animal.prototype.eat = function(){
    
    
  console.log(`${
      
      this.name} is eating`)
}

//子类继承父类
function Cat(name,age,color){
    
    
  Animal.call(this,name,age)
  this.color = color
}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat
//实例化对象
let cat = new Cat('小猫','2','black')
console.log(cat)
console.log(cat.eat())

Static properties and methods of classes in ES5

That is, the method is not hung in the public area, but is attached to the class, so that it will not be inherited and cannot be called by the object of the instance.

//定义
function Animal(name,age){
    
    
  //把属性放类中
  this.name = name
}
//静态属性
Animal.sex = 'female'

//静态方法
Animal.getSex = function(){
    
    
  console.log('这只动物是雌性的')
}

//调用
console.log(Animal.sex)
Animal.getSex()

Inheritance in ES6

The idea of ​​inheritance in ES5 is like this

• Use class to declare a class
• Class as template
• The things made according to the template are called object instances
• Object instances have the same things as classes
• The attributes of the class are directly written in the constructor of the class
• The function is also written in the class
• Use extends inheritance
• Use super to inherit properties

class Animal {
    
    
    //把属性放类的构造函数中
    constructor(name,age){
    
    
      this.name = name 
      this.age = age
   }
    //直接写方法
    eat(){
    
    
       console.log(`${
      
      this.name} is eating`)
    }
}

//使用extends继承,属性继承使用super，方法直接默认，不需要额外操作
class Cat extends Animal{
    
    
   constructor(name,age,color){
    
    
      super(name,age)
      this.color = color
   }
}
//实例化对象
let cat = new Cat('小猫','2','black')
console.log(cat)
console.log(cat.eat())

Static methods and properties of classes in ES6

Same as es5

Private properties of classes in ES6

It is exactly the same as the private property in the previous object, using getter and setter

//隐藏真正的属性_age，只能访问age这个接口，每次修改必须经过set
let _age = 18
class People {
    
    
  constructor(name,sex){
    
    
    this.name = name
    this.sex = sex
    this.age = _age
  }
  set age(val){
    
    
    if(val < 25 && val>0){
    
    
      _age = val
    }
  }
  get age(){
    
    
    return _age
  }
}

let people = new People('小明','男')
console.log(people) 
people.age = 12
console.log(people)