当前位置：首页 > JavaScript

实现继承js

2026-01-15 15:25:04JavaScript

实现继承的方式

在JavaScript中，实现继承可以通过多种方式完成，每种方式都有其优缺点。以下是几种常见的实现继承的方法：

原型链继承

原型链继承是最基本的继承方式，通过将子类的原型指向父类的实例来实现继承。

function Parent() {
    this.name = 'Parent';
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child() {
    this.childName = 'Child';
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

const child = new Child();
child.sayName(); // 输出: Parent

构造函数继承

构造函数继承通过在子类的构造函数中调用父类的构造函数来实现继承。

function Parent(name) {
    this.name = name;
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

const child = new Child('Child', 10);
console.log(child.name); // 输出: Child
console.log(child.age); // 输出: 10

组合继承

组合继承结合了原型链继承和构造函数继承的优点，既继承了父类的属性，又继承了父类的方法。

function Parent(name) {
    this.name = name;
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

const child = new Child('Child', 10);
child.sayName(); // 输出: Child
console.log(child.age); // 输出: 10

原型式继承

原型式继承通过创建一个临时构造函数来实现继承，类似于Object.create()方法。

function createObject(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}

const parent = {
    name: 'Parent',
    sayName: function() {
        console.log(this.name);
    }
};

const child = createObject(parent);
child.name = 'Child';
child.sayName(); // 输出: Child

寄生式继承

寄生式继承在原型式继承的基础上增强了对象的功能。

function createEnhancedObject(obj) {
    const clone = Object.create(obj);
    clone.sayHello = function() {
        console.log('Hello');
    };
    return clone;
}

const parent = {
    name: 'Parent',
    sayName: function() {
        console.log(this.name);
    }
};

const child = createEnhancedObject(parent);
child.sayHello(); // 输出: Hello
child.sayName(); // 输出: Parent

寄生组合式继承

寄生组合式继承是目前最理想的继承方式，避免了组合继承中调用两次父类构造函数的问题。

function inheritPrototype(child, parent) {
    const prototype = Object.create(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

function Parent(name) {
    this.name = name;
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

inheritPrototype(Child, Parent);

const child = new Child('Child', 10);
child.sayName(); // 输出: Child
console.log(child.age); // 输出: 10

ES6中的类继承

ES6引入了class和extends关键字，使得继承更加简洁和直观。

class Parent {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(this.name);
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}

const child = new Child('Child', 10);
child.sayName(); // 输出: Child
console.log(child.age); // 输出: 10