HTML 学习笔记 JavaScript (对象)

1.对象

现实生活中万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如一本书一辆车一个人

可以是对象一个数据库一张网页也可以看作是对象。

在js中对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串数值数组函数等

属性: 事物的特征在对象中用属性来表示

方法: 事物的行为在对象中用方法来表示

为什么需要对象

保存一个值时可以使用变量保存多个值时可以使用数组。如果要保存一个人的完整信息呢？

此时我们就需要用对象来表达更清晰更强大

2 创建对象的三种方式

在js中现阶段我们可以采用三种方式来创建对象(object)

1.利用字面量创建

2.通过new object 创建对象

3.利用构造函数创建对象

利用字面量创建:

对象字面量：就是{} 里面包含了表达这个具体事物(对象)的属性和方法

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 利用字面量创建对象{}
        //var obj = {}; //创建了一个空对象
        var person = {
            uname: '张三丰',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~')
            }
        }
        //里面的属性 我们采取键值对的方式 键 就是属性名:值 属性值
        //多个属性或者方法中间用逗号隔开 最后一个不用逗号
        //方法冒号后面跟的是一个匿名函数
        //2 使用对象
        //1。调用对象的属性 我们采取的是 对象名.属性名
        console.log(person.uname);
        //调用属性的另一种方法 对象名['属性名']
        console.log(person['age']);
        //调用对象的方法 对象名.方法名 添加()
        person.sayHi();
    </script>
</head>

变量属性函数方法总结

变量和属性:

都是用来存储数据的

变量单独使用并赋值使用的时候直接写变量名单独存在

属性在对象里面的不需要声明使用的时候必须是对象.属性

函数和方法

都是事先某种功能做某件事

函数是单独声明并且调用的函数名() 单独存在

方法在对象里面调用的时候对象.方法()

利用 new object创建对象

跟我们前面学的 new Array() 原理一致

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 利用new object创建对象
        var obj = new Object(); //创建一个空对象
        //追加属性和方法
        obj.uname = '张三丰';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('hi~');
        }
        //我们利用等号赋值的方法 添加对象的属性和方法
        //每个属性和方法之间用分号结束
        console.log(obj.uname);
        console.log(obj['age']);
        obj.sayHi();
    </script>
</head>

利用构造函数创建对象

构造函数: 是一种特殊函数主要用来初始化对象即为对象成员变量赋初始值它总是与new运算符一起使用

我们可以把对象中的一些公共属性和方法抽象出来，然后封装到这个函数里面。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用构造函数创建对象</title>
    <script>
        //我们为什么需要使用构造函数
        //就是因我们前面两种创建对象的方式一次只能穿件一个对象
        //一次创建一个对象 如果对象的属性和方法大部分相同 是很不方便的
        //因此我们可以利用函数方法 重复这些相同的方法 我们称为构造函数
        //因为这个函数 里面封装的不是普通代码 而是 对象
        //构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

        //构造函数的语法格式
        /*
        function 构造函数() {
            this.属性 = 值;
            this.方法 = function() {

            }
        }
        new 构造函数名();
        */
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (singName) {
                console.log(singName);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
        ldh.sing('冰雨');
        console.log(typeof ldh);
        console.log(ldh.name, ldh.age);
        var zxy = new Star('张学友', 28, '男');
        zxy.sing('他来听我的演唱会');
        console.log(zxy.name, zxy.age);
        //1.构造函数名字首字母要大写
        //2.我们构造函数不需要return 就可以返回结果
        //3.我们调用构造函数 必须使用new
        //4.我们只要new Star() 调用函数就创建一个对象
        //5.我们的属性和方法前面 必须添加this
    </script>
</head>

创建对象案例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构造函数案例</title>
    <script>
        function Hero(name, type, blood) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function (attack) {
                console.log(attack);
            }
        }
        var houyi = new Hero('后羿', 'ADC', 1800);
        houyi.attack('远程');
    </script>
</head>

构造函数和对象

构造函数:如Stars() 抽象了对象的公共部分，封装到了函数里面它泛指某一大类class

创建对象:如new Stars() 特指的是某一个通过new关键字创建对象的过程我们也成为对象的实例化

new关键字

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构造函数案例</title>
    <script>
        function Hero(name, type, blood) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function (attack) {
                console.log(attack);
            }
        }
        var houyi = new Hero('后羿', 'ADC', 1800);
        houyi.attack('远程');
        //new 关键字的执行过程
        //1. 构造函数可以在内存中创建一个空的对象
        //2. this会指向这个创建的空的对象
        //3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        //4. 返回这个对象
    </script>
</head>

遍历对象的属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历对象属性</title>
    <script>
        var obj = {
            name: '田',
            sex: '男',
            age: 18,
            fn: function () {
                console.log('方法名')
            }
        }
        console.log(obj.name, obj.age);
        // for in 遍历对象属性
        for (var k in obj) {
            console.log(k); //k 变量输出属性名
            console.log(obj[k]); //输出所有属性值
        }
    </script>
</head>

小结:

对象可以让代码结构更加清晰

对象是敷在数据类型object

本质:对象是一组无序的相关属性和方法的集合

构造函数泛指某一大类对象是特指一个事物