ES5原型继承和ES6原型继承

原型

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

ES5原型继承和ES6原型继承ES5原型继承和ES6原型继承

原型链

ES5原型继承和ES6原型继承

原型继承实现了什么

  • 实现子类能够继承父类的属性和方法
  • 实现复用的效果
  • 由于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());
上一篇:E - Rebuild UVALive - 7187 (二次函数极值问题)


下一篇:Hadoop源码分类概要整理