一篇文章明白JS继续——原型链/组织函数/组合/原型式/寄生式/寄生组合/Class extends

2019年8月22日 135次阅读 来源: 这是你的玩具车吗

免费帮助内推阿里等各大IT公司的岗亭，有兴致能够带简历加微信angeltune

说实在话，之前我只需要知道“寄生组合继承”是最好的，有个家传代码模版用就行。近来由于一些事变，几个礼拜以来一向心心念念想整理出来。本文以《JavaScript高等程序设计》上的内容为骨架，补充了ES6 Class的相关内容，从我以为更轻易明白的角度将继承这件事叙述出来，愿望大家能有所收成。

1. 继承分类

先来个团体印象。如图所示，JS中继承能够根据是不是运用object函数（在下文中会提到），将继承分红两部份（Object.create是ES5新增的要领，用来范例化这个函数）。

个中，原型链继承和原型式继承有一样的优瑕玷，组织函数继承与寄生式继承也互相对应。寄生组合继承基于Object.create, 同时优化了组合继承，成为了圆满的继承体式格局。ES6 Class Extends的效果与寄生组合继承基础一致，然则完成计划又略有不同。

下面立时进入正题。

《一篇文章明白JS继续——原型链/组织函数/组合/原型式/寄生式/寄生组合/Class extends》

2. 继承体式格局

上图上半区的原型链继承，组织函数继承，组合继承，网上内容比较多，本文不作详细描述，只指出重点。这里给出了我以为最轻易明白的一篇《
JS中的继承（上）》。假如对上半区的内容不熟习，能够先看这篇文章，再回来继承浏览；假如已比较熟习，这部份能够疾速略过。另，上半区大批借用了yq前端的一篇继承文章[1]。

2.1 原型链继承

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

SubType.prototype = new SuperType() 
// 一切涉及到原型链继承的继承体式格局都要修改子类组织函数的指向，不然子类实例的组织函数会指向SuperType。
SubType.prototype.constructor = SubType;

长处：父类要领能够复用
瑕玷：

  • 父类的援用属性会被一切子类实例同享
  • 子类构建实例时不能向父类通报参数

2.2 组织函数继承

中心：将父类组织函数的内容复制给了子类的组织函数。这是一切继承中唯一一个不涉及到prototype的继承。

SuperType.call(SubType);

长处：和原型链继承完整反过来。

  • 父类的援用属性不会被同享
  • 子类构建实例时能够向父类通报参数

瑕玷：父类的要领不能复用，子类实例的要领每次都是零丁建立的。

2.3 组合继承

中心：原型式继承和组织函数继承的组合，兼具了两者的长处。

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

长处：

  • 父类的要领能够被复用
  • 父类的援用属性不会被同享
  • 子类构建实例时能够向父类通报参数

瑕玷：
挪用了两次父类的组织函数，第一次给子类的原型添加了父类的name, arr属性，第二次又给子类的组织函数添加了父类的name, arr属性，从而掩盖了子类原型中的同名参数。这类被掩盖的状况形成了性能上的糟蹋。

2.4 原型式继承

中心：原型式继承的object要领本质上是对参数对象的一个浅复制。
长处：父类要领能够复用
瑕玷：

  • 父类的援用属性会被一切子类实例同享
  • 子类构建实例时不能向父类通报参数
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

ECMAScript 5 经由过程新增 Object.create()要领范例化了原型式继承。这个要领吸收两个参数:一 个用作新对象原型的对象和(可选的)一个为新对象定义分外属性的对象。在传入一个参数的状况下， Object.create()与 object()要领的行动雷同。——《JAVASCript高等编程》

所以上文中代码能够转变为

var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);

2.5 寄生式继承

中心：运用原型式继承取得一个目的对象的浅复制，然后加强这个浅复制的才能。
优瑕玷：仅供应一种思绪，没什么长处

function createAnother(original){ 
    var clone=object(original);    //经由过程挪用函数建立一个新对象
    clone.sayHi = function(){      //以某种体式格局来加强这个对象
        alert("hi");
    };
    return clone;                  //返回这个对象
}

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

2.6 寄生组合继承

适才说到组合继承有一个会两次挪用父类的组织函数形成糟蹋的瑕玷，寄生组合继承就能够处理这个题目。

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);
}

优瑕玷：这是一种圆满的继承体式格局。

2.7 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中不是。

3. 总结

  • ES6 Class extends是ES5继承的语法糖
  • JS的继承除了组织函数继承以外都基于原型链构建的
  • 能够用寄生组合继承完成ES6 Class extends，然则照样会有纤细的差异

参考文章：

[1]《js继承、组织函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承》
[2]《JavaScript高等编程》

    原文作者：这是你的玩具车吗
    原文地址: https://segmentfault.com/a/1190000015727237
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