继承方式

总所周知，在JavaScript中其实是利用原型和原型链来实现继承机制的，属性和方法要么存在于自身，要么存在于原型链上。那么很明显，我们实现继承时，无非就两种方法：要么将父类的属性和方法复制到子类，要么将子类和父类串到原型链上。

因为原型链的关系，JavaScript中的继承并不和传统OOP中的继承一样。在传统的OOP中，继承是一种复制行为，在JavaScript中，继承实际上是一种引用行为。

更多：简单说说原型和原型链

达成上面的共识之后，我们再来看看常见的这几种继承方式：

原型链继承

function SuperType() {    this.name = 'Willem';}SuperType.prototype.sayHi = function() {    console.log(this.name);}function SubType(age) {    this.age = age;}// new返回的其实是一个__proto__指向SuperType.prototype和SuperType所有属性的对象// 也就是实例化之后的 sub.__proto__指向了SuperType.prototypeSubType.prototype = new SuperType();var sub = new SubType(18);console.log(sub);

关系图如下：

这种继承的方式实际上是利用了new会创建一个拥有指向类的原型的__proto__，并复制类上所有属性的对象，直接将子类的prototype替换掉。上述图已经描述的很清楚了，不难理解，本质还是将子类和父类串在了原型链上，利用sub.__proto__.__proto__.__proto__...这种方式对被继承类的属性和方法进行访问。

缺点：

引用类型会被共享。这点很明显，通过new SuperType()来手动修改SubType.prototype，相当于是直接将一个对象赋值给prototype，那么通过原型链找到的其实是同一个对象中的属性。

function Super() {    this.colors = ['red', 'green', 'blue'];}function Child() {}Child.prototype = new Super();const c1 = new Child();const c2 = new Child();c1.colors.pop();console.log(c1.colors, c2.colors); // ['red', 'green']  ['red', 'green']

不能向父类传参

更多：模拟实现js中的new操作符

经典继承（借用构造函数）

function SuperType(name) {    this.name = name;    this.colors = ['red', 'green', 'blue'];    this.sayHi = function() {        console.log(this.name);    }}function SubType(name, age) {    SuperType.call(this, name);    this.age = age;}const sub = new SubType('Willem', 18);const c2 = new SubType('Willem', 22);sub.colors.pop();console.log(sub.colors, c2.colors); // ["red", "green"] ['red', 'green', 'blue']

利用构造函数的方式，实际上是利用call函数将父类的所有属性和方法复制了一份到子类中，因为这种方式只是简单复制并没有修改原型链，所以只会继承父类构造函数中的属性，而不会继承父类prototype上的方法。

优点：

避免了引用类型被共享。

缺点：

因为方法都是定义在构造函数中，所以无法复用。
无法使用instanceof判断sub和SuperType的关系。

更多：模拟实现Javascript中的call和apply

组合继承

组合继承是实际继承中使用最广泛的一种方式，将原型链继承和构造函数继承融合到了一起，集两家之长，及能保证属性的独立，又能复用原型上的函数。

function SuperType(name) {    this.name = name;    this.colors = ['red', 'green'];}SuperType.prototype.sayHi = function() {    console.log(this.name);}function SubType(name, age) {    // 构造函数继承    SuperType.call(this, name);    this.age = age;}// 原型链继承SubType.prototype = new SuperType();SubType.prototype.constructor = SubType;SubType.prototype.sayAge = function() {    console.log(this.age);}const c1 = new SubType('Willem', 18);const c2 = new SubType('Wei', 20);c1.colors.push('blue');console.log(c1.colors, c2.colors); // ['red', 'green', 'blue'] ['red', 'green']c1.sayHi(); // Willemc1.sayAge(); // 18

原型式继承

这种继承方式其实就是Object.create的实现，对传入的对象进行了一个浅复制。利用这种方式也可以看做是修改了原型链的结构。

function createObject(o) {    function F() {}    F.prototype = o;    return new F();}const person = {    name: 'Willem',    colors: ['red', 'green']};const p1 = createObject(person);const p2 = createObject(person);p1.name = 'Wei';p1.colors.push('blue');console.log(p1, p2);

缺点：

可以看到的是，同样作为引用属性的colors被共享了。

寄生式继承

const person = {    name: 'Willem',    colors: ['red', 'green']};function createObject(o) {    function F() {}    F.prototype = o;    return new F();}function createAnother(o) {    const clone = createObject(o);    clone.sayHi = function() {        console.log(‘Hi’, this.name);    }    return clone;}createAnother(person)

利用工厂函数，所以能保证属性的独立性，但和借助构造函数一样，不能复用函数。

寄生组合式继承

function createObject(o) {    function F() {}    F.prototype = o;    return new F();}function prototype(child, parent) {    var prototype = createObject(parent.prototype);    prototype.constructor = child;    child.prototype = prototype;}prototype(Child, Parent);

小结

以上几种继承方式中，使用次数最多的便是组合继承了。而不管哪种继承方式，本质上无非就两种：复制属性、修改原型链。以上就是原型链的相关知识，希望对各位有所帮助。

参考：JavaScript高级程序设计第三版