ES5原型继承和ES6原型继承

原型

• 什么是原型？
  • 每个对象都有一个原型，可以通过原型构造出实例
  • 原型的construct指向构造函数
  • 通过构造函数实例化的对象指向原型
• prototype和__proto__都代表原型，有什么区别？
  • 构造函数中的原型是prototype
  • 实例化对象的原型是__proto__
  • __proto__是浏览器厂商推出的获取方法
  • 也可以使用Object.getPrototypeOf(实例化对象)，获取实例化对象的原型

原型链

原型继承实现了什么

• 实现子类能够继承父类的属性和方法
• 实现复用的效果
• 由于js对象引用类型特性，当属性为引用类型时
• 错误的继承子类更改自身属性会引起其他子类属性的更改
• 正确的继承子类和其他子类不共享属性的引用地址

ES5原型继承方法区别

---

ES5继承方法	描述
原型链继承	缺点1：实例化时不能传递参数给父类 缺点2：父类属性为引用类型时, 导致子类引用类型属性改变, 会影响其他子类的属性
借用构造函数	可以传递参数， 缺点1：复用性不高 缺点2：只能继承属性不能继承父类方法
组合继承	前两个的结合优化， 缺点1：会调用两次SuperType构造函数, 且父类属性保留在原型上
寄生组合继承	使用Object.create创建新的引用地址， 解决引用地址共享问题， 且只在借用构造函数传递参数中时调用new

• 原型链继承

function SuperType() {
  this.obj = [1, 2, 4];
}
SuperType.prototype.method = function () {
  return "父类原型方法";
};
function SubType(name) {
  this.subName = name;
}
SubType.prototype = new SuperType();
// 缺点1：无法子类实例时传递参数给父类
const instanceObj = new SubType("sub");
// 缺点2：当引用类型的属性改变时，会影响共享其他属性值
console.log(instanceObj.obj);
instanceObj.obj.push(3);
const instanceObj2 = new SubType();
console.log(instanceObj2.obj);

• 借用构造函数继承

function SuperType(name) {
  this.name = name;
  this.arr = [1, 2, 4];
}
SuperType.prototype.method = function () {
  return "父类原型方法";
};
function SubType(name, subName) {
  SuperType.call(this, name);
  this.subName = subName;
}
// 缺点1：难以复用
const instanceObj = new SubType("name", "subName");
console.log(instanceObj);
console.log(instanceObj.method()) //缺点2：报错，子类无法调用父类方法
instanceObj.arr.push(3);
const instanceObj2 = new SubType("name2", "subName2");
console.log(instanceObj2);

• 组合继承

function SuperType() {
  this.arr = [1, 2, 4];
}
SuperType.prototype.method = function () {
  return "父类原型方法";
};
function SubType(name, subName) {
  SuperType.call(this, name); // 第二次调用 SuperType
  this.subName = subName;
}
const prototype = new SuperType(); // 第一次调用 SuperType
SubType.prototype = prototype ;

//缺点1：需要调用两次SuperType父类方法
const instanceObj = new SubType("name", "subName");
console.log(instanceObj);
console.log(instanceObj.method());
instanceObj.arr.push(3);
const instanceObj2 = new SubType("name2", "subName2");
console.log(instanceObj2);

• 寄生组合继承

function SuperType(name) {
  this.arr = [1, 2, 4];
  this.name = name;
}
SuperType.prototype.method = function () {
  return "父类原型方法";
};
function SubType(name, subName) {
  SuperType.call(this, name);
  this.subName = subName;
}
// 区别是使用了Object.create而不是用new去继承
function inheritPrototype() {
  const prototype = Object.create(SuperType.prototype);
  prototype.constructor = SuperType.constructor;
  // 上两句替代了new SuperType();
  SubType.prototype = prototype;
}
inheritPrototype();
//缺点1：需要调用两次SuperType父类方法
const instanceObj = new SubType("name", "subName");
instanceObj.arr.push(3);
console.log(instanceObj); //实例化对象
console.log(instanceObj.method()); //父类原型方法
const instanceObj2 = new SubType("name2", "subName2");
console.log(instanceObj2);

• 组合继承与寄生组合继承区别
  • 主要区别使用new还是object.create
    传送门

ES6继承 class关键词

• ES5继承的语法糖，快速实现原型继承

// 父类
class SuperType {
  constructor(property) {
    this.property = property;
  }
  toString() {
    return `父类方法打印:${this.property}`;
  }
}
// 子类
class SubType extends SuperType {
  constructor(property, subProperty) {
    super(property);
    this.subProperty = subProperty;
  }
}
// 实例化对象
const instanceObj = new SubType("父属性", "子属性");
console.log(instanceObj);
console.log(instanceObj.toString());