JavaScript-Object对象-创建对象及构造函数

JavaScript也是一门面向对象的编程语言，所以对象也是很重要的，下面我们来看一下JS中对象的三种创建方法：

对象：是一组无序的相关属性和方法的集合，万物皆对象但对象是一个具体的事物。对象是由属性和方法组成的；
属性：事物的特征，在对象中用属性来表示
方法：事物的行为，在对象中用方法来表示

JS中的对象有三种创建方法：

第一种方法：利用对象字面量创建对象 { }

<script>
        // 1.利用对象字面量创建对象 {}
        var obj = {
            uname: '张三疯',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('张三疯对你招了招手并说了句“Hi~”');
            }
        }
        
        // 2.使用对象
        // (1)调用对象的属性我们采取：对象名.属性名的方式，“.”我们理解为“的”
        console.log(obj.uname);     // 张三疯
        // (2)调用属性还有一种方法：对象名['属性名'],注意属性名需要加引号
        console.log(obj['age']);    // 18
        // (3)调用对象的方法：对象名.方法名(),千万别忘了添加小括号
        obj.sayHi();    // 张三疯对你招了招手并说了句“Hi~”
</script>

执行代码截图：

 

注：(1)对象里面的属性或方法都是采取键值对的形式：键 属性名: '值 属性值'赋值的

        (2)多个属性或方法之间用英文逗号隔开

        (3)对象内部的方法冒号后面跟的是一个匿名函数

 第二种方法：利用new Object();创建对象

<script>
        // 第二种：利用new Object();创建对象
        var obj2 = new Object();    // 创建一个空的对象
        obj2.uname = '疯清扬';
        obj2.age = 18;
        obj2.sex = '男';
        obj2.sayHi = function () {
            console.log('疯清扬对你招了招手并说了句“Hi~”');
        }
        // (1)我们是利用 等号 = 赋值的方法为对象添加属性和方法的
        // (2)每个属性和方法之间用分号隔开
        // 访问/输出对象的属性和方法：
        console.log(obj2.uname);    // 疯清扬
        console.log(obj2['sex']);   // 男
        obj.sayHi();                // 疯清扬对你招了招手并说了句“Hi~
</script>

执行代码截图：

 注：(1)我们是利用 等号 = 赋值的方法为对象添加属性和方法的

        (2)每个属性和方法之间用分号隔开

 第三种方法：利用构造函数创建对象

第一种和第二种方法创建对象时每次都只能创建一个对象，再创建一个同类的对象时它们里面有很多的属性和方法都是相同的，因此我们可以利用函数的思路，将这些相同的代码封装起来使用，封装的这个函数就叫构造函数，因为这个函数内部封装的是一个对象和普通函数有所不同所以叫构造函数。

构造函数：就是把对象里面的一些相同的属性和方法抽象出来封装到函数里面。

下面是构造函数创建使用的语法及案例：

<script>
        // 第三种：利用构造函数创建对象
        /* 构造函数的语法格式：
        function 构造函数名 () {    // 创建构造函数
            this.属性 = 值;
            this.方法名 = function () {

            }
        }
        new 构造函数名();   // 使用构造函数，必须使用 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, '男'); // 使用构造函数，一定需要写实参传值
        console.log(typeof ldh);    // object，注意调用构造函数返回值一定是一个对象类型
        console.log(ldh.name, ldh['age']);   // 刘德华 18
        ldh.sing('暗里着迷');   // 调用构造函数内部方法的方式：构造函数名.方法名('值');
        // 再使用构造函数创建一个对象：
        var zxy = new Star('张学友', 20, '男'); // 注意实参和形参对应的顺序，需严格按照顺序传值
        console.log(zxy.name, zxy['sex']);  // 张学友 男
        zxy.sing('李香兰'); // 李香兰
</script>

执行代码截图：

注：1.构造函数名首字母要大写

        2.构造函数中不需要return 就可以返还结果给调用者

        3.我们调用构造函数必须使用new关键字

        4.我们只要new 构造函数名()调用函数就创建了一个对象，注意接收这个返回值（值是对象）

        5.构造函数内部属性名和方法名前面必须加this关键字