javascript--JS面向对象、其他定义类和对

以你之姓@ 2022-08-23 09:58 76阅读 0赞

JS面向对象、其他定义类和对象的方法
    1、面向对象
    三大特征：封装、继承、多态
    封装：用函数把重复调用的代码封装起来
    集成：子类集成父类的一些特性
    多态：函数名相同、参数不同
    
    2、闭包：类内部的函数fun1()能够调用类fun()内部的属性，进行改写
    Function fun(){
    
            Function fun1(){
    
    }
    }
    2、其他定义类和对象的方法：
    
    (1)类的定义，通过function
    类：对事物的抽象描述，描述这类事务的特征和属性
    
    例子：
    <script>
        //定义类function 类的名字(){}
        function plane(){
            //类的属性
            this.name="";//name类型是字符型
            this.gjl=0;//数字型
            this.hp=0;
            this.x=0;
            this.y=0;
            //类的扩展方法（函数），下面必须进行调用
            this.fly=function(){
                alert("我会飞！");
            }
        }
        //实例化类，obj为对象
        var obj=new plane();
        //调用类里的
        obj.fly();
        obj.name="张";
        obj.gjl=200;
        obj.hp=120;
        obj.x=20;
        obj.y=40;
        //输出类的属性
        document.write(obj.name+obj.gjl+obj.hp+obj.x+obj.y);
    
        //实例化一个类的实例
        var obj1=new plane();
        obj1.name="新";
        document.write("<br>"+obj1.name);
        //实例化对象扩展（新增）的类（类既保留了类的共同点，又可以新增独有的类/方法）
        obj1.td=function(){
            document.write("我会土遁");
        }
        //调用方法（扩展函数）
        obj1.td();
    </script>
    
    
    (2)定义在外部类，new object()
    
    例子：
    <script>
        function fun(){
            //第一步：var 变量=new Object();
            var obj= new Object();
            obj.name = "";
            obj.tel = 0;
            //类中扩展函数（方法），下面必须调用函数
            obj.fly=function(c){
                alert(c);
            }
            //第二步：返回变量名
            return obj;
        }
        var obj1 = new fun();
        obj1.name = "丁";
        obj1.tel = 15652287970;
        document.write(obj1.name+obj1.tel);
        //调用类中的方法。
        obj1.fly(200);
    </script>
    
    
    (3)直接定义对象
    
    例子：
    <script>
        //定义类，本身就是个实例化的对象
        var obj = {
                    name: "",
                    tel : 0,
                    sex:"",
            //扩展函数
            fun:function(){
                document.write("内部扩展函数");
            }
        }
        //调用扩展函数
        obj.fun();
        //给name赋值
        obj.name="张新丁";
        obj.tel=15652287970;
        obj.sex="女";
        //输出值
        document.write(obj.name+obj.tel+obj.sex);
    </script>
    
    (4)Js中的内置对象
    Array、String、Math、Date、Cookie、document
    
    3、案例：输出时间
    
    <div id="1">
    </div>
    <script>
    
        var a = document.getElementById("1");
        function fun() {
            //自动获取当前的时间
            var date = new Date(); //实例化了一个Date类的对象
            //自动获取当前的年
            var year = date.getFullYear();
            //自动获取当前的月份
            var month = date.getMonth() + 1;
            //自动获取当前的日
            var day = date.getDate();
            //自动获取当前的星期
            var day1 = date.getDay();
            //自动获取当前的时
            var hours = date.getHours();
            //自动获取当前的分
            var minutes = date.getMinutes();
            //自动获取当前的秒
            var seconds = date.getSeconds();
            // document.write(year + "年" + month + "月" + day + "日" + hours + "时" + minutes + "分" + seconds + "秒");
            a.innerHTML = year + "年" + month + "月" + day + "日" + hours + "时" + minutes + "分" + seconds + "秒";
        }
        setInterval(fun,1000);
    </script>
    
    4、	分析输出对象成员
    (1)分析文档对象
    方法一：
    例子：
    <script>
        //分析文档对象
        var obj="";
        //设置document背景颜色
        document.bgColor="pink";
        //循环进行遍历,变量名 in document
        for(obj in document){
            document.write("document."+document[obj]+"<br>");
        }
    </script>
    
    (2)分析自定义对象(内置对象：Array、String、Math、Date、Cookie、document)
    <script>
        //分析文档对象
        var obj="";
        //设置document背景颜色
        document.bgColor="pink";
        //分析自定义对象--类
        var b=new function() {
            this.hp = 100;
            this.act = 99;
            this.move = function () {
                document.write("正在移动");
            }
        }
            //分析变量a在b中的属性和方法
            for(a in b){
                document.write("b."+b[a]+"<br/>");
            }
    </script>