一、ES6之前的继承
来自：https://www.jianshu.com/p/5cb692658704
原型赋值方式
简而言之，就是直接将父类的一个实例赋给子类的原型。如下示例：
function Person(name){
this.name=name;
this.className="person"
}
Person.prototype.getClassName=function(){
console.log(this.className)
}
function Man(){
}
Man.prototype=new Person();//1
//Man.prototype=new Person("Davin");//2
var man=new Man;
>man.getClassName()
>"person"
>man instanceof Person
>true
如代码中1处所示，这种方法是直接new 了一个父类的实例，然后赋给子类的原型。这样也就相当于直接将父类原型中的方法属性以及挂在this上的各种方法属性全赋给了子类的原型，简单粗暴！我们再来看看man,它是Man的一个实例，因为man本身没有getClassName方法，那么就会去原型链上去找，找到的是person的getClassName。这种继承方式下，所有的子类实例会共享一个父类对象的实例，这种方案最大问题就是子类无法通过父类创建私有属性。比如每一个Person都有一个名字，我们在初始化每个Man的时候要指定一个不同名字，然后子类将这个名字传递给父类，对于每个man来说，保存在相应person中的name应该是不同的，但是这种方式根本做不到。所以，这种继承方式，实战中基本不用！
调用构造函数方式
function Person(name){
this.name=name;
this.className="person"
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
var man1=new Man("Davin");
var man2=new Man("Jack");
>man1.name
>"Davin"
>man2.name
>"Jack"
>man1.getName() //1 报错
>man1 instanceof Person
>true
这里在子类的在构造函数里用子类实例的this去调用父类的构造函数，从而达到继承父类属性的效果。这样一来，每new一个子类的实例，构造函数执行完后，都会有自己的一份资源(name)。但是这种办法只能继承父类构造函数中声明的实例属性，并没有继承父类原型的属性和方法，所以就找不到getName方法，所以1处会报错。为了同时继承父类原型，从而诞生了组合继承的方式:
组合继承
function Person(name){
this.name=name||"default name"; //1
this.className="person"
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
//继承原型
Man.prototype = new Person();
var man1=new Man("Davin");
> man1.name
>"Davin"
> man1.getName()
>"Davin"
这个例子很简单，这样不仅会继承构造函数中的属性，也会复制父类原型链中的属性。但是，有个问题，Man.prototype = new Person(); 这句执行后，Man的原型如下：
> Man.prototype
> {name: "default name", className: "person"}
也就是说Man的原型中已经有了一个name属性，而之后创建man1时传给构造的函数的name则是通过this重新定义了一个name属性，相当于只是覆盖掉了原型的name属性（原型中的name依然还在），这样很不优雅。
分离组合继承
这是目前es5中主流的继承方式，有些人起了一个吊炸天的名字“寄生组合继承”。首先说明一下，两者是一回事。分离组合继承的名字是我起的，一来感觉不装逼会好点，二来，更确切。综上所述，其实我们可以将继承分为两步：构造函数属性继承和建立子类和父类原型的链接。所谓的分离就是分两步走；组合是指同时继承子类构造函数和原型中的属性。
function Person(name){
this.name=name; //1
this.className="person"
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
//注意此处
Man.prototype = Object.create(Person.prototype);
var man1=new Man("Davin");
> man1.name
>"Davin"
> man1.getName()
>"Davin"
这里用到了Object.creat(obj)方法，该方法会对传入的obj对象进行浅拷贝。和上面组合继承的主要区别就是：将父类的原型复制给了子类原型。这种做法很清晰：
- 构造函数中继承父类属性／方法，并初始化父类。
- 子类原型和父类原型建立联系。
还有一个问题，就是constructor属性，我们来看一下：
> Person.prototype.constructor
< Person(name){
this.name=name; //1
this.className="person"
}
> Man.prototype.constructor
< Person(name){
this.name=name; //1
this.className="person"
}
constructor是类的构造函数，我们发现，Person和Man实例的constructor指向都是Person，当然，这并不会改变instanceof的结果，但是对于需要用到construcor的场景，就会有问题。所以一般我们会加上这么一句：
Man.prototype.constructor = Man二、ES6类和继承
来自：https://blog.csdn.net/qq_34645412/article/details/83584178?utm_source=app
首先看代码
class Person {
constructor(name){
console.log(`构造函数执行了,${name}`)
}
}
let p1= new Person('jona')
此处，调用new的时候就自动执行了构造函数，所以接收参数也是在构造函数出接收
class Person {
constructor(name){
console.log(`构造函数执行了,${name}`)
this.name=name
}
showName(){
return `名字为${this.name}`
}
}
let p1= new Person('jona')
console.log(p1.showName)
此处函数不会自动执行，只有调用的时候才会执行console.log(p1.showName)
继承：
// 父类
class Person {
constructor(name){
console.log(`构造函数执行了,${name}`)
this.name=name
}
showName(){
return `名字为${this.name}`
}
}
let p1= new Person('jona')
console.log(p1.showName)
// 子类
class children extends Person{
constructor(agrs){
super(ags)
}
showName (){
super.showName()//调用父级的方法也是用super
}
}
let p2 = new children('子类')
console.log(p2.name)
继承用extends,当继承后需要用super()来接收父类的constructor构造函数，否在报错，当new一个子类的时候先把参数传入子类构造函数再通过super（）讲父类的构造函数引入，就可以调用父类。
三、ES5/ES6 的继承除了写法以外还有什么区别？
来自：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/20
1.class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。
const bar = new Bar(); // it's ok
function Bar() {
this.bar = 42;
}
const foo = new Foo(); // ReferenceError: Foo is not defined
class Foo {
constructor() {
this.foo = 42;
}
}2.class 声明内部会启用严格模式。
// 引用一个未声明的变量
function Bar() {
baz = 42; // it's ok
}
const bar = new Bar();
class Foo {
constructor() {
fol = 42; // ReferenceError: fol is not defined
}
}
const foo = new Foo(); 3.class 的所有方法（包括静态方法和实例方法）都是不可枚举的。
// 引用一个未声明的变量
function Bar() {
this.bar = 42;
}
Bar.answer = function() {
return 42;
};
Bar.prototype.print = function() {
console.log(this.bar);
};
const barKeys = Object.keys(Bar); // ['answer']
const barProtoKeys = Object.keys(Bar.prototype); // ['print']
class Foo {
constructor() {
this.foo = 42;
}
static answer() {
return 42;
}
print() {
console.log(this.foo);
}
}
const fooKeys = Object.keys(Foo); // []
const fooProtoKeys = Object.keys(Foo.prototype); // [] 4.class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。
function Bar() {
this.bar = 42;
}
Bar.prototype.print = function() {
console.log(this.bar);
};
const bar = new Bar();
const barPrint = new bar.print(); // it's ok
class Foo {
constructor() {
this.foo = 42;
}
print() {
console.log(this.foo);
}
}
const foo = new Foo();
const fooPrint = new foo.print(); // TypeError: foo.print is not a constructor 5.必须使用 new 调用 class。
function Bar() {
this.bar = 42;
}
const bar = Bar(); // it's ok
class Foo {
constructor() {
this.foo = 42;
}
}
const foo = Foo(); // TypeError: Class constructor Foo cannot be invoked without 'new' 6.class 内部无法重写类名。
function Bar() {
Bar = 'Baz'; // it's ok
this.bar = 42;
}
const bar = new Bar();
// Bar: 'Baz'
// bar: Bar {bar: 42}
class Foo {
constructor() {
this.foo = 42;
Foo = 'Fol'; // TypeError: Assignment to constant variable
}
}
const foo = new Foo();
Foo = 'Fol'; // it's ok