ES5与ES6的class基础语法（如何声明一个类）

一、在ES5的时候，是没有类的概念的

代码如下：

let Animal = function (type) {
  this.type = type
  this.walk = function () {
    console.log('I am walking')
  }
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')
console.log(dog)
console.log(monkey)
monkey.walk()

// 这个walk方法居然还能改，本来不能修改walk的，但是成功了，说明违背了继承的原则
monkey.walk = function(){
  console.log('猴子 walk')
}
monkey.walk()

缺陷一：上面代码在monky实例中修改了walk方法，是违背继承原则的

缺陷二：如果有很多方法，如果每个方法下面都有一个东西，是不是头疼，如上面截图中都有一个walk:f 这个东西。

解决缺陷二：可以将公有的抽离添加到他的原型链上去，这样子就简单多了。

如下代码所示：

// 把共有的方法写道Animal的原型链上去，而不是直接写在里面，看下面代码
let Animal = function (type) {
  this.type = type
}

// 将共有的方法抽出来，将他挂在到原型链上去
Animal.prototype.walk = function(){
  console.log('I am walking')
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')
console.log(dog)
console.log(monkey)
dog.walk()
monkey.walk()

效果如图：

二、ES6的做法，里面引入了class类的概念，使之更加简单了

根据ES5优化成ES6的代码，代码如下所示：

class Animal {
  constructor(type){
    this.type = type
  }
  walk () {
    console.log('I am walking')
  }
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')
console.log(dog)
console.log(monkey)
dog.walk()
monkey.walk()

效果图：

说明：看了效果图是不是感觉和上面那里一样呢，哈哈哈！

其实说真的，ES6真的多了class这种类型吗，哈哈，那你就太傻了，其实他就是函数类型的，不信你看

console.log(typeof Animal); //function

其实ES6做法比ES5更加方便了。

所以得出结论：class 的方式是 function 方式的语法糖。