zoukankan      html  css  js  c++  java
  • js 继承

    继承(5种方法)

    1.使用对象冒充实现继承(该种实现方式可以实现多继承)

    实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

        function Parent(firstname)  
        {  
            this.fname=firstname;  
            this.age=40;  
            this.sayAge=function()  
            {  
                console.log(this.age);  
            }  
        }  
        function Child(firstname)  
        {  
            //以下三行就是实现冒充的关键
            this.parent=Parent;  
            this.parent(firstname);  
            delete this.parent;  
            this.saySomeThing=function()  
            {  
                console.log(this.fname);  
                this.sayAge();  
            }  
        }  
        var mychild=new  Child("李四");  
        mychild.saySomeThing();  

    2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)

    实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

        function Parent(firstname)  
        {  
            this.fname=firstname;  
            this.age=40;  
            this.sayAge=function()  
            {  
                console.log(this.age);  
            }  
        }  
        function Child(firstname)  
        {  
          
            this.saySomeThing=function()  
            {  
                console.log(this.fname);  
                this.sayAge();  
            }  
           this.getName=function()  
           {  
               return firstname;  
           }  
          
        }  
        var child=new Child("张三");  
        Parent.call(child,child.getName());  //call(被继承的对象,参数);
        child.saySomeThing(); 

    3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)

    实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

      function Parent(firstname)  
        {  
            this.fname=firstname;  
            this.age=40;  
            this.sayAge=function()  
            {  
                console.log(this.age);  
            }  
        }  
        function Child(firstname)  
        {  
          
            this.saySomeThing=function()  
            {  
                console.log(this.fname);  
                this.sayAge();  
            }  
            this.getName=function()  
            {  
                return firstname;  
            }  
          
        }  
        var child=new Child("张三");  
        Parent.apply(child,[child.getName()]);  //apply(被继承对象,[参数])**传入参数以数组形式传入;
        child.saySomeThing();  

    4.采用原型链的方式实现继承

    原型链适合无参数继承

    实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

     function Parent()  
        {  
          
            this.sayAge=function()  
            {  
                console.log(this.age);  
            }  
        }  
        function Child(firstname)  
        {  
            this.fname=firstname;  
            this.age=40;  
            this.saySomeThing=function()  
            {  
                console.log(this.fname);  
                this.sayAge();  
            }  
        }  
          
        Child.prototype=new  Parent();  
        var child=new Child("张三");  
        child.saySomeThing();  

    5.采用混合模式实现继承

        function Parent()  
        {  
          
            this.sayAge=function()  
            {  
                console.log(this.age);  
            }  
        }  
          
        Parent.prototype.sayParent=function()  
        {  
           alert("this is parentmethod!!!");  
        }  
          
        function Child(firstname)  
        {  
            Parent.call(this);  
            this.fname=firstname;  
            this.age=40;  
            this.saySomeThing=function()  
            {  
                console.log(this.fname);  
                this.sayAge();  
            }  
        }  
          
        Child.prototype=new  Parent();  
        var child=new Child("张三");  
        child.saySomeThing();  
        child.sayParent();  
  • 相关阅读:
    桌面图标有蓝底
    创建与删除SQL约束或字段约束
    (转)ASP.NET(C#) 读取EXCEL ——另加解决日期问题
    ASP连接11种数据库的语法
    GridView 合并列、行类
    Office对应ContentType
    (解决办法)ASP.NET导出Excel,打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
    (转)js判断只能输入数字或小数点
    vscode设置字体大小
    springsecurity+jwt实现登录
  • 原文地址:https://www.cnblogs.com/xxxo/p/asfs.html
Copyright © 2011-2022 走看看