zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    8088汇编跳转和PSW状态字寄存器
    Delphi的函数指针
    服务器系统及软件常见漏洞
    TGraphiControl响应WM_MOUSEMOVE的过程(以TPaintBox为例)good
    两个奇怪的取地址符号
    把x指针指向的4个字节次序颠倒过来
    DELPHI中的消息处理机制(三种消息处理方法的比较,如何截断消息)
    探索C++的底层机制
    setprecision、fixed、showpoint的用法总结(经典!!超经典!!)
    段寄存器和8种地址寻址方式
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/8645857.html
Copyright © 2011-2022 走看看