JavaScript基础学习 对象

JavaScript基础学习 对象

对象概念

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        // 1. 利用对象字面量创建对象{}
        // var obj ={};  //创建了一个空对象
        //  方法冒号后面跟的是一个匿名函数
        //  调用对象的属性的两种方法:  (1)  采取 对象名.属性名  (2) 采取  对象名['属性名']
        //调用对象的方法:   对象名.方法名
        var obj = {
            uname: 'zhangsan',
            age: 18,
            sex: '男',
            sayHi: function() {
                console.log('hi~');
            }
        }
        console.log(obj.uname);
        console.log(obj['uname']);
        obj.sayHi();


        // 2. 利用new Object 创建对象
        var obj = new Object(); //创建一个空的对象
        obj.name = 'zhangsan';
        obj.uage = 18;
        obj.usex = '男';
        obj.sayHello = function() {
            console.log('Hello');
        }
        console.log(obj.name);
        console.log(obj['usex']);


        //3. 使用构造函数来创建对象
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {

        //     }
        // }
        // new 构造函数名();

        // 构造函数名字首字母要大写
        // 构造函数不需要return 就可以返回结果
        // 调用构造函数必须使用new  调用了构造函数就创建了一个对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function() {
                console.log(uname + '会唱歌');
            }
        }
        var zhangsan = new Star('张三', 18, '男');
        console.log(zhangsan.name);
        console.log(zhangsan['name']);

        var lisi = new Star('李四', 20, '男');
        console.log(lisi.name);
        lisi.sing();
    </script>

</head>

<body>

</body>

</html>

在这里插入图片描述

对象案例

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        function Stero(uname, utype, ublood, uattack) {
            this.name = uname;
            this.type = utype;
            this.blood = ublood;
            this.attack = uattack;
        }
        var lianpo = new Stero('廉颇', '力量型', 500, '近战');
        var houyi = new Stero('后裔', '射手型', 200, '远战');
        console.log(lianpo.name);
        console.log(houyi.name);
    </script>

</head>

<body>

</body>

</html>

在这里插入图片描述

遍历对象属性和方法

<!DOCTYPE html>
<html>
    <head>
        <title>js开始学习</title>
        <script>
         
        //  遍历对象  使用for  in
        var ob = {
            name: '王五',
            age: 99,
            height: 180,
            fn: function() {
                console.log('这是一个方法');
            }
        }
        for (var k in ob) {
            console.log(k); //   k  变量  输出得到的是 属性名
            console.log(ob[k]); // ob[k] 得到的是属性值
        }
        </script>

    </head>

    <body>
        
    </body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43537319/article/details/121876182