JS中的六种继承方式以及优缺点总结

下面是详细讲解“JS中的六种继承方式以及优缺点总结”的完整攻略。

JS中的六种继承方式

在JS中，继承是OO的一个重要的概念，通过继承可以实现代码的重用和封装性，JS中有六种继承方式，分别是：

1.原型链继承

原型链继承是JS中最常见的一种继承方式，它是利用原型对象来实现的，将子类的原型指向父类的实例，从而实现子类继承父类的方法和属性。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log(this.name);
};
function Student(name,grade){
    this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;

2.构造函数继承

构造函数继承是通过在子类的构造函数内部调用父类构造函数来实现的，使子类自身具有父类的方法和属性。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log(this.name);
};
function Student(name,grade){
    Person.call(this,name);
    this.grade = grade;
}

3.组合继承

组合继承是将原型链继承和构造函数继承结合起来，既可以实现子类继承父类原型上的属性和方法，也可以避免父类属性被多个子类共享的问题。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log(this.name);
};
function Student(name,grade){
    Person.call(this,name);
    this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;

4.原型式继承

原型式继承是利用已有的对象来创建新的对象，这种方式和原型链继承原理类似。

function createPerson(obj){
    function F(){}
    F.prototype = obj;
    return new F();
}
var person = {name:'Tom'};
var student = createPerson(person);

5.寄生式继承

寄生式继承是在原型式继承的基础上添加一个构造函数，从而对继承的对象进行加工。

function createPerson(obj){
    function F(){}
    F.prototype = obj;
    return new F();
}
function createStudent(obj,grade){
    var student = createPerson(obj);
    student.grade = grade;
    return student;
}
var person = {name:'Tom'};
var student = createStudent(person,5);

6.寄生组合式继承

寄生组合式继承是组合继承的一种优化，它避免了两次调用父类构造函数和创建不必要的父类实例的问题。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log(this.name);
};
function Student(name,grade){
    Person.call(this,name);
    this.grade = grade;
}
function inheritPrototype(subType,superType){
    var prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
inheritPrototype(Student,Person);

优缺点总结

1.原型链继承

优点：

• 父类的属性和方法可以被子类共享和继承。
• 父类的方法可以被子类重写，从而实现多态。

缺点：

• 子类无法向父类构造函数传递参数。
• 多个子类实例共享父类的引用类型属性，会相互影响，无法实现互不干扰。

2.构造函数继承

优点：

• 子类独立拥有父类的属性和方法，不会相互影响。

缺点：

• 子类无法继承父类原型上的属性和方法。
• 父类的方法无法被子类重写，无法实现多态。

3.组合继承

优点：

• 可以继承父类原型上的属性和方法。
• 父类的属性和方法在子类实例中不会共享，可以互不干扰。

缺点：

• 父类构造函数会被调用两次，创建不必要的父类实例。
• 子类原型上会存在父类的属性和方法，占用内存。

4.原型式继承

优点：

• 可以通过类似复制对象的方式创建新的对象，非常方便。

缺点：

• 新对象的属性和方法是共享的，无法实现互不干扰。

5.寄生式继承

优点：

• 可以通过类似复制对象并在其基础上进行加工的方式创建新的对象，非常方便。

缺点：

• 新对象的属性和方法是共享的，无法实现互不干扰。

6.寄生组合式继承

优点：

• 可以继承父类原型上的属性和方法。
• 不需要创建不必要的父类实例，避免了内存占用和构造函数被调用两次的问题。

缺点：

• 代码相对复杂，需要使用一个额外的函数。

示例说明

示例1：原型链继承

function Animal(){
    this.type = 'animal';
}
Animal.prototype.sayType = function(){
    console.log(this.type);
};
function Dog(name){
    this.name = name;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
var dog = new Dog('旺财');
dog.sayType();//输出：animal

该示例中的Dog类通过原型链继承Animal类的属性和方法，从而实现了sayType方法的调用。

示例2：组合继承

function Animal(){
    this.type = 'animal';
}
Animal.prototype.sayType = function(){
    console.log(this.type);
};
function Dog(name){
    Animal.call(this);
    this.name = name;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
var dog = new Dog('旺财');
console.log(dog.type);//输出：animal

该示例中的Dog类通过组合继承Animal类的属性和方法，从而实现了type属性的调用。