一、类的声明

1.ES5的做法

/*
* ES5类的声明
 */
// 每个子类特有的属性或方法写到父类的内部
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)

// 子类覆盖父类方法
monkey.constructor.prototype.eat = function () {
  console.log('monkey eat')
}

// 子类执行方法时先查找自己的，然后顺着原型链往上找
dog.eat()
monkey.eat()

console.log(typeof Animal) // function

2.ES6的做法

/*
* ES6类的声明
 */
class Animal {
  constructor (type) {
    this.type = type
  }

  eat () {
    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()

console.log(typeof Animal) // function

二、属性读写

getter - JavaScript | MDN
setter - JavaScript | MDN

let _age = 4
class Animal {
  constructor (type) {
    this.type = type
  }
  get age () {
    return _age
  }
  set age (val) {
    if (val < 7 && val > 4) {
      _age = val
    }
  }
}

let dog = new Animal('dog')

console.log(dog)

console.log('修改之前：', dog.age)
dog.age = 5
console.log('修改之后：', dog.age)

三、类的静态方法

1.ES5中类的静态方法

/*
* ES5类的静态方法
 */
let Animal = function (type) {
  this.type = type
}

// 共有方法挂到父类的原型链上
Animal.prototype.eat = function () {
  // 静态方法只能通过类来使用
  Animal.walk()
  console.log('I am eating food')
}
// 静态方法通过类来声明
Animal.walk = function () {
  console.log('I am walking')
}

// 实例对象声明
let dog = new Animal('dog')

console.log(dog)
dog.eat()
// 类的静态方法无法通过类的实例化对象使用
dog.walk() // dog.walk is not a function

2.ES6中类的静态方法

/*
* ES6类的静态方法
 */
class Animal {
  constructor (type) {
    this.type = type
  }

  eat () {
    Animal.walk()
    console.log('I am eating food')
  }

  static walk () {
    console.log('I am walking')
  }
}

// 实例对象声明
let dog = new Animal('dog')

console.log(dog)
dog.eat()
// 类的静态方法无法通过类的实例化对象使用
dog.walk() // dog.walk is not a function

四、类的继承

1.ES5中类的继承

/*
* ES5类的继承
 */
let Animal = function (type) {
  this.type = type
}

// 共有方法挂到父类的原型链上
Animal.prototype.eat = function () {
  // 静态方法只能通过类来使用
  Animal.walk()
  console.log('I am eating food')
}
// 静态方法通过类来声明
Animal.walk = function () {
  console.log('I am walking')
}

// 子类声明
let Dog = function () {
  // 初始化父类的构造函数（call是用来改变this的指向），实现一部分继承
  Animal.call(this, 'dog')
  this.run = function () {
    console.log('I am running')
  }
}

// 将父类原型链挂载到子类，实现另一部分继承(引用复制)
Dog.prototype = Animal.prototype

// 子类实例化
let dog = new Dog()
console.log(dog)
dog.eat()
dog.run()

2.ES6中类的继承

/*
* ES6类的继承
 */
class Animal {
  constructor (type) {
    this.type = type
  }

  eat () {
    Animal.walk()
    console.log('I am eating food')
  }

  static walk () {
    console.log('I am walking')
  }
}

class Dog extends Animal {
  // 若子类相对父类构造方法无新属性或方法，可省略即隐式调用
  constructor (type) {
  	// super代表父类构造函数
    super(type)
    this.age = 2
  }

  run () {
    console.log('I am running')
  }
}

// 实例对象声明
let dog = new Dog('dog')

console.log(dog)
dog.eat()
dog.run()

拓展：

• JS实现继承的几种方法总结
• js继承的几种方法和es6继承方法
• JavaScript原型和原型链的方法介绍（代码示例）