码迷,mamicode.com
首页 > Web开发 > 详细

js中的6中继承方式

时间:2018-03-25 19:23:34      阅读:296      评论:0      收藏:0      [点我收藏+]

标签:com   指定   技术   属性   函数继承   rip   ret   分享图片   create   

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中继承方式

标签:com   指定   技术   属性   函数继承   rip   ret   分享图片   create   

原文地址:https://www.cnblogs.com/xingguozhiming/p/8645857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!