【JavaScript】（7）js中自定义对象的方式（模拟Java中面向对象建模）

来源：互联网发布：windows services.msc 编辑：程序博客网时间：2024/06/05 14:09
代码演示完整：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>js对象---我们自己定义对象(就是java中的面向对象建模)</title>        <script type="text/javascript" src="../tools/out.js"></script>    </head>    <body>    <!--1、js中自定义对象有三种方式  -->    <script type="text/javascript">        /*【方式1】：封装性比较差，比较底层---用一个空函数或者Object当前对象的原型，                然后给该原型手动一步一步添加成员变量和成员方法。*/        //1.1---空函数定义对象        function Person(){            println("hello,obj");        }           var p=new Person();//运行结果：hello,obj---相当于调用一个构造方法，创建对象        Person();//运行结果：hello,obj---直接调用方法/对象        //给已经创建的对象添加成员变量或成员方法---对象名.成员名=.....        p.name="Alice";             p.age=22;        p.show=function(){            println("name="+p.name+"，age="+p.age );        };        p.show();   //方法调用          //1.2---直接用Object定义对象        var p2=new Object();        p2.name="Bob";        p2.age=22;        p2.sex="male";        p2.sayHello=function(){            println("name="+p2.name+"，age="+p2.age+"，sex="+p2.sex);        };        p2.sayHello();    </script>    <script type="text/javascript">    /*【方式2】：封装性比较好，更接近于java中的面向对象建模    */    function Person(name,age){        this.name=name;        this.age=age;        this.setName=function(name){            this.name=name;        };        this.getName=function(){            return this.name;        };        this.setAge=function(age){            this.age=age;        };        this.getAge=function(){            return this.age;        };        this.toString=function(){            return "name=   "+this.name+"，age="+this.age;        };    }    var p=new Person("Jack",22);    println( p );//name=Jack，age=22         println(p.toString() );//name=  Jack，age=22    p.setName("Rose");    p.setAge(20);    println(p);//name=  Rose，age=20    </script>       <script type="text/javascript">    /*【方式3】：用于封装数据----json技术，是一种轻量级的数据交换格式        1、json的基本格式有两种：map(用大括号封装)，list(用中括号封装)    */    //3.1 ---map：map的重要特点：(key : value)键值对    var p3={        "name": "Alice",        "sex": "male",        "age": 22,        3:"number",        "getName":function(){return this.name;}    };    //访问map中的数据方式1：对象名["属性名"]---不要忘记引号“ ”    var name=p3["name"];    var age=p3["age"];    var sex=p3["sex"];    println(name+"，"+age+"，"+sex);    name=p3.getName();    println(name);      //访问map中的数据方式2：对象名.属性名---如果属性名不符合变量名的命名规则，无法访问    var name=p3. name;    var age=p3.age;    var sex=p3.sex;    println(name+"，"+age+"，"+sex);    //3.2----list---array    var strs=["abc","def",123];    //访问list中的数据方式：对象名[元素序号]---参见数组元素的访问形式    println(strs[0]);       println(strs[1]);    /*3.3---map+list 项目一般采用的方式    封装一个简单的表格，利用map和list：整个表格为一个list，每个表格中的一行为单独的一个map，    因为只有map才有多个key，value键值对：属性、值*/    var studs=[        {"id": "A001", "name":"Jack", "address":"湖南长沙","age":25},        {"id": "A002", "name":"Rose", "address":"湖南益阳","age":22},        {"id": "A003", "name":"Tom", "address":"湖北武汉","age":23}    ];    for(var i=0;i<studs.length; i++){        println( studs[i]["id"]+","+studs[i]["name"]+","+studs[i]["address"]+studs[i]["age"]);    }    /*【for...in】js中的for...in---相当于把Java中的增强for循环和普通for循环合并成一个        格式：        for(变量 in 对象){            ....//对对象中的每个元素分别进行操作        }        【注意】：            (1)如果对象是map则变量输出的值是key值。            (2)如果对象是list则变量输出的值是数组序号。    */    /*1) for...in访问数组：        注意：访问数组时，js中x不是元素值，而是元素的序号，对象[变量]---才是元素值    */    var ar=[11,43,51,0,-56];    for(x in ar){//ar是数组，则x是序号        print(x+"，");//输出：0，1，2，3，4，        print(ar[x]+"，");//输出：11，43，51，0，-56，        println("");    }    /*2) for...in访问普通对象：        输出：x是对象的所有成员名称(key)，        输出：p[x]是value每个变量对应的值    */    for(x in p){//p是对象则x是key：        print(x+"，");//name，age，setName，getName，setAge，getAge，toString，         println(x+"："+p[x] );    }    /*3)for...in访问json对象：    */    for(i in studs){//studs是数组则i是序号        print(i+"，");//输出 0，1，2，此表格有三行        for( key in studs[i] ){//第i行            print(studs[i][key]+"，");//第i行key所对应的value值            //注意：key是属性名且是字符串的格式，不能用【studs[i].key】来访问。        }        println("");            }    /*3.4---map+list ----项目中采用的复杂方式    */      var datas={        "studs":[        {"id":"A001", "name":"Jack", "address":"湖南益阳","age":22  },        {"id":"A002", "name":"Tom", "address":"湖南长沙", "age":23  },        {"id":"A003", "name":"张三", "address":"湖北武汉", "age":21    }        ],        "currentPage":15,        "count":20,        "depts":{"name":"信电院","address":"信息楼","num":2000}    };    //获取第二个学生的地址    println(datas["studs"][1]["address"]);    println(datas.studs[1].address);    //获取学院地址    println(datas. depts.address);    println(datas["depts"]["address"]);    //获取·当前页码    println(datas.currentPage);    </script>    </body></html>
0 0