js中的6中继承方式
Posted mingL
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的6中继承方式相关的知识,希望对你有一定的参考价值。
oo语言支持两种继承:接口继承和实现继承,js中函数没有方法签名,所以只支持实现继承
1.原型链继承
实现思想:原型对象也是对象,将原型对象的prototype指向父类的原型(将父对象的实例赋给子对象的原型),即可实现继承
<script type="text/javascript"> //原型链实现继承 //父类 function Parents(){ this.surname=\'王\'; this.getSurname=function(){ console.log(this.surname); } } //子类 function Child(){ } //将父类的实例赋给子类的原型,实现继承 Child.prototype=new Parents(); var c=new Child(); c.getSurname(); </script>
测试结果:
2.借用构造函数继承
实现思想:使用apply或者call()在子类的构造函数中执行父类的构造函数
<script type="text/javascript"> //借用构造函数 function Parents(){ this.surname=\'李\'; this.getSurname=function(){ console.log(this.surname); } }; function Child(){ //执行父类的构造函数 Parents.call(this); }; var c=new Child(); console.log(c); </script>
测试结果:
3.组合继承
实现思想:使用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承
<script type="text/javascript"> //组合继承 function Parents(surname){ this.surname=\'李\'; } Parents.prototype.getSurname=function(){ console.log(this.surname); } function Child(age){ //继承属性 Parents.call(this); //自己特有的属性 this.age=age } //继承方法 Child.prototype=new Parents(); Child.prototype.constructor=Child; Child.prototype.getAge=function(){ console.log(this.age); } var p=new Parents(); console.log(p) var c=new Child(12); console.log(c) </script>
测试结果:
4.原型式继承:
实现思想:通过构建一个函数,参数为父对象,函数内部创建一个新对象,将父对象赋给新对象的原型,然后返回新对象。
<script type="text/javascript"> //原型式继承 //方式一 //传入一个对象 // function extend(o){ // function F(){}; // //将对象o赋给F的原型 // F.prototype=o; // //返回F对象的实例 // return new F(); // } // var parents={ // surname:\'李\', // getSurname:function(){console.log(this.surname)} // } // //调用extend函数来实现继承 // var child=extend(parents); // child.getSurname(); //方式二 var parents={ surname:\'李\', getSurname:function(){ console.log(this.surname); } } var child=Object.create(parents); //定义子对象私有属性和方法 child.age=11; child.getAge=function(){ console.log(this.age); } child.getSurname(); child.getAge(); </script>
5.寄生式继承
实现思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式(创建子对象私有方法)来增强对象,最后再像真的是它做了所有工作一样返回对象
<script type="text/javascript"> //寄生式继承 function create(original){ //调用函数创建对象 var clone=Object.create(original); //以某种方式增强对象(创建子对象私有方法) clone.sayHi=function(){ console.log(\'hello\'); } return clone; } var parents={ surname:\'李\' } var child=create(parents); console.log(child) child.sayHi(); </script>
6.寄生组合式继承
实现思想:通过借用构造函数来继承属性,通过原型链的混成形式来继承方法(使用寄生式继承来继承父类的原型,然后将结果指定给子类的原型)。
<script type="text/javascript"> //寄生组合式继承 function inheritProto(parents,child){ var o=Object.create(parents.prototype); o.constructor=child; child.prototype=o; } //父类构造函数 function Parents(surname){ this.surname=surname; } Parents.prototype.getSurname=function(){ console.log(this.surname); } //子类构造函数 function Child(surname,age){ Parents.call(this,surname); this.age=age; } inheritProto(Parents,Child); Child.prototype.getAge=function(){ console.log(this.age); } </script>
以上是关于js中的6中继承方式的主要内容,如果未能解决你的问题,请参考以下文章