js继承

89 阅读12分钟

做前端开发已经好几年了,技术与工作年限不匹配,自查,将知识点整理出来,自我完善,也希望能帮助到大家。

本内容是参考《JavaScript高级程序(第3版)》学习。

继承

继承时oo语言(面向对象语言)中的一个最为人津津乐道的概念。

许多oo语言都支持两种继承方式:接口继承和实现继承。

接口继承只继承方法签名,而实现继承则继承实际的方法。

由于函数没有签名,在ECMAScript中无法实现接口继承。

ECMAScript只支持实现继承,而且实现继承主要是依靠原型链来实现的。

原型链

ECMAScript将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

假如我们让原型对象等于另外一个类型的实例,结果会怎样呢?

那此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。

假如另一个原型又是另一个类型的实例,那么上述冠以依然成立,层层递进,就构成了实例与原型的链条。

这就是原型链的基本概念。

// 实现原型链的一种基本模式,代码大致如下
function SuperType () {
  this.property = true;
};SuperType.prototype.getSuperValue = function () {
  return this.property;
};
​
function SubType () {
  this.subproperty = false;
};
​
// 继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
  return this.subproperty;
};
​
const instance = new SubType();
console.log(instance.getSuperValue());    // true

实现的本质是重写原型对象,代之以一个新类型的实例。

在确立了继承关系之后,我们给 SubType.prototype 添加了一个方法,这样就在继承了 SuperType 的属性和方法的基础上又添加了一个新方法。

在上面的代码中,我们没有使用SubType默认提供的原型,而是给他换了一个新原型;这个新原型就是SuperType的实例。于是,新原型不仅具有作为一个SuperType的实例所拥有的全部属性和方法,而且其内部还有一个指针,指向了SuperType的原型.

最终结果是这样:instance指向 SubType的原型, SubType 的原型又指向 SuperType 的原型。getSuperValue() 方法仍然还在 SuperType.prototype中, property则位于 SubType.prototype中。 这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例,那么property当然就位于该实例中了。

此外,需要注意instance.constructor现在指向的是SuperType, 这是因为原来SubType.prototype 中的 constructor 被重写了的缘故。

通过实现原型链,本质上扩展了原型搜索机制

确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。(下面的举例,都是根据上面的SuperType例子)

第一种方式是使用instanceof操作符,只要用这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回treu

instance instanceof Object    // true
instance instanceof SuperType   // true
intance instanceof SubType    // true

第二种方式是使用isPrototypeOf() 方法。只要原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。

Object.prototype.isPrototypeOf(instance);     // true
SuperType.prototype.isPrototypeOf(instance);  // true
SubType.prototype.isPrototypeOf(instance);    // true

子类型有时候需要重写超类型中的某个方法,或者需要添加超类型中不存在的某个方法。但不管怎样,给原型添加方法的代码一定要放在替换原型的语句之后

function SuperType () {
  this.property = true;
};
SuperType.prototype.getSuperValue = function () {
  return this.property;
};
function SubType () {
  this.subproperty = false;
};
// 继承了 SuperType
SubType.prototype = new SuperType();
// 添加新方法
SubType.prototype.getSubValue = function () {
  return this.subproperty;
};
// 重写超类型的方法
SubType.prototype.getSuperValue = function () {
  return false;
};
const instance = new SubType();
console.log(instance.getSuperValue());    // false

需要注意的是,在通过原型链实现继承时,不能使用对象字面量创建原型方法。这样做会重写原型链。

原型链的问题

原型链虽然很强大,可以用它来实现继承,但也存在一些问题。其中,最主要的问题来自包含引用类型值的原型。包含引用类型值的原型属性会被所有实例共享;而这也是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性了。

第二个问题是:在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上是没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。

基于这两点,实践中会很少会单独使用原型链。

借用构造函数

借用构造函数有时候也叫伪造对象或经典继承。

这种技术思想相当简单,即在子类型构造函数的内部调用超类型构造函数。

function SuperType () {
  this.colors = ['red', 'blue', 'green'];
};
function SubType () {
  // 在这里继承 SuperType
  SuperType.call(this);
}
​
const instance1 = new SubType();
instance1.colors.push('blank');
console.log(instance1.colors);    // ['red', 'blue', 'green', 'blank'];const instance2 = new SubType();
console.log(instance2.colors);    // ['red', 'blue', 'green'];

实际上是在(未来将要)新创建的SubType实例的环境下调用了SuperType 构造函数。这样一来,就会在新SubType 对象上执行SuperType()函数中定义的所有对象初始化代码。结果,SubType 的每个实例就都会有自己的colors属性的副本。

