ES5中的类和静态方法继承（原型链继承、对象冒充继承、原型链+对象冒充组合继承）

港控/mmm° 2021-11-19 13:34 397阅读 0赞

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <script>
            // 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);
        </script>
    </head>
    <body>
    
    </body>
    </html>