浅谈JavaScript中常见的几种继承

5次阅读

共计 3190 个字符，预计需要花费 8 分钟才能阅读完成。

总所周知，在 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.prototype
SubType.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(); // Willem
c1.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 高级程序设计第三版

正文完