对ES6中类class以及实例对象、原型对象、原型链之间关系的详细总结

1. 类

　　ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后用这个类来实例化对象。即类的用途：实例化对象。

// 创建一个Person类
class Person {

}
// 创建一个Person类的实例对象
const p1 = new Person()
console.log(p1)

打印结果如下：

注意，输出的p1是一个实例对象，而不是类！这里的输出结果有 Person，是为了说明这个实例对象是由谁new出来的，蓝框表示输出的确实是一个实例对象。

思考：为什么前面要带一个类呢？假设还有一个Dog类，同样new一个Dog类的实例对象p2，这时候必须通过类名来区分实例对象，否则就人畜不分了......

现在我们了解了类和实例对象，下面我们再来研究构造函数。

2. 构造函数

一般对实例对象都会有一些初始化操作，比如人有姓名和年龄，因此就出现了类的构造器方法constructor()，它的作用是给实例对象添加属性，语法如下：

//步骤1 在类中定义构造函数constructor，函数名固定
class Person {
  constructor(name,age) {//定义形参
      this.name = name;//将形参赋值给this对象的对应属性
      this.age = age;
    }
}       

//步骤2 在实例化对象的时候，传递实参
const p1 = new Person('bahg', 18); //这里的实参默认传递给Person类中的constructor
console.log(p1.name);//bahg

思考：

1、构造函数必须写吗？答：不是必须的，但是对于Person这个类而言，它没有继承任何类，如果不写构造方法也就没有任何意义。下面会讲到继承类，它可以不写构造函数，默认会调用父类的构造函数。

2、构造函数中的 this 是什么？答：是实例化对象，也就是p1

一个类除了有构造方法，还有一般方法，一般方法是用来定义行为的，比如人可以吃饭睡觉敲代码，这里我们定义一个speak方法：

 // 创建一个Person类
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      speak() {
        console.log(`名字为${this.name}的人年龄为${this.age}`)
      }
    }
    // 创建一个Person类的实例对象
    const p1 = new Person('bahg', 18)
    const p2 = new Person('zzz', 21)
    console.log(p1)
    console.log(p2)
    p1.speak()
    p2.speak()

打印结果如下：

3. 原型对象

在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。

让我们用一张图表示构造函数和实例原型之间的关系：

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

思考：

1、p1和p2为什么没有出现speak方法呢？被放到了哪里？答：类的原型对象上，如下所示：

2、speak方法是给谁用的？答：给实例对象用的

3、speak的this指向谁？答：指向它的最后调用者。注意：“谁调用它就是谁”这种说法是不准确的，因为call、apply、bind都可以更改函数中的this指向，例如 p1.speak.call({a:1,b:2}) 此时this就是undefined。

4. 继承

继承是为了复用代码，下面我们再定义一个Student类，它继承于Person类：

class Person {

   constructor(name, age) {

      this.name = name

      this.age = age

}

   speak() {

     console.log(`名字为${this.name}的人年龄为${this.age}`)

   }

}

   

class Student extends Person{

}

const s1 = new Student('小明', 15)

console.log(s1)

这里我们没有在Student类中写构造方法，但是仍然可以打印s1，说明构造器方法不是非写不可。

思考：我们什么时候需要写构造器方法呢？

答：子类有自己特有的属性时，比如学生有年级这个属性，此时就需要重新写自己的构造器方法，但是注意：一旦写了构造器，就必须调用 super() 方法，并且要写在其他属性之前！super函数的作用是调用父类的构造器。

class Student extends Person {
      constructor(name, age, grade) {
        super(name, age)
        this.grade = grade
      }
}
const s1 = new Student('小明', 15, '高一')
console.log(s1)

思考：此时Student的原型对象上有方法吗？

答：除了构造器方法之外没有其它方法，因为Student类里面没有写自己的方法。

那么问题来了，学生能够说话吗？答案是肯定的，通过s1.speak()可以打印出结果，那么speak方法在哪呢？这里就要引出原型链了。

5.原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

举例说明:person → Person → Object ，普通人继承人类，人类继承对象类

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

对于实例对象s1，它在调用speak方法时，会先去原型对象上查找，发现没有这个方法，就继续去原型链上查找，找到了父类原型对象上的speak方法，如图所示：

从始至终都只有一个speak，沿着原型链一层层去找。我们还可以对speak方法进行重写，什么时候需要重写呢？当子类要对父类方法进行扩展时，就可以重写方法。

class Student extends Person {
    constructor(name, age, grade) {
       super(name, age)
       this.grade = grade
    }
    speak() {
      console.log(`名字为${this.name}的人年龄为${this.age}，读${this.grade}`)
    }
}
const s1 = new Student('小明', 15, '高一')
console.log(s1)

思考：此时Student原型对象上有speak方法吗？答：有，s1打印结果如下：

按照原型链查找规则，当它查找到蓝色箭头的时候就直接调用speak函数了，不会再往下查找。

假设现在学生类还有自己独有的study方法，思考：

1、study方法放在了哪里？供谁使用？答：放在了Student类的原型对象上，供实例使用。

2、通过Student实例调用study时，this指向谁？答：指向Student的实例。

以上就是对类的一个复习，并没有把类的所有知识都进行复习，只是重新梳理了比较重要也是比较难理解的部分。总结如下：

1、类中的构造器不是必须写的，要对实例进行一些初始化的操作时，如添加一些指定属性时才写。如果在Student的构造器中加一行 this.job = '程序员'也是可以的，参数列表不需要变，它表示Student缔造的实例对象的工作都是程序员

2、如果A类继承B类，且A类中写了构造器，那么A类构造器中super是必须要调用的

3、类中定义的方法都是放在了类的原型对象上，供实例使用

由于之前一直没能理解类、实例对象、原型链等具体概念以及相互之间的联系，故写下这篇博客来帮助理解，如有错误请指正。

博客中原型对象及原型链部分参考了https://www.jianshu.com/p/ddaa5179cda6这篇文章。