JS中的对象创建问题笔记（一）_html-js-css

一、什么是对象对象不是泛指一类，而是确定的一个东西比如英雄就不是一个对象，但是蜘蛛侠是一个对象二、构建对象的三种方式

1.利用对象字面量创建对象（ var obj = { 属性：值 } ;），直接在花括号里写属性和值。

var 一个对象名， = 一个{}键值对方法，放入属性值跟值方法写法，方法名：function(形参){}调用属性：对象 . 属性名或者对象[ ’ 属性名’ ]调用方法：对象 . 方法名（）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        // 利用对象字面量创建对象，直接在花括号里写属性和值
        var obj = {
            name : '刘备',
            age : 22,
            sex : '男',
            // 方法
            //方法名 : function(形参){}
            say : function(msg){
                console.log(msg);
            }
        }
        // 输出类型
        console.log(typeof obj);//类型为object
        // 输出值
        console.log(obj.name , obj.age , obj.sex);
        // 调用对象里面的方法，对象.方法名(实参);
        obj.say('我是大哥');
    script>
body>
html>

展示结果：

2.利用new Obj() 创建,j追加属性增加属性和值。**

var 对象名 = new Object();追加属性值：等号赋值，对象 . 属性名 = ’ 值 '；追加方法：对象名 . 方法名 = functio(形参){}

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>Documenttitle>
head>
<body>
    <script>
        var obj = new Object();//创建了一个空对象
        //追加属性添加值
        obj.name = '关羽';
        obj.age = 21;
        obj.sex = '男'
        // 追加方法
        obj.say = function(msg){
            console.log(msg)
        }
        // 输出类型
        console.log(typeof obj);//object
        console.log(obj.name , obj.age , obj.sex)
        obj.say('我是二哥')
    script>
body>
html>

结果：

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

（1）为什么要利用构造函数的方法创建对象

如果我们要创建刘备三兄弟三个对象，一个一个创建就会很麻烦。他们都有姓名，年纪和性别等相同的部分，我们可以用函数封装起来

（2）实现步骤

function 构造函数名称(形参){
注意构造函数名称首字母大写，如：new Vue
this.属性名1 = 形参1
this.属性名2 = 形参2
this.方法名 = function(){}
}

new 构造函数名(实参){}

var一个对象 = 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>Documenttitle>
head>
<body>
    <script>
        // 如果我们要创建刘备三兄弟三个对象，一个一个创建就会很麻烦。
        // 他们都有姓名，年纪和性别等相同的部分，我们可以用函数封装起来
        // 构造函数的语法格式跟函数差不多


        //第一步： function 构造函数名称(形参){    
            // 注意构造函数名称首字母大写，如：new Vue
            // this.属性名1 = 形参1
            // this.属性名2 = 形参2
            // this.方法名 = function(){}
        // }
        // 第二步：new 构造函数名(实参){}
        // 第三步:var一个对象 = new 构造函数名(实参){}

        function SanGuo(name , age , sex){
            // 注意构造函数里面用this指向当前函数、
            // ，在打点一个属性名，等号赋值形参
            this.name = name;
            this.age = age;
            this.sex = sex;
            // 方法
            this.say = function(msg){
                console.log(msg);
            }
            
        }
        //调用函数返回对象
        var liubei = new SanGuo('刘备' , '23' , '男');
        var guanyu = new SanGuo('关羽' , '22' , '男');
        var zhangfei = new SanGuo('张飞' , '21' , '男');
        //证明是对象 object
        console.log(typeof liubei);
        console.log(typeof guanyu);
        console.log(typeof zhangfei);
        // 输出三个人的名字和年龄
        console.log(liubei.name , liubei['age']);
        console.log(guanyu.name , guanyu['age']);
        console.log(zhangfei.name , zhangfei['age']);
        //创建方法追加赋值
        liubei.say('我是大哥刘备');
        guanyu.say('我是大哥刘备');
        zhangfei.say('我是大哥刘备');
    script>
body>
html>