js如何实现继承实例

在JavaScript中实现继承的方法主要有：原型链继承、构造函数继承、组合继承、寄生组合继承。其中，寄生组合继承是最常见且推荐使用的一种继承方式，因为它避免了组合继承的缺点。下面将详细介绍寄生组合继承的实现方法，并给出具体实例。

一、原型链继承

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

优点：

简单易懂。
父类的方法可以在子类中复用。

缺点：

引用类型的属性会被所有实例共享。
无法向父类传递参数。

function Parent() {
    this.name = 'Parent';
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function() {
    return this.name;
}
function Child() {
}
Child.prototype = new Parent();
const child1 = new Child();
const child2 = new Child();
child1.colors.push('black');
console.log(child2.colors); // ['red', 'blue', 'green', 'black']

二、构造函数继承

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

优点：

可以向父类传递参数。
不会共享引用类型的属性。

缺点：

方法都在构造函数中定义，无法复用。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
function Child(name) {
    Parent.call(this, name);
}
const child1 = new Child('Child1');
const child2 = new Child('Child2');
child1.colors.push('black');
console.log(child2.colors); // ['red', 'blue', 'green']
console.log(child1.name); // Child1
console.log(child2.name); // Child2

三、组合继承

组合继承结合了原型链继承和构造函数继承的优点，但也有一些缺点。

优点：

可以向父类传递参数。
方法可以复用。

缺点：

父类构造函数会被调用两次。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function() {
    return this.name;
}
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child1 = new Child('Child1', 18);
const child2 = new Child('Child2', 20);
child1.colors.push('black');
console.log(child2.colors); // ['red', 'blue', 'green']
console.log(child1.name); // Child1
console.log(child2.name); // Child2
console.log(child1.age); // 18
console.log(child2.age); // 20

四、寄生组合继承

寄生组合继承是目前最推荐的继承方式，因为它避免了组合继承中父类构造函数被调用两次的问题。

优点：

只调用一次父类构造函数，避免多次调用带来的性能问题。
方法可以复用，属性不共享。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function() {
    return this.name;
}
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
function inheritPrototype(child, parent) {
    const prototype = Object.create(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}
inheritPrototype(Child, Parent);
const child1 = new Child('Child1', 18);
const child2 = new Child('Child2', 20);
child1.colors.push('black');
console.log(child2.colors); // ['red', 'blue', 'green']
console.log(child1.name); // Child1
console.log(child2.name); // Child2
console.log(child1.age); // 18
console.log(child2.age); // 20

五、ES6中的Class继承

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

优点：

语法简洁。
继承关系清晰。

class Parent {
    constructor(name) {
        this.name = name;
        this.colors = ['red', 'blue', 'green'];
    }
    getName() {
        return this.name;
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}
const child1 = new Child('Child1', 18);
const child2 = new Child('Child2', 20);
child1.colors.push('black');
console.log(child2.colors); // ['red', 'blue', 'green']
console.log(child1.name); // Child1
console.log(child2.name); // Child2
console.log(child1.age); // 18
console.log(child2.age); // 20

六、总结

JavaScript中有多种实现继承的方法，每种方法都有其优缺点。寄生组合继承是最推荐的方式，因为它结合了原型链继承和构造函数继承的优点，避免了两者的缺点。而ES6中的class语法则使继承变得更加简洁和直观，是现代JavaScript开发中的主流选择。

同时，在实际项目中，如果涉及到复杂的项目团队管理，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两种工具可以极大地提升团队协作和管理效率。

js如何实现继承 实例