zoukankan      html  css  js  c++  java
  • es5中的类 继承 (原型链继承,寄生继承,组合继承)

    1.最简单的类

        function Person(){
            this.name='张三';
            this.age=20;
        }
        var p=new Person();
        alert(p.name);
    

    2、构造函数和原型链里面增加方法

        function Person(){
            this.name='张三';  /*属性*/
            this.age=20;
            this.run=function(){
                alert(this.name+'在运动');
            }
        }
        //原型链上面的属性会被多个实例共享   构造函数不会
        Person.prototype.sex="男";
        Person.prototype.work=function(){
            alert(this.name+'在工作');
        
        }
        var p=new Person();
        // alert(p.name);
        // p.run();
        p.work();
    

    3,类里面的静态方法

        function Person(){
            this.name='张三';  /*属性*/
            this.age=20;
            this.run=function(){  /*实例方法*/
                alert(this.name+'在运动');
            }
        }
        Person.getInfo=function(){
            alert('我是静态方法');
        }
        //原型链上面的属性会被多个实例共享   构造函数不会
        Person.prototype.sex="男";
        Person.prototype.work=function(){
            alert(this.name+'在工作');
    
        }
        var p=new Person();    
        p.work();
        //调用静态方法
        Person.getInfo();
    

    4、es5里面的继承 对象冒充实现继承

       function Person(){
            this.name='张三';  /*属性*/
            this.age=20;
            this.run=function(){  /*实例方法*/
                alert(this.name+'在运动');
            }
        }      
        Person.prototype.sex="男";
        Person.prototype.work=function(){
             alert(this.name+'在工作');
        }
       
        //Web类 继承Person类   原型链+对象冒充的组合继承模式
        function Web(){
            Person.call(this);    /*对象冒充实现继承*/
        }
        var w=new Web();
       // w.run();  //对象冒充可以继承构造函数里面的属性和方法
    
        w.work();  //对象冒充可以继承构造函数里面的属性和方法   但是没法继承原型链上面的属性和方法
    

    5、es5里面的继承 原型链实现继承

       function Person(){
            this.name='张三';  /*属性*/
            this.age=20;
            this.run=function(){  /*实例方法*/
                alert(this.name+'在运动');
            }
        }      
        Person.prototype.sex="男";
        Person.prototype.work=function(){
             alert(this.name+'在工作');
        }
       
        //Web类 继承Person类   原型链+对象冒充的组合继承模式
    
        function Web(){
         
        }
    
       Web.prototype=new Person();   //原型链实现继承
       var w=new Web();
        //原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
        //w.run();
    
        w.work();
    

    6、 原型链实现继承的 问题?

       function Person(name,age){
            this.name=name;  /*属性*/
            this.age=age;
            this.run=function(){  /*实例方法*/
                alert(this.name+'在运动');
            }
    
        }      
        Person.prototype.sex="男";
        Person.prototype.work=function(){
             alert(this.name+'在工作');
        }
       
       var p=new Person('李四',20);
       p.run();
    
    
    function Person(name,age){
            this.name=name;  /*属性*/
            this.age=age;
            this.run=function(){  /*实例方法*/
                alert(this.name+'在运动');
            }
    }      
    Person.prototype.sex="男";
    Person.prototype.work=function(){
            alert(this.name+'在工作');
    }
    function Web(name,age){
    }
    
    Web.prototype=new Person();
    
    var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
    
    w.run();
    
    // var w1=new Web('王五',22);
    

    7.原型链+对象冒充的组合继承模式

    function Person(name,age){
    this.name=name; /属性/
    this.age=age;
    this.run=function(){ /实例方法/
    alert(this.name+'在运动');
    }
    }
    Person.prototype.sex="男";
    Person.prototype.work=function(){
    alert(this.name+'在工作');
    }
    function Web(name,age){
    Person.call(this,name,age); //对象冒充继承 实例化子类可以给父类传参
    }
    Web.prototype=new Person();
    var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
    // w.run();
    w.work();
    // var w1=new Web('王五',22);

    8、原型链+对象冒充继承的另一种方式

    function Person(name,age){
    this.name=name; /属性/
    this.age=age;
    this.run=function(){ /实例方法/
    alert(this.name+'在运动');
    }
    }
    Person.prototype.sex="男";
    Person.prototype.work=function(){
    alert(this.name+'在工作');
    }

    function Web(name,age){
        Person.call(this,name,age);   //对象冒充继承  可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
    }
    
    Web.prototype=Person.prototype;
    
    var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
    
     w.run();
    // w.work();
    
    // var w1=new Web('王五',22);
  • 相关阅读:
    维度穿梭
    演绎与抽象
    幻想的功能
    深层探宝
    内存游戏
    函数内功
    共享与私有的变量
    参数的格式
    功能模拟与功能实现
    【Oracle】基础知识查漏补缺
  • 原文地址:https://www.cnblogs.com/mr17/p/13589351.html
Copyright © 2011-2022 走看看