JavaScript继承

JavaScript继承教程

继承是面向对象的三大特征之一，也是实现代码复用的重要手段。继承经常用于创建和现有对象功能类似的新对象，又或是新对象只需要在现有对象基础上添加一些属性和方法，但又不想直接将现有对象代码复制给新对象。

JavaScript继承好处

继承是实现代码复用的重要手段，也就是说子对象可以使用父对象的属性和方法，子对象不必自己再定义一套。

JavaScript实现继承

JavaScript 中，实现继承有六种方法，即，分别为：使用原型链继承、借用构造函数继承、原型链+借用构造函数的组合继承、组合继承、 组合继承–优化版 以及 ES6 中 class 的继承。

JavaScript原型链继承详解

语法

function Object1(attr1, attr2) {
    this.attr1 = attr1;
    this.attr2 = attr2;
}
function Object2(attr3) {
    this.attr3 = attr3;
}
Object2.prototype = new Object1();

说明

我们通过将 Object2 的 prototype 设置为了 Object1 对象，从而实现了 Object2 继承了 Object1。

JavaScript构造函数继承详解

语法

function Object1(attr1, attr2) {
    this.attr1 = attr1;
    this.attr2 = attr2;
}
function Object2(attr1, attr2, attr3) {
    Object1.call(this, attr1, attr2);
    this.attr3 = attr3;
}

说明

我们通过在子类型构造函数中通过 call() 调用父类型 构造函数，从而实现了继承。

JavaScript原型链和构造函数组合继承详解

语法

function Object1(attr1, attr2) {
	this.attr1 = attr1;
    this.attr2 = attr2;
}
function Object2(attr1, attr2, attr3) {
    Object1.call(this,attr1,attr2);
    this.attr3 = attr3;
}
Object2.prototype = new Object1();
Object2.prototype.constructor = Object2; //组合继承也是需要修复构造函数指向的

说明

通过原型链和构造函数的组合实现了继承。

JavaScript组合继承详解

语法

function Object1(attr1, attr2) {
	this.attr1 = attr1;
	this.attr2 = attr2;
}
function Object2(attr1, attr2, attr3) {
    Object1.call(this, attr1, attr2);
    this.attr3 = attr3
}
Object2.prototype = Object1.prototype;

说明

这种方式通过父类原型和子类原型指向同一对象实现了继承。

JavaScript组合继承优化

语法

function Object1(attr1, attr2) {
	this.attr1 = attr1;
	this.attr2 = attr2;
}
function Object2(attr1, attr2, attr3) {
    Object1.call(this, attr1, attr2);
    this.attr3 = attr3
}
Object2.prototype = Object.create(Object1.prototype);
Object2.prototype.constructor = Object1;

说明

借助原型可以基于已有的对象来创建对象。

ES6 中 class 的继承

语法

class Object1 {
    //调用类的构造方法
    constructor(attr1, attr2) {
        this.attr1 = attr1;
        this.attr2 = attr2;
    }
}
class Object2 extends Object1 {
    constructor(attr1, attr2, attr3) {
        super(attr1, attr2); //通过super调用父类的构造方法
        this.attr3 = attr3;
    }
}

说明

我们通过 ES6 中的 class 实现了继承。