美文网首页
重点--对象

重点--对象

作者: 潘肚饿兵哥哥 | 来源:发表于2019-06-22 13:54 被阅读0次

    \color{rgba(254, 67, 101, .8)}{对象:}
    \color{rgba(254, 67, 101, .8)}{对象是一组无序的相关属性和方法的集合,所有的事物都是对象}
    \color{rgba(254, 67, 101, .8)}{例如;字符串、数值、数组、函数等}
    \color{rgba(254, 67, 101, .8)}{对象是由属性和方法组成}

    • 属性:事物的\color{rgba(254, 67, 101, .8)}{特征},在对象中用\color{rgba(254, 67, 101, .8)}{属性}来表示(常用名词)
    • 方法:事物的\color{rgba(254, 67, 101, .8)}{行为},在对象中用\color{rgba(254, 67, 101, .8)}{方法}来表示(常用动词)

    \color{rgba(254, 67, 101, .8)}{为什么需要对象:}

    保存一个值时,可以使用变量
    保存多个值时,可以使用数组
    但是保存的信息都不够完善,所以就有了对象

    \color{rgba(254, 67, 101, .8)}{与数组类似,对象也是用一个名字表示一组值,对象的每个值都是对象的一个属性}

    \color{rgba(254, 67, 101, .8)}{创建对象的3种方式}

    1.利用字面量创建对象(最常用的方法)
    2.利用new object创建对象
    3.利用构造函数创建对象

    \color{rgba(254, 67, 101, .8)}{对象字面量:}就是用花括号{}里面包含了表达这个具体事物(对象)的属性和方法

        <script>
            //利用字面量创建对象
            var obj = {}; //创建了一个空对象
        </script>
    

    \color{rgba(254, 67, 101, .8)}{创建一个对象:}

    1.对象的属性或方法采用键值对的形式
    2.对象多个属性或方法用冒号隔开,最后一个可以不用逗号,但是写了也不错
    3.方法后面跟的是一个匿名函数

        <script>
            var obj = {
                userName: '张三',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');
                }
            }
        </script>
    

    \color{rgba(254, 67, 101, .8)}{使用对象:调用对象属性两种方法}

    1.调用对象的属性:对象名.属性名。如上例要打印姓名:
    console.log(obj.userName);
    可以理解为:对象的(名字、性别、年龄)···
    2.调用属性的另一种方法:对象名['属性名'];
    console.log(obj['userName']);

    \color{rgba(254, 67, 101, .8)}{使用对象:调用对象方法两种方法}

    1.对象名.方法名();
    obj.sayHi();

    \color{rgba(254, 67, 101, .8)}{练习:}

    用对象字面量的形式创建一个名字为可可的狗的对象
    具体信息如下:
    姓名:可可
    类型(type):阿拉斯加犬
    年龄:5岁
    颜色:棕红色
    技能:汪汪汪(bark),演电影(showFilm)

    \color{rgba(254, 67, 101, .8)}{变量、属性、函数、方法总结}

    1.变量和属性的相同点:都是用来存储数据的
    不同点是:变量是单独声明并赋值,使用的时候直接写变量名,单独存在
    属性是在对象里面的,不需要声明,使用的时候 对象名.属性

    2.函数和方法的相同点:都是实现某种功能,做某件事
    不同点:函数是单独声明,单独存在,调用:函数名();
    方法在对象里,调用的时候 :对象.方法();

    \color{rgba(254, 67, 101, .8)}{new关键字}
    \color{rgba(254, 67, 101, .8)}{利用 new object 创建对象}

    var obj = new Object();//创建一个空对象,O要大写
    obj.uname = '张三';//给对象添加一个属性(追加)
    obj.age = 18;
    obj.sex = '男';
    obj.sayHi = function(){
        aonsole.log('hi~');
    }
    

    1.利用等号赋值的方法添加对象的属性和方法
    2.每个属性和方法之间用分号结束
    3.调用:跟之前一样,对象名.属性名对象名.方法

    \color{rgba(254, 67, 101, .8)}{对象介绍:}

    • \color{rgba(3, 101, 100, .8)}{如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。}

    • \color{rgba(3, 101, 100, .8)}{对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。 }

    • \color{rgba(3, 101, 100, .9)}{对象是一个仓库,可以装不同的变量}

    \color{rgba(254, 67, 101, .8)}{对象的分类:}

    \color{rgba(254, 67, 101, .8)}{1.内建对象}

    • \color{rgba(3, 101, 100, .8)}{由ES标准中定义的对象,在任何的ES的实现中都可以使用}
    • \color{rgba(3, 101, 100, .8)}{比如:Math、 String、 Number 、Boolean、 Function、 Object....}

    \color{rgba(254, 67, 101, .8)}{2.宿主对象}
    \color{rgba(3, 101, 100, .8)}{由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象}

    • \color{rgba(3, 101, 100, .8)}{比如 BOM(浏览器对象模型)、 DOM(文档对象模型).}
    • \color{rgba(3, 101, 100, .8)}{console.log() document.write()中的console、document就是对象}
      • \color{rgba(3, 101, 100, .8)}{这两个对象都是浏览器提供的,就是宿主对象}

    \color{rgba(254, 67, 101, .8)}{3.自定义对象}

    • \color{rgba(3, 101, 100, .8)}{由开发人员自己创建的对象}


    \color{rgba(254, 67, 101, .8)}{对象的基本操作:}

    \color{rgba(254, 67, 101, .8)}{创建一个对象}
    \color{rgba(254, 67, 101, .8)}{var obj = new  Object();}
    \color{rgba(3, 101, 100, .8)}{使用new关键字调用的函数,是构造函数constructor}
    \color{rgba(3, 101, 100, .8)}{构造函数是专门用来创建对象的函数}

    \color{rgba(3, 101, 100, .8)}{这行代码表示:使用new创建好一个对象,并且赋值给变量obj}
    \color{rgba(3, 101, 100, .8)}{此时这个对象是一个空的对象}

    \color{rgba(3, 101, 100, .8)}{使用typeof检查一个对象时,会返回object(他的数据类型)}


    \color{rgba(3, 101, 100, .8)}{在对象中保存的值称为属性}
    \color{rgba(3, 101, 100, .8)}{向对象添加属性}
    \color{rgba(3, 101, 100, .8)}{语法:对象.属性名 = 属性值}

    \color{rgba(3, 101, 100, .8)}{向obj中添加一个name属性:}

    \color{rgba(3, 101, 100, .8)}{obj.后面相当于一个键值对}
    \color{rgba(254, 67, 101, .8)}{obj.name = "孙悟空";}
    \color{rgba(3, 101, 100, .8)}{向obj中添加一个gender(性别)属性}
    \color{rgba(254, 67, 101, .8)}{obj.gender = "男";}
    \color{rgba(3, 101, 100, .8)}{向obj中添加一个age属性}
    \color{rgba(254, 67, 101, .8)}{obj.age = 18;}

    \color{rgba(3, 101, 100, .8)}{读取对象中的属性:}

    \color{rgba(3, 101, 100, .8)}{语法:对象.属性名}
    \color{rgba(254, 67, 101, .8)}{console.log(obj.gender);}
    \color{rgba(3, 101, 100, .8)}{要读取哪一个,点后面就跟哪一个}
    \color{rgba(3, 101, 100, .8)}{必须写obj.属性名,不写obj.只写属性名的话会报错}
    \color{rgba(3, 101, 100, .8)}{obj.后面跟值也不行,也读取不到,必须写obj.属性名}
    \color{rgba(254, 67, 101, .8)}{例如:console.log(obj.男);就不可以,不会报错,但是会显示undefined}

    \color{rgba(3, 101, 100, .8)}{修改对象中的属性值:}

    \color{rgba(254, 67, 101, .8)}{obj.gender = "女";}
    \color{rgba(3, 101, 100, .8)}{语法:对象.属性名=新值}
    \color{rgba(3, 101, 100, .8)}{相当于创建一个新的属性覆盖掉原有的属性}

    \color{rgba(3, 101, 100, .8)}{删除对象中的属性值:}

    \color{rgba(254, 67, 101, .8)}{delete obj.gender;}
    \color{rgba(3, 101, 100, .8)}{语法:delete 对象.属性名}


    \color{rgba(254, 67, 101, .8)}{属性名和属性值:}

    \color{rgba(254, 67, 101, .8)}{属性名:}
    \color{rgba(3, 101, 100, .8)}{对象的属性名不强制要求遵守标识符的规范}
    \color{rgba(3, 101, 100, .8)}{什么乱七八糟的名字都可以使用(除了数字和关键字、保留字)}
    \color{rgba(3, 101, 100, .8)}{但是我们使用时还是尽量按照标识符的规范去做}

    \color{rgba(3, 101, 100, .8)}{例如这样加也可以,但是不会这么做:}
    \color{rgba(254, 67, 101, .8)}{var obj = new Object();}
    \color{rgba(254, 67, 101, .8)}{obj.name = "孙悟空";}
    \color{rgba(254, 67, 101, .8)}{obj.var = "hello";}
    \color{rgba(254, 67, 101, .8)}{console.log(obj.var);}

    \color{rgba(3, 101, 100, .8)}{如果要使用特殊的属性名,不能采用.的方式来操作(添加属性)}

    \color{rgba(3, 101, 100, .8)}{需要使用另一种方式:}
    \color{rgba(254, 67, 101, .8)}{语法:   对象["属性名"] = 属性值}
    \color{rgba(254, 67, 101, .8)}{语法:   obj["123"] = 456}
    \color{rgba(254, 67, 101, .8)}{甚至这样写:obj["@¥*@"] = 456}
    \color{rgba(254, 67, 101, .8)}{取的时候也得这么写:console.log(obj["123"]);}
    \color{rgba(3, 101, 100, .8)}{读取时和写入时要保持一致,否则会报错}

    \color{rgba(3, 101, 100, .8)}{使用[]这种形式去操作属性,更加的灵活}
    \color{rgba(3, 101, 100, .8)}{在[]中可以直接传递一个变量,这样变量值是多少就会读取哪个属性}
    \color{rgba(254, 67, 101, .8)}{obj["123"] = 789;}
    \color{rgba(254, 67, 101, .8)}{obj["nihao"] = "你好";}
    \color{rgba(254, 67, 101, .8)}{var n = "nihao"; 或var n = "123";}
    \color{rgba(254, 67, 101, .8)}{console.log(n);}
    \color{rgba(3, 101, 100, .8)}{var n = "123";console.log(n);取出来的值为789}
    \color{rgba(3, 101, 100, .8)}{属性名可能会变化,但是只要它赋值给n了,都能用n取出来对应的值;}
    \color{rgba(3, 101, 100, .8)}{直接传原本的属性名,他可能是固定的,但是这样写可以传变量}

    \color{rgba(254, 67, 101, .8)}{ . [] new 这三个在运算符优先级里是最高的优先级}


    \color{rgba(254, 67, 101, .8)}{属性值:}

    \color{rgba(3, 101, 100, .8)}{JS对象的属性值(键值对的值),既可以是任意的数据类型,也可以是一个对象}
    \color{rgba(3, 101, 100, .8)}{这些类型都可以作为它的值存在}
    \color{rgba(254, 67, 101, .8)}{obj.test = "hello";}
    \color{rgba(254, 67, 101, .8)}{obj.test = 123;}
    \color{rgba(254, 67, 101, .8)}{obj.test = true;}
    \color{rgba(254, 67, 101, .8)}{obj.test = null;}
    \color{rgba(254, 67, 101, .8)}{obj.test =undefined;}
    \color{rgba(254, 67, 101, .8)}{console.log(obj.test.name); }

    \color{rgba(254, 67, 101, .8)}{一个对象中可以有多组的属性和值(键值对)}

    \color{rgba(3, 101, 100, .8)}{创建一个对象obj2,并将obj2设为obj的属性}
    \color{rgba(254, 67, 101, .8)}{var obj2 = new Object();}
    \color{rgba(254, 67, 101, .8)}{obj2.name = "猪八戒";}
    \color{rgba(254, 67, 101, .8)}{obj.test = obj2;}
    \color{rgba(3, 101, 100, .8)}{这就相当于在obj这个对象中装了一个obj2属性}
    \color{rgba(3, 101, 100, .8)}{相当于大仓库中装小仓库,小仓库中还可以装更小的仓库}


    \color{rgba(254, 67, 101, .8)}{ in 运算符:}

    \color{rgba(3, 101, 100, .8)}{通过该运算符可以检查一个对象中是否含有指定的属性}

    • \color{rgba(3, 101, 100, .8)}{如果有则返回true,没有则返回false}

    \color{rgba(254, 67, 101, .8)}{语法:"属性名" in 对象}

    \color{rgba(3, 101, 100, .8)}{检查obj中是否含有test2属性(检查test2是否在obj中)}
    \color{rgba(254, 67, 101, .8)}{console.log("test2"  in  obj);}
    \color{rgba(3, 101, 100, .8)}{返回值为布尔值}

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                
                var obj = new Object();
    
                /*
                 * 向对象中添加属性
                 * 属性名:
                 *  - 对象的属性名不强制要求遵守标识符的规范
                 *      什么乱七八糟的名字都可以使用
                 *  - 但是我们使用是还是尽量按照标识符的规范去做
                 * 
                 */
                obj.name = "孙悟空";
                
                //obj.var = "hello";
                
                /*
                 * 如果要使用特殊的属性名,不能采用.的方式来操作
                 *  需要使用另一种方式:
                 *      语法:对象["属性名"] = 属性值
                 *  读取时也需要采用这种方式
                 * 
                 * 使用[]这种形式去操作属性,更加的灵活,
                 *  在[]中可以直接传递一个变量,这样变量值是多少就会读取哪个属性
                 * 
                 */
                obj["123"] = 789;
                obj["nihao"] = "你好";
                var n = "nihao";
                //console.log(obj["123"]);
                
                /*
                 * 属性值
                 *  JS对象的属性值,可以是任意的数据类型
                 *      甚至也可以是一个对象
                 */
                
                obj.test = true;
                obj.test = null;
                obj.test = undefined;
                
                //创建一个对象
                var obj2 = new Object();
                obj2.name = "猪八戒";
                
                //将obj2设置为obj的属性
                obj.test = obj2;
                
                //console.log(obj.test.name);
                
                /*
                 * in 运算符
                 *  - 通过该运算符可以检查一个对象中是否含有指定的属性
                 *      如果有则返回true,没有则返回false
                 *  - 语法:
                 *      "属性名" in 对象
                 */
                //console.log(obj.test2);
                
                //检查obj中是否含有test2属性
                //console.log("test2" in obj);
                //console.log("test" in obj);
                console.log("name" in obj);
                
            </script>
        </head>
        <body>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:重点--对象

          本文链接:https://www.haomeiwen.com/subject/jqmmqctx.html