重学ES6（二）：ES5和ES6中Class类的相同与不同

// ES5函数来描写类
// 声明类
let Animal = function (type) {
  this.type = type
  // 定义实例方法
  this.drink = function () {
    console.log(‘drink‘)
  }
}

// 定义原型方法
Animal.prototype.eat = function () {
  console.log(‘eat food‘)
}

// 实例化
let dog = new Animal(‘dog‘)
let monkey = new Animal(‘monkey‘)

// ES6 class
// class的本质是ES5用原型链声明类的语法糖
class Animal {
  constructor (type) {
    this.type = type
  }
  eat () {
    console.log(‘eat food‘)
  }
}

let dog = new Animal(‘dog‘)
let monkey = new Animal(‘monkey‘)

let _age = 4
class Animal {
  constructor (type) {
    this.type = type
  }
  get age () {
    return _age
  }
  set age (val) {
    this.realage = val
  }
  eat () {
    console.log(‘eat food‘)
  }
}

let dog = new Animal(‘dog‘)
console.log(dog.age) // 4
dog.age = 5 // 未生效 get定义的为只读属性
console.log(dog.age) // 4
console.log(dog.realage) // 5

let Animal = function (type) {
  this.type = type
  // 实例方法
  this.drink = function () {
    // 实例方法可调用类的静态方法
    Animal.walk()
    console.log(‘drink‘)
  }
}

// 原型方法
Animal.prototype.eat = function () {
  // 原型方法可调用类的静态方法
  Animal.walk()
  console.log(‘eat food‘)
}

// 静态方法
Animal.walk = function () {
  console.log(‘walking‘)
}

let dog = new Animal(‘dog‘)
dog.drink() // walking drink
dog.eat() // walking eat food
Animal.walk() // walking静态方法只能由<类自身&实例方法&原型方法>调用，实例对象无法调用
// dog.walk() // dog.walk is not a function  实例对象无法调用静态方法

class Animal {
  constructor (type) {
    this.type = type
  }
  // 定义实例对象的方法
  eat () {
    // 使用静态方法，以类形式访问，而非this访问
    Animal.walk()
    console.log(‘eat food‘)
    console.log(this.type) // 类的例实例对象的方法可以获取到实例对象的信息，输出dog
  }
  // static 定义类的静态方法
  static walk () {
    console.log(‘walking‘)
    console.log(this.type) // 类的静态方法无法获取到实例对象的信息，输出undefined
  }
}
let dog = new Animal(‘dog‘)
dog.eat() // walking ； undefined ； eat food ； dog
Animal.walk() // walking ； undefined ；
dog.walk() // dog.walk is not a function
// 得出结论：需要访问实例对象的信息时用实例对象的方法，否则使用static静态方法
// 实例方法就是只有实例可以调用，静态方法只有构造函数可以调用，原型方法是实例和构造函数都可以调用，是共享的方法。

let Animal = function (type) {
  this.type = type
  // 实例方法
  this.drink = function () {
    // 实例方法可调用类的静态方法
    Animal.walk()
    console.log(‘drink‘)
  }
}

// 原型方法
Animal.prototype.eat = function () {
  // 原型方法可调用类的静态方法
  Animal.walk()
  console.log(‘eat food‘)
}

// 静态方法
Animal.walk = function () {
  console.log(‘walking‘)
}

let Dog = function () {
  // 初始化父类的构造函数，call的作用是改变this指向dog的实例
  Animal.call(this, ‘dog‘)
  this.run = function () {
    console.log(‘run‘)
  }
}

// 两个原型链指向相同，子类才可以用父类的方法
Dog.prototype = Animal.prototype

let dog = new Animal(‘dog‘)
dog.eat()  // 实例对象能调用类定义在原型上的实例对象的方法
// dog.walk() // 实例对象不能调用类的静态方法

let realdog = new Dog(‘realdog‘)
realdog.eat()
realdog.run()

class Animal {
  constructor (type, age) {
    this.type = type
    this.age = age
  }
  detail () {
    console.log(this.type + ‘ ‘ + this.age)
  }
}

class Dog extends Animal {
  // 定义子类的构造函数
  constructor (type, age, sex) {
    // super()要和父类的constructor一致
    // super关键字表示调用父类的构造方法，也就是父类constructor中的内容
    super(type, age)
    this.sex = sex
  }
  ndetail () {
    console.log(this.type + ‘ ‘ + this.age + ‘ ‘ + this.sex)
  }
}

// let cat = new Animal(‘cat‘, 20)
// cat.detail()
let dog = new Dog(‘dog‘, 5, ‘gong‘)
dog.ndetail()