美文网首页
重点--对象

重点--对象

作者: 潘肚饿兵哥哥 | 来源:发表于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>

相关文章

  • 重点--对象

    属性:事物的,在对象中用来表示(常用名词)方法:事物的,在对象中用来表示(常用动词) 保存一个值时,可以使用变量保...

  • 重点--内置对象

    目标:1.知道什么是内置对象2.能够根据文档查询指定API的使用方法3.能够使用Math对象的额常用方法4.能够使...

  • 重点--原型对象

    __Proto__ 源码:

  • 重点--对象作业

  • 重点猜疑对象

    对,我是该重点猜疑的对象,因为我没有汇报,没有讲自己去了何处,没有联系,没有按照指示。 按照常理来说,这是不可避免...

  • 重点关注对象

    我怀疑,我被简书划为重点关注对象了,连续几天遭遇锁文,更一篇锁一篇,毫不手软。 同样的题材,别人写了没事,我却连拼...

  • 重点-内置对象--数组对象

    之前创建数组的两种方式字面量方式new Array() 1.instanceof 运算符 它可以用来检测是否为数组...

  • 面相对象(重点)

    类与对象、封装、继承、多态、抽象类、接口 流程控制语句的分类: a.顺序结构 b.选择结构 if语句 switch...

  • 重点--遍历对象属性

    语法:for(变量 in 对象){ } 1.对象可以让代码结构更清晰2.对象是复杂数据类型 object3.本质:...

  • Event 对象(重点) -06

    2016-0914 day06 3. event(事件) 1. 什么是事件: 用户手动触发的或浏览器自动触发的页面...

网友评论

      本文标题:重点--对象

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