ES5 ,ES6 继承详解

ES5 继承：

父类：

  // 创建一个人的类
function Person (name) {
  // 属性
  this.name = name;
  // 方法
  this.eat = function(){
    console.log(this.name + '正在吃饭！');
  }
}
// 原型方法
Person.prototype.sing = function(song) {
  console.log(this.name + '正在唱：' + song);
};

1、原型链继承

核心： 将父类的实例作为子类的原型

//1. 原型链继承
function Singer(){
 
}
Singer.prototype = new Person();
Singer.prototype.name = '李志';
Singer.prototype.constructor = Singer;
//　Test Code
var lizhi = new Singer();
console.log(lizhi.name); //李志
lizhi.sing('定西'); //李志正在唱：定西
lizhi.eat(); //李志正在吃饭！
//判断实例是否属于它的父类
console.log(lizhi instanceof Person); //true 
console.log(lizhi instanceof Singer); //true

特点：
    1.非常纯粹的继承关系，实例是子类的实例，也是父类的实例
    2.父类新增原型方法/原型属性，子类都能访问到
    3.简单，易于实现
缺点：
    1.要想为子类新增属性和方法，必须要在new Person()这样的语句之后执行，不能放到构造器中
    2.无法实现多继承
    3.来自原型对象的所有属性被所有实例共享
    4.创建子类实例时，无法向父类构造函数传参

2、构造继承

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

// 构造继承
function Singer(name){
  Person.call(this);
  this.name = name;
}
// Test Code
var lizhi = new Singer('李志');
console.log(lizhi.name); // 李志
lizhi.eat();  // 李志正在吃饭！
// lizhi.sing('天空之城'); // lizhi.sing is not a function
console.log(lizhi instanceof Person); // false
console.log(lizhi instanceof Singer); // true

特点：
    1.解决了1中，子类实例共享父类引用属性的问题
    2.创建子类实例时，可以向父类传递参数
    3.可以实现多继承（call多个父类对象）
缺点：
    1.实例并不是父类的实例，只是子类的实例
    2.只能继承父类的实例属性和方法，不能继承原型属性/方法
    3.无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3、实例继承

核心：为父类实例添加新特性，作为子类实例返回

// 实例继承
function Singer(name){
  var instance = new Person();
  instance.name = name;
  return instance;
}
// Test Code
var lizhi = new Singer('李志');
console.log(lizhi.name); // 李志
lizhi.eat(); // 李志正在吃饭！
lizhi.sing('山阴路的夏天'); // 李志正在唱：山阴路的夏天
console.log(lizhi instanceof Person); // true
console.log(lizhi instanceof Singer); // false

特点：
    1.不限制调用方式，不管是 new 子类() 还是 直接 子类(),返回的对象具有相同的效果
缺点：
    1.实例是父类的实例，不是子类的实例
    2.不支持多继承

4、拷贝继承
 

// 拷贝继承
function Singer(name){
  var person = new Person(name);
  // 遍历 person 实例 的属性
  for(var k in person){
    Singer.prototype[k] = person[k];
  }
}
// Test Code
var lizhi = new Singer('李志');
console.log(lizhi.name); // 李志
lizhi.eat();  // 李志正在吃饭！
lizhi.sing('杭州');  // 李志正在唱：杭州
console.log(lizhi instanceof Person); // false
console.log(lizhi instanceof Singer); // true
 

特点：
    1.支持多继承
缺点：
    1.效率较低，内存占用高（因为要拷贝父类的属性）
    2.无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

5、组合继承

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

// 组合继承
function Singer(name){
  Person.call(this);
  this.name = name;
}
Singer.prototype = new Person();
Singer.prototype.constructor = Singer;
// Test Code
var lizhi = new Singer('李志');
console.log(lizhi.name); // 李志
lizhi.eat();  // 李志正在吃饭！
lizhi.sing('墙上的向日葵');  // 李志正在唱：墙上的向日葵
console.log(lizhi instanceof Person); // true
console.log(lizhi instanceof Singer); // true

特点：
    1.弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
    2.既是子类的实例，也是父类的实例
    3.不存在引用属性共享问题
    4.可传参
    5.函数可复用
缺点：
    1.调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

6、寄生组合继承（常用）

核心：通过寄生方式，不会调用两次父类的构造函数，就不会初始化两次实例方法/属性，修复了组合继承的缺点

// 寄生组合继承
function Singer(name){
  Person.call(this);
  this.name = name;
}
// 1.创建一个用于寄生的类
function Par(){}
// 2.将父类的原型作为它的原型
Par.prototype = Person.prototype;
// 3.将它的实例作为子类的原型
Singer.prototype = new Par();
Singer.prototype.constructor = Singer;
// Test Code
var lizhi = new Singer('李志');
console.log(lizhi.name); // 李志
lizhi.eat();  // 李志正在吃饭！
lizhi.sing('忽然');  // 李志正在唱：忽然
console.log(lizhi instanceof Person); // true
console.log(lizhi instanceof Singer); // true

ES6 类的继承：

1.父类：

// 先定义一个 人 的父类
class Person {
  // constructor 表示父类中的 构造方法
  constructor(name){
    this.name = name;
  }
  // 方法
  sing(song){
    console.log(this.name + '正在唱：' + song);
  }
}

2.子类：

//定义一个 歌手 的子类,子类要继承 Person这个类,要通过 extends 关键字
class Singer extends Person {
  constructor(name,age){
    // super() 表示调用父类的构造方法，也就是父类constructor中的内容
    // 子类在构造方法中使用 super ,必须放到 this 前面(必须先调用父类中的构造方法，再使用子类的构造方法)
    super(name);
    // 子类私有的 属性
    this.age = age
  }
  // 子类私有的 方法
  eat(){
    console.log(this.name + '正在吃饭！');
  }
}
 
// 实例
let lizhi = new Singer('李志',38)
console.log(lizhi.name); // 李志
lizhi.eat()  // 李志正在吃饭！
lizhi.sing('米店');  // 李志正在唱：米店
console.log(lizhi instanceof Person); // true
console.log(lizhi instanceof Singer); // true