相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。为了确保超类型构造函数不会重写子类型的属性,可以在调用超类型构造函数后,再添加应该在子类型中定义的属性。

借用构造函数的问题

如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题--方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有所有类型只能使用构造函数模式。考虑到这些问题,借用构造函数的技术也很少单独使用的。

组合继承

组合继承,有时候也叫做伪经典继承,指的是将原型链和借用构造和拿书的技术组合到一起,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,即通过在原型上定义方法实现了函数复用,又能够保证每个实例都有自己的属性。

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;
};SubType.prototype = new SuperType();
SubType.prototupe.constructor = SubType;
SubType.prototype.sayAge = function () {
  alert(this.age);
};
const instance1 = new SubType('Nicholas', 30);
instance1.colors.push('black');
alert(instance1.colors);    // red,blue,green,blank
instance1.sayName();        // Nicholas
instance1.sayAge();         // 30
​
const instance2 = new SubType('Greg', 27);
alert(instance2.colors);    // red, blue, green
instance2.sayName();    // Greg
instance2.sayAge();     // 27

组合继承避免了原型链和借用构造函数的缺陷,融合了他们的优点,成为JavaScript中最常用的继承模式。而且,instanceof和isPrototypeOf() 也能够用于识别基于组合继承创建的对象。

原型式继承

道格拉斯·克罗克福德在2006年发表的文章中,介绍一种实现继承的方法,这种方法没用使用严格意义上的构造函数。他的想法是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

function object (o) {
  function F () {};
  F.prototype = o;
  return new F();
}

object()函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例。从本质上讲,object()对传入其中的对象执行了一次浅复制。

克罗克福德主张的这种原型式继承,要求必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话,可以把他传递给object()函数,然后再根据具体需求对得到的对象加以修改即可。

ECMAScript5通过新增Object.create()方法规范了原型式继承。这个方法接受两个参数:一个用做新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,Object.create()object()方法的行为相同。

const person = {
  name: 'Musa',
  friends: ['shelby', 'court', 'van']
};
​
const anotherPerson = Object.create(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('rob');
​
const yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = 'linda';
yetAnotherPerson.friends.push('barbie');
alert(person.friends);  // shelby, court, van, rob, barbie

Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同: 每个属性都是通过子集的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性

const person = {
  name: 'Nicholas',
  friends: ['shelby', 'court', 'van']
};

const anotherPerson = Object.create(person, {
  name: {
    value: 'greg'
  }
});

alert(anotherPerson.name);		// greg

在没有必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承时完全可以胜任的。不过别忘了,包含引用类型值的属性始终都会共享相应的值,就像使用原型模式一样。

寄生式继承

寄生式继承是与原型式继承紧密相关的一种思路,并且同样也是由克罗克福德推广的。寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

function createAnother (original) {
  const clone = object(original);	// 通过调用函数创建一个新对象
  clone.sayHi = function () {		// 以某种方式增强这个对象
    alert('hi');
  };
  return clone;		// 返回这个对象
}

在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。上面示范继承模式时使用的object()函数不是必须的;任何能够返回新对象的函数都适用于此模式。

使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一点与构造函数模式类似。

寄生组合式继承

组合继承是JavaScript中最常用的继承模式;不过,他也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类原型的时候,另一次是在子类型构造函数内部。子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数式重写这些属性。

所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

function inheriPrototype(subType, SuperType) {
  const prototype = object(superType.prototype);	// 创建对象
  prototype.constructor = subType;		// 增强对象
  subType.prototype = prototype;			// 指定对象
}

小结

JavaScript主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的。这样,子类型就能够访问超类型的所有属性和方法,这一点与基于类的继承很相似。原型链的问题对象实例共享所有继承的属性和方法,因此不适宜单独使用。解决这个问题的技术是借用构造函数,即在子类型的构造函数的内部调用超类型构造函数。这样就可以做到每个实例都具有自己的属性,同时还能保证只使用构造函数模式来定义类型。使用最多的继承模式是组合继承,这种模式使用原型链李继承共享的属性和方法,而通过构造函数继承实例属性。

此外,还存在下列柯工选择的继承模式。

  • 原型式继承,可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以进一步改造。
  • 寄生式继承,与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式与组合继承一起使用
  • 寄生组合式模式,集寄生式继承和组合继承的优点与一身,是实现基于类型继承的最有效方式。

谢谢!