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

最新推荐文章于 2020-09-21 16:29:01 发布

YI_DIAN_DIAN

最新推荐文章于 2020-09-21 16:29:01 发布

阅读量458

点赞数

分类专栏： ❸JavaEE ---- ----③JavaScript

本文链接：https://blog.csdn.net/qq_35415600/article/details/71272152

版权

❸JavaEE 同时被 2 个专栏收录

46 篇文章 3 订阅

订阅专栏

---- ----③JavaScript

8 篇文章 0 订阅

订阅专栏

代码演示完整：

<!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>

YI_DIAN_DIAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】（7）js中自定义对象的方式（模拟Java中面向对象建模）

代码演示完整：<!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
复制链接

扫一扫