关于js的六种继承方式及其优缺点

一、原型链继承

原型链： JavaScript中实现继承最简单的方式就是使用原型链，将子类型的原型指向父类型的实例即可，即“子类型.prototype =new 父类型();”，实现方法如下：

//为父类型创建构造函数 function SuperType () { this.name = ['zc','ls','ww']; this.property = true; } //为父类型添加方法 SuperType.prototype.getSuperValue = function() { return this.property; }; //为子类型创建构造函数 function SubType() { this.test = ['a','b','c','d'], this.subproperty = false } //子类型的原型指向父类型的实例 SubType.prototype = new SuperType(); //给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空 SubType.prototype.getSubValue = function() { return this.subproperty; } // 测试代码 var instance1 = new SubType(); instance1.name.push('yzy'); instance1.test.push('e'); console.log(instance1); console.log(instance1.getSuperValue()); //true console.log(instance1.getSubValue()); //false console.log(instance1.name); console.log(instance1.test); var instance2 = new SubType(); console.log(instance2); console.log(instance2.name); console.log(instance2.test); var instance3 = new SuperType(); console.log(instance3);

缺点： 原型链代码存在的第一个问题是由于子类型的原型是父类型的实例，也就是子类型的原型中包含的父类型的属性，从而导致引用类型值的原型属性会被所有实例所共享。以上代码的instance1.name.push(‘yzy’);就可以证明此问题的存在。而原型链的第二个问题就是：在创建子类型的实例时，不能向超类型的构造函数中传递参数。因此我们在实际开发中，很少单独使用原型链。

二、借用构造函数

借用构造函数： 为了解决原型链中存在的两个问题，开发人员开始使用一种叫做借用构造函数的技术来解决原型链中存在的问题。这种技术的实现思路也挺简单，只需要在子类型的构造函数内调用父类型的构造函数即可。别忘了，函数只不过是在特定环境中执行代码的对象，因此可以通过apply()或call()方法执行构造函数。 代码如下：

//为父类型创建构造函数 function SuperType(name) { this.name = name; this.color = ['green','red']; this.property = true; this.testFun = function() { console.log('你真棒！！'); } } //为父类型添加方法 SuperType.prototype.getSuperValue = function() { return this.property; } //为子类型创建构造函数 function SubType(name) { SuperType.call(this, name); this.test = ['a','b','c','d']; this.subproperty = false; } //给子类型添加方法，一定要在实现继承之后，否则会将指针指向父类型的实例，则方法为空 SubType.prototype.getSubValue = function() { return this.subproperty; } //测试代码 var instance1 = new SubType(['zc','ls','ww']); instance1.name.push('hello'); instance1.test.push('5'); instance1.color.push('blue'); instance1.testFun(); console.log(instance1.name); // console.log(instance1.getSuperValue()); //报错 console.log(instance1.test); console.log(instance1.getSubValue()); console.log(instance1.color); var instance2 = new SubType('yzy'); instance2.testFun(); //你真棒！！ console.log(instance2.name); // yzy // console.log(instance2.getSuperValue()); //报错 console.log(instance2.test); // a,b,c,d console.log(instance2.getSubValue()); // false console.log(instance2.color); // green , red

缺点： 可以看到以上代码中子类型SubType的构造函数内通过调用父类型"SuperType.call(this,name);"，从而实现了属性的继承，也可以在子类型创建实例的时候为父类型传递参数了，但新的问题又来了。可以看到我在父类型的构造函数中定义了一个方法：testFun，在父类型的原型中定义了一个方法：getSuperValue。可是在实例化子类型后仍然是无法调用父类型的原型中定义的方法 getSuperValue，只能调用父类型中构造函数的方法：testFun。这就同创建对象中只使用构造函数模式一样，使得函数没有复用性可言。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

三、组合继承

组合继承（原型链+借用构造函数）： 组合继承就是结合使用原型链与借用构造函数的优点，组合而成的一个模式。实现也很简单，既然是结合，那当然结合了两方的优点，即原型链继承方法，而在构造函数继承属性。 具体代码实现如下：

// 为父类型创建构造函数 function SuperType(name) { this.name = name; this.color = ['pink', 'yellow']; this.property = true; this.testFun = function () { console.log('你真棒！！'); } } // 为父类型添加方法 SuperType.prototype.getSuerperValue = function () { return this.property; } // 为子类型创建构造函数 function SubType(name) { SuperType.call(this, name); this.test = ['h1', 'h2', 'h3', 'h4']; this.subproperty = false; } // SubType.prototype = new SuperType(); //解决相同属性出现在原型中的问题，_proto_来源部分有偏差 SubType.prototype = SuperType.prototype; SubType.prototype.constructor = SubType; // 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空 SubType.prototype.getSubValue = function () { return this.subproperty; } /* 以下为测试代码示例 */ var instance1 = new SubType(['yzy', 'Jack', 'Nick']); instance1.name.push('hello'); instance1.test.push('h5'); instance1.color.push('blue'); instance1.testFun(); // 你真棒！！ console.log(instance1); console.log(instance1.name); // yzy,Jack,Nick,hello console.log(instance1.getSuerperValue()); // true console.log(instance1.test); // h1,h2,h3,h4,h5 console.log(instance1.getSubValue()); // false console.log(instance1.color); // pink,yellow,blue var instance2 = new SubType('yz'); instance2.testFun(); // 你真棒！！ console.log(instance2); console.log(instance2.name); // yz console.log(instance2.getSuerperValue()); // true console.log(instance2.test); // h1,h2,h3,h4 console.log(instance2.getSubValue()); // false console.log(instance2.color); // pink,yellow

缺点： 若再添加一个子类型，给其原型单独添加一个方法，那么其他子类型也同时拥有了这个方法，因为它们都指向同一个父类型的原型

四、原型式继承

原型式继承: 原型式继承的的实现方法与普通继承的实现方法不同，原型式继承并没有使用严格意义上的构造函数，而是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。 具体代码如下：

/* 原型式继承 */ function object(o) { function F() { } F.prototype = o; return new F(); } var person = { name: 'yzy', friends: ['bbc', 'Nick', 'Tim'] } var anotherPerson = object(person); anotherPerson.name = 'Greg'; anotherPerson.friends.push('Bob'); var anotherPerson2 = object(person); anotherPerson2.name = 'Jack'; anotherPerson2.friends.push('Rose'); console.log(person.friends); // bbc,Nick,Tim,Bob,Rose console.log(anotherPerson2); console.log(anotherPerson);

缺点： 所有实例都会继承原型上的属性; 无法实现复用

五、寄生式继承

/* 原型式继承 */ function object(o) { function F() { } F.prototype = o; return new F(); } /* 寄生式继承 */ function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert('hi'); } console.log(clone); return clone; } var person = { name: 'wuyuchang', friends: ['yzy', 'Nick', 'Rose'] } var anotherPerson = createAnother(person); anotherPerson.sayHi();

重点：就是给原型式继承外面套了个壳子。 　　　　优点：没有创建自定义类型，因为只是套了个壳子返回对象，这个函数顺理成章就成了创建的新对象。 　　　　缺点：没用到原型，无法复用。

六、寄生组合式继承

/* 寄生组合式继承 */ // 为父类型创建构造函数 function SuperType(name) { this.name = name; this.color = ['pink', 'yellow']; this.property = true; this.testFun = function () { console.log('你真棒！！'); } } // 为父类型添加方法 SuperType.prototype.getSuerperValue = function () { return this.property; } // 为子类型创建构造函数 function SubType(name) { SuperType.call(this, name); this.test = ['h1', 'h2', 'h3', 'h4']; this.subproperty = false; } // function SubType2(name) { SuperType.call(this, name); this.test = ['s1', 's2', 's3', 's4']; this.subproperty = false; } // function object(o) { function F() { } F.prototype = o; return new F(); } /* 寄生组合式继承 基本所有问题都已解决，暂时没有发现问题， 现今的完美解决方案*/ function inheritPrototype(subType, superType) { var prototype = object(superType.prototype); prototype.constructor = subType; subType.prototype = prototype; } // SubType.prototype = new SuperType(); inheritPrototype(SubType, SuperType); inheritPrototype(SubType2, SuperType); // 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空 SubType.prototype.getSubValue = function () { return this.subproperty; }; SubType.prototype.bbc = function() { console.log('哈哈哈'); }; /* 以下为测试代码示例 */ var instance1 = new SubType(['yyy', 'Jack', 'Nick']); instance1.name.push('hello'); instance1.test.push('h5'); instance1.color.push('blue'); instance1.testFun(); // 你真棒！！ instance1.bbc(); console.log(instance1); console.log(instance1.name); // yyy,Jack,Nick,hello console.log(instance1.getSuerperValue()); // true console.log(instance1.test); // h1,h2,h3,h4,h5 console.log(instance1.getSubValue()); // false console.log(instance1.color); // pink,yellow,blue var instance2 = new SubType2('yzy'); instance2.testFun(); // 你真棒！！ // instance2.bbc(); //报错 console.log(instance2); console.log(instance2.name); // yzy console.log(instance2.getSuerperValue()); // true console.log(instance2.test); // s1,s2,s3,s4 // console.log(instance2.getSubValue()); // 报错 console.log(instance2.color); // pink,yellow /* 解决了组合继承的问题 */

原文：https://blog.csdn.net/Eden_Yin/article/details/81228443