js继承

作者 : 开心源码 本文共3145个字,预计阅读时间需要8分钟 发布时间: 2022-05-13 共197人阅读
1.继承分类

先来个整体印象。假如所示,js中继承可以按照能否使用Object函数(在下文中会提到),将继承分为两部分(Object.create 是ES5的方法, 用来规范化这个函数)

其中,原型链继承和原型式继承有一样的优缺点,构造函数继承与寄生式继承也相互对象,寄生组合组成基于Object.create, 同时优化了组合继承,成为了完美的继承方式, ES6 Class Extends的结果与寄生组合继承基本一致,但是实现方案又略有不同

image.png

2.继承方式

-原型式继承

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

SubType.prototype = new SubType();// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向,否则子类的构造函数会执行SubTypeSubType.prototype.constructor = SubType;

优点:父类方法可以复用

缺点:

  1. 父类引用属性会被所有子类实例共享
  2. 子类构建实例时不能向父类传递参数

-构造函数继承

核心:将父类构造函数的内容复制给了子类的构造函数,这是所有继承中唯逐个个不涉及到prototype的继承

SuperType.call(SubType);

优点:和原型链继承完全反过来

  1. 父类的引用属性不会被共享
  2. 子类构建实例时可以向父类传递参数

缺点: 父类的方法不能复用,子类实例的方法每次都是单独创立的

-组合继承

核心: 原型式继承和构造函数继承的组合,兼具了二者的优点

function SuperType() {  this.name = "parent";  this.arr = [1, 2, 3];}SuperType.prototype.say = function() {  console.log("this is parent");};function SubType() {  SuperType.call(this);  // 第二次调用SuperType}SubType.prototype = new SuperType();// 第一次调用SuperType

优点:

  1. 父类的方法可以被复用
  2. 父类的引用属性不会被共享
  3. 子类构建实例时可以向父类传递参数

缺点: 调用了两次父类的构造函数,第一次给子类的原型增加了父类的name,arr属性。第二次又给子类的构造函数增加了父类的name,arr属性,从而覆盖了子类原型中的同名参数,这种被覆盖的情况造成了性能上的白费

-原型式继承

核心: 原型式继承的object方法本质上是对参数对象的一个浅复制;

优点: 父类方法可以复用

缺点:

  1. 父类的引用属性会被所有子类实例共享
  2. 子类构建实例时不能向父类传递参数
function object(o) {  function F() {}  F.prototype = o;  return new F();}var person = {  name: "周瑾",  friends: ["friends1", "friends2", "friends3"]};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push("Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);

ECMAScript 5 通过新添加 Object.create()方法规范化了原型式继承。这个方法接收两个参数:一 个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下, Object.create()与 object()方法的行为相同。——《JAVASCript高级编程》

所以上文中的代码可以转变为:

var yetAnotherPerson = object(person);// 可以转变为var yetAnotherPerson = Object.create(person);

-寄生式继承

核心:使用原型式继承取得一个目标对象的浅复制,而后加强这个浅复制的能力

优缺点: 仅提供一种思路,没什么优点

function createAnother(original) {  var clone = object(original);  clone.sayHi = function() {    console.log("hi");  };  return clone;}var person = {  name: "周瑾",  friends: ["friends1", "friends2", "friends3"]};var anotherPerson = createAnother(person);anotherPerson.sayHi();

-寄生组合继承
刚才说到组合继承有一个会两次调用父类的构造函数造成白费的缺点,寄生组合继承即可以处理这个问题

function inheritPrototype(subType, superType) {  var prototype = object(superType.prototype);  // 创立了父类原型的浅复制  prototype.constructor = subType;  // 修正原型的构造函数  subType.prototype = prototype;  // 将子类的原型替换为这个原型}function SuperType(name) {  this.name = name;  this.colors = ["red", "blue", "green"];}SuperType.prototype.sayName = function() {  alert(this.name);};function SubType(name, age) {  SuperType.call(this, name);  this.age = age;}// 核心:由于是对父类原型的复制,所以不包含父类的构造函数,也就不会调用两次父类的构造函数造成白费inheritPrototype(SubType, SuperType);SubType.prototype.sayAge = function() {  alert(this.age);};

优缺点:这是一种完美的继承方式

-ES6 Class extends

核心: ES6继承的结果和寄生组合继承类似,本质上,ES6继承是一种语法糖。但是,寄生组合继承是先创立子类实例this对象,而后再对其加强;而ES6先将父类实例对象的属性和方法,加到this上面(所以必需先调用super方法),而后再用子类的构造函数修改this。

class A {}class B extends A {  constructor() {    super();  }}

ES6实现继承的具体原理:

class A {}class B {}Object.setPrototypeOf = function(obj, proto) {  obj.__proto__ = proto;  return;  obj;};// B 的实例继承 A 的实例Object.setPrototypeOf(B.prototype, A.prototype);// B 继承 A 的静态属性Object.setPrototypeOf(B, A);
ES6继承与ES5继承的异同:

相同点:本质上ES6继承是ES5继承的语法糖。

不同点:

ES6继承中子类的构造函数的原型链指向父类的构造函数,ES5中使用的是构造函数复制,没有原型链指向。
ES6子类实例的构建,基于父类实例,ES5中不是。

总结

ES6 Class extends是ES5继承的语法糖
JS的继承除了构造函数继承之外都基于原型链构建的
可以用寄生组合继承实现ES6 Class extends,但是还是会有细微的差别

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » js继承

发表回复