js作业（9-对象及创建对象）

最新推荐文章于 2024-08-19 18:29:28 发布

咋的啥名都用不了呢~

最新推荐文章于 2024-08-19 18:29:28 发布

阅读量95

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63492023/article/details/129557978

版权

对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.1什么是对象？
        // 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
        // 对象是由属性和方法组成的。
        // 属性：事物的特征，在对象中用属性来表示(常用名词)
        // 方法：事物的行为，在对象中用方法来表示(常用动词)

        // 1.2 为什么需要对象
        // 保存一个值时，可以使用变量，保存多个值(一组值)时，可以使用数组。如果要保存一个人的完整信息呢？
        // 如张三疯的个人信息用数组保存
        var arr = ['张三疯', '男', 128, 154]; //不够清晰
        // js中 更加清晰
        person.name = '张三疯';
        person.sex = '男';
        person.age = 128;
        person.height = 154;
    </script>
</body>

</html>

利用对象字面量创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 利用对象字面量创建对象 {}
        // var obj = {}; //创建了一个空的对象
        var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');
                }
            }
            // (1)里面的属性或方法采取 键值对 的形式 （键） 属性名 ：值 （属性值）
            // (2)多个属性或者方法中间用 , 隔开
            // (3)方法冒号后面跟的是一个匿名函数
            // 2.使用对象
            // (1)调用对象的属性 采取 对象名.属性名 (.)理解为(的)
        console.log(obj.uname);
        // (2)另一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3)调用对象的方法 sayHi 对象名.方法名() 千万别忘加小括号
        obj.sayHi();

        // 创建对象练习
        var obj1 = {
            name: '可可',
            type: '阿拉斯加犬',
            age: 5,
            color: '棕红色',
            skill: function() {
                console.log('bark', 'showFlim');
            }
        }
        console.log(obj1.name);
        console.log(obj1['type']);
        obj1.skill();
    </script>
</body>

</html>

变量属性函数方法区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 变量、属性、函数、方法的区别
        // 变量和属性的相同点 都是用了存储数据的
        var num = 10; //变量 单独声明并赋值
        var obj = {
                age: 18, //属性 在对象里面的不需要声明的
                // 方法
                fn: function() {

                }
            }
            // 函数
        function fn() {

        }
        console.log(obj.age);
        // console.log(age); //错
        //变量 单独声明并赋值 使用的时候直接写变量名 单独存在
        // 属性 在对象里面的不需要声明的 使用时必须是 对象.属性
        // 2.函数和方法的相同点 都是实现某种功能 做某件事
        // 函数是单独声明 并调用的 函数名() 单独存在的
        // 方法在对象里面 调用时 对象.方法
    </script>
</body>

</html>

利用new Object 创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 利用 new Object 创建对象
        var obj = new Object();
        obj.uname = 'xixi';
        obj.age = 18;
        obj.sex = 'man';
        obj.sayHi = function() {
                console.log('hi~');
            }
            // (1)利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2)每个属性和方法之间 分号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
        // 创建对象练习
        var obj1 = new Object();
        obj1.name = '鸣人';
        obj1.sex = 'man';
        obj1.age = 19;
        obj1.skill = function() {
            console.log('影分身术');
        }
        console.log(obj1.name);
        console.log(obj1.sex);
        console.log(obj['age']);
        obj1.skill();
    </script>
</body>

</html>

利用构造函数创建对象（含为什么需要构造函数）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 因为前面两种创建对象的方式一次只能创建一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function() {
                console.log('冰雨');
            }
        }
        var zxy = {
                uname: '张学友',
                age: 58,
                sing: function() {
                    console.log('李香兰');
                }
            }
            // 利用函数的方法 重复相同的代码 把这个函数称为 构造函数
            // 又因这个函数不一样，里面封装的不是普通代码，而是 对象
            // 构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面

        // 利用构造函数创建对象
        // 创四大天王对象 相同的属性：名字 年龄 性别 相同的方法：唱歌
        // 构造函数的语法格式
        // function 构造函数名(){
        //     this.属性 = 值;
        //     this.方法 = function(){}
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, 'man'); //调用返回的是一个对象
        console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, 'man');
        console.log(zxy.name);
        console.log(zxy['age']);
        zxy.sing('李香兰');

        // 1.构造函数名首字母大写
        // 2.构造函数不需要return 就可返回结果
        // 3.调用构造函数 必须使用 new
        // 4.只要new Star() 调用函数就创建了一个对象 ldh {}
        // 5.属性和方法前面必须添加 this

        // 创建对象练习
        function Hero(name, type, blood, attack) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(atk) {
                console.log(atk);
            }
        }
        var lpo = new Hero('廉颇', '力量型', '500血量');
        console.log(lpo.name);
        console.log(lpo['blood']);
        lpo.attack('近战');
        var hyi = new Hero('后羿', '射手型', '100血量');
        console.log(hyi.name);
        console.log(hyi['type']);
        hyi.attack('远程');
    </script>
</body>

</html>

构造函数和对象区别（含new 关键词执行构程）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.构造函数 明星 泛指的某一大类 类似于 Java 里的类(class)
        // (1) new 关键词执行构程： 
        //   1) new 构造函数可以在内存中创建了一个空的对象
        //   2) this 就会指向刚才创建的空对象
        //   3) 执行构造函数里面的代码 给这个空对象添加属性和方法
        //   4) 返回这个对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        // 2.对象 特指 是一个具体的事物 刘德华 == {name: '刘德华', age: 18, sex: 'man', sing: ƒ}
        var ldh = new Star('刘德华', 18, 'man'); //调用返回的是一个对象
        console.log(ldh);
        // 3.利用构造函数创建对象的过程也称为 对象的实例化
    </script>
</body>

</html>

遍历对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 遍历对象
        var obj = {
            name: 'xixi',
            age: 18,
            sex: 'woman',
            fn: function() {}
        }
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
        // for in 遍历对象
        // for(变量 in 对象){}
        for (var k in obj) {
            console.log(k); //k 变量 输出 得到的是 属性名
            console.log(obj[k]); //obj[k] 得到的是 属性值 不加引号，因k是变量
        }
        // 使用 for in 里面的变量 喜欢用 k 或 key
    </script>
</body>

</html>

作业

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.创建一个电脑对象，该对象要有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代码。
        var cpr = {
            color: 'red',
            weight: '400g',
            brand: 'DELL',
            type: 'Inspiron 155000',
            skill: function() {
                console.log('sm', 'lm', 'pg', 'wc');
            }
        }
        console.log(cpr.color);
        console.log(cpr.weight);
        console.log(cpr['brand']);
        cpr.skill();
        // 2. 创建一个按钮对象，该对象中需要包含宽，高，背景颜色和点击行为。
        var btm = new Object();
        btm.wide = '1px';
        btm.high = '2px';
        btm.color = 'green';
        btm.act = function() {
            console.log('attack');
        }
        console.log(btm.wide);
        console.log(btm['high']);
        btm.act();
        // 3.创建一个车的对象，该对象要有重量、颜色、牌子，可以载人、拉货和耕田。
        function Car(weight, color, brand) {
            this.weight = weight;
            this.color = color;
            this.brand = brand;
            this.skill = function(car) {
                console.log(car);
            }
        }
        var taxi = new Car('1000gkg', 'red&geen', '五菱');
        console.log(taxi.weight);
        console.log(taxi['color']);
        taxi.skill('载人、拉货、耕田');
    </script>
</body>

</html>