免费帮忙内推阿里等各大IT公司的岗位,有兴趣能够带简历加微信angeltune
说实在话,之前我只须要知道“寄生组合继承”是最好的,有个祖传代码模版用就行。最近由于一些事情,几个星期以来一直心心念念想整理出来。本文以《JavaScript高级程序设计》上的内容为骨架,补充了ES6 Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,但愿你们能有所收获。
先来个总体印象。如图所示,JS中继承能够按照是否使用object函数(在下文中会提到),将继承分红两部分(Object.create是ES5新增的方法,用来规范化这个函数)。前端
其中,原型链继承和原型式继承有同样的优缺点,构造函数继承与寄生式继承也相互对应。寄生组合继承基于Object.create, 同时优化了组合继承,成为了完美的继承方式。ES6 Class Extends的结果与寄生组合继承基本一致,可是实现方案又略有不一样。编程
下面立刻进入正题。segmentfault
上图上半区的原型链继承,构造函数继承,组合继承,网上内容比较多,本文不做详细描述,只指出重点。这里给出了我认为最容易理解的一篇《 JS中的继承(上)》。若是对上半区的内容不熟悉,能够先看这篇文章,再回来继续阅读;若是已经比较熟悉,这部分能够快速略过。另,上半区大量借用了yq前端的一篇继承文章[1]。
核心:将父类的实例做为子类的原型微信
SubType.prototype = new SuperType() // 全部涉及到原型链继承的继承方式都要修改子类构造函数的指向,不然子类实例的构造函数会指向SuperType。 SubType.prototype.constructor = SubType;
优势:父类方法能够复用
缺点:函数
核心:将父类构造函数的内容复制给了子类的构造函数。这是全部继承中惟一一个不涉及到prototype的继承。性能
SuperType.call(SubType);
优势:和原型链继承彻底反过来。优化
缺点:父类的方法不能复用,子类实例的方法每次都是单首创建的。this
核心:原型式继承和构造函数继承的组合,兼具了两者的优势。spa
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
优势:prototype
缺点:
调用了两次父类的构造函数,第一次给子类的原型添加了父类的name, arr属性,第二次又给子类的构造函数添加了父类的name, arr属性,从而覆盖了子类原型中的同名参数。这种被覆盖的状况形成了性能上的浪费。
核心:原型式继承的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);
核心:使用原型式继承得到一个目标对象的浅复制,而后加强这个浅复制的能力。
优缺点:仅提供一种思路,没什么优势
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"
刚才说到组合继承有一个会两次调用父类的构造函数形成浪费的缺点,寄生组合继承就能够解决这个问题。
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继承的结果和寄生组合继承类似,本质上,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继承的语法糖
不一样点:
[1]《js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承》[2]《JavaScript高级编程》