js继承

1.继承分类

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

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

image.png
2.继承方式

-原型式继承

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

SubType.prototype = new SubType();
// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向,否则子类的构造函数会执行SubType
SubType.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,但是还是会有细微的差别

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容

  • 继承的概念:子类可以使用父类共享的属性和方法,避免重复代码提高代码复用性。 原型链:子类可以共享父类的实例对象和实...
    浅秋_6672阅读 400评论 0 0
  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 3,139评论 1 2
  • 一、原型链 学过java的同学应该都知道,继承是java的重要特点之一,许多面向对象的语言都支持两种继承方式:接口...
    grain先森阅读 1,420评论 0 39
  • 说实在话,以前我只需要知道“寄生组合继承”是最好的,有个祖传代码模版用就行。最近因为一些事情,几个星期以来一直心心...
    grain先森阅读 302评论 0 2
  • 原文链接 js的继承有6种方式,大致总结一下它们各自的优缺点,以及它们之间的关系。 1.原型链 js的继承机制不同...
    空_城__阅读 796评论 0 11