详解JavaScript中ES5和ES6的类、继承之间区别和联系

导读： 很多JavaScript的初学者（比如说我）在刚开始学习这门语言的时候，往往会对函数、对象、类、继承这些概念感到迷茫和疑惑，感觉他们彼此之间长得十分相似，这就导致很难分清他们什么时候该怎么用。特别是JavaScript中有了原型这个概念之后，就觉得更加混乱了。本篇文章我就从一个初学者的角度身份来去梳理一下这些概念和用法之间的区别与联系，力图能让同样是初学者的你很好的分清这些概念之间的用法。

ES5中类、对象和原型

ES5没有真正定义类的关键字，它通过函数首字母大写的方式来告诉别人这是一个类，看起来是比较诡异的。比如下面代码：

function People(name, age) {
   
   
    // 实例属性
    this.name = name
    this.age = age
}

// 类实例化对象
let xiaoming = new People('xiaoming', 22)

我们接下来举例子都是用People这个类来举例子，具体实例化对象会是某一个person对象。如同上面代码所示，我们通过首字母大写的方式定义一个类（或者说告诉大家，这不是一个普通函数，这是一个类），如果写成函数的话，要首字母小写，也就是写成people的形式。但这样的话，就很容易混淆了，前面用function定义的话，这到底是函数还是类呢？判断是类还是函数的关键在于new这个关键字。如果通过new赋值的话，就是一个类，并实例化对象。如果没有的话，就算是一个函数。至于是不是首字母大写，不是重点。我们来看下面一个例子。

function People() {
   
   
  console.log('我的名字是小明')
}

People()

这样的语句就会直接执行函数，这就是类和函数之间的区别，在于关键字new而不是是否首字母大写，我们一般约定，首字母大写的是类。

ES5中也没有构造函数的关键字。构造函数可以理解为，类在实例化对象时所传的最初的参数，让每一个对象具有各自不同的特点。比如我们最初的这个代码：

function People(name, age) {
   
   
    // 实例属性
    this.name = name
    this.age = age
}

// 类实例化对象
let xiaoming = new People('xiaoming', 22)

我们可以传递xiaoming也可以传递xiaoli，这样就会声明两个不同的实例化对象。我们通过的是this关键字来实现构造函数的功能。this表示对于当前对象的引用。我们没有构造函数关键字的话，People既算是一个类，同时也担负起了类中构造函数的责任。

我们演示完在类中如何添加属性之后，下面看看如何在类中添加方法。方法和函数也是容易混淆的概念，具体实现的话功能基本上是一样的。就是