html面向对象js_html的面向对象类写法-CSDN博客

本文链接：https://blog.csdn.net/qq_43127471/article/details/89321020
*[HTML]:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象</title>
    <!--单体-->
        <!--<script type="text/javascript">
        var  tom={
            name:'tom',
            age:18,
            showname:function () {
            alert('我的名字叫'+this.name);
            },
            showage : function(){
                alert('我今年'+this.age+'岁');
            }
        }
        tom.showname();//我的名字叫tom
        tom.showage();//我今年18岁

    </script>-->
    <!--工厂模式-->
        <!-- <script type="text/javascript">
        function Person(name,age,job){
        //Person是一个创建对象的函数，就类似于javascript的一个类
            var o = new Object();//创建空对象，Object是一个内置类
            o.name = name;
            o.age = age;
            o.job = job;//属性-变量
            o.showname = function(){ //方法-函数
                alert('我的名字叫'+this.name);
            };
            o.showage = function(){
                alert('我今年'+this.age+'岁');
            };
            o.showjob = function(){
                alert('我的工作是'+this.job);
            };
            return o;
        }
        var tom = Person('tom',18,'程序员');
        tom.showname();
        tom.showage();
        tom.showjob();


    </script>-->
    <!--构造函数-->
        <!--   <script type="text/javascript">

        function Person(name,age,job){  //通过构造函数来创建一个类
        this.name = name;//this指未来实例化的对象例如：tom
        this.age = age;
        this.job = job;
        this.showname = function(){ //
            alert('我的名字叫'+this.name);
        };
        this.showage = function(){
            alert('我今年'+this.age+'岁');
        };
        this.showjob = function(){
            alert('我的工作是'+this.job);
        };
    }
    var tom = new Person('tom',18,'程序员');//实例化对象
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);//弹出false表示不同的方法，分别隶属于两个不同的实例对象
     tom.showname()+tom.showage()+tom.showjob();
    jack.showname()+ jack.showage()+jack.showjob();

    </script>-->
    <!--原型模式-->
        <!-- <script type="text/javascript">
    function Person(name,age,job){//构造函数
        //js的函数也是对象，所有有属性和方法，而且每一个函数都有一个prototype属性
        this.name = name;
        this.age = age;
        this.job = job;
    }
    //每个对象对应的属性不一样，但是方法希望能公用
      Person.prototype.showname = function(){//prototype上绑定属性和方法，可以给所有的实例化对象共享
        alert('我的名字叫'+this.name);
    };
    Person.prototype.showage = function(){
        alert('我今年'+this.age+'岁');
    };
    Person.prototype.showjob = function(){
        alert('我的工作是'+this.job);
    };
    var tom = new Person('tom',18,'程序员');
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);//弹出true，表示是同一个方法

         //若子类创建自己的方法，会覆盖原来的方法
     tom.showage=function () {
            alert('我的年龄是'+this.age);
        }
     alert(tom.showage==jack.showage);//弹出flase，表示子类方法覆盖原来的方法了


</script>-->
    <!--继承！！！！重点-->
    <script type="text/javascript">

        function Fclass(name,age){//父类
            this.name = name;
            this.age = age;
        }
        Fclass.prototype.showname = function(){
            alert(this.name);
        }
        Fclass.prototype.showage = function(){
            alert(this.age);
        }
        //属性用call和apply的方式来继承
        function Sclass(name,age,job) { //子类
            Fclass.call(this, name, age);//继承父类属性，call改变函数执行最终的this
            // 调用父函数，而this指的是Sclass实例化的一个对象
            // 最终父函数实例化的属性指向子函数子类的实例化对象
            this.job = job;//自己属性

        }
        //方法继承：将父类的一个实例赋值给子类的原型属性
            Sclass.prototype = new Fclass();
            Sclass.prototype.showjob = function(){
            alert(this.job);
             }
        var tom = new Sclass('tom',19,'全栈工程师');
        tom.showname();
        tom.showage();
        tom.showjob();


    </script>
</head>
<body>

</body>
</html>