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

最新推荐文章于 2022-08-09 11:21:16 发布

劲枫

最新推荐文章于 2022-08-09 11:21:16 发布

阅读量347

点赞数

分类专栏： TypeScript 文章标签： es5中的类 es5中的继承 es5原型链

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/97538186

版权

TypeScript 专栏收录该内容

2 篇文章 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>

劲枫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES5中的类和静态方法继承（原型链继承、对象冒充继承、原型链+对象冒充组合继承）

<!doctype html><html><head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale...
复制链接

扫一扫