JavaScript基础——第十一节:对象(创建对象的三种方式)和遍历对象

学习目标

  • 能够说出为什么需要对象
  • 能够使用字面量创建对象
  • 能够使用构造函数创建对象
  • 能够说出new的执行过程
  • 能够遍历对象

1. 对象

在这里插入图片描述

1.1 对象是什么?

现实生活中∶万物皆对象,对象是一个具体的事物看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

  • 对象(object):JavaScript里的一种数据类型
  • 可以理解为是一种无序的相关属性和方法的集合,所有的事物都是对象,例如字符串,数值,数组,函数等
  • 用来描述某个事物,例如描述一个人
     人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
     如果用多个变量保存则比较散,用对象比较统一
  • 比如描述 班主任 信息:
     静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
     动态行为 (点名, 唱, 跳, rap) => 使用函数表示
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

1.2 为什么需要使用对象呢?

保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?
在这里插入图片描述

2. 创建对象(object)的三种方式

  • 利用字面量创建对象
  • 利用new Object创建对象
  • 利用构造函数创建对象

2.1 利用字面量创建对象

对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。
在这里插入图片描述

var obj={};//创建了一个空的对象

在这里插入图片描述
(1)里面的属性或者方法我们采取键值对的形式
键 属性名﹔值 属性值
(2)多个属性或者方法中间用逗号隔开的
(3)方法冒号后面跟的是一个匿名函数

2.2 使用对象

(1).** **我们采取 对象名.属性名

console.log(obj.uname);

(2) 调用属性还有另外一种方法 对象名[‘属性名’]

console.log(obj['age']);

(3)调用对象的方法 sayHi
对象名.方法名() 千万别忘记添加小括号

obj.sayHi();

在这里插入图片描述

练习:按要求写出对象

请用对象字面量的形式创建一个名字为可可的狗对象。

在这里插入图片描述
在这里插入图片描述

2.3 变量、属性、函数,方法的区别

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

在这里插入图片描述

  • 函数︰单独存在的,通过“函数名( )”的方式就可以调用
  • 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。

在这里插入图片描述

2.4 利用new object创建对象

在这里插入图片描述

2.5 利用构造函数创建对象

我们为什么需要使用构造函数?
-就是因我们前面两种创建对象的方式一次只能创建一个对象。

  • 因为我们一次创建一个对象,里面很多的属性和方法是大量相同的,我们只能复制,因此我们可以利用函数的方法重复这些相同的代码,我们就把这个函数成为构造函数,又因为这个函数不一样,里面封装的不是普通代码,而是对象
  • 构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面在这里插入图片描述
<script>
        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(ldh.name);
        ldh.sing('冰雨');
    
    </script>
  • 构造函数名字首字母要大写
  • 我们构造函数不需要return就可以返回结果
  • 我们调用构造函数 ,必须使用new
  • 我们只要new star() 调用函数就创建一个对象 ldh {}

2.6 构造函数和对象

  • 构造函数,如Stars),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类( class )
  • 创建对象,如new Stars(),特指某一个,通过new关键字创建对象的过程我们也称为对象实例化

3. new关键字

在这里插入图片描述
在这里插入图片描述

4. 遍历对象属性

在这里插入图片描述
在这里插入图片描述

<script>
       var obj={
           uname:'andy',
           age:18,
           sex:'男'
       }
       for(var k in obj){
           console.log(k);//打印属性名
           console.log(obj[k]);//打印属性值
       }
    </script>
  • 一般不用这种方式遍历数组、主要是用来遍历对象
  • 一定记住: k 是获得对象的属性名, 对象名[k] 是获得 属性值
  • 我们使用 for in里面的变量 ,我们喜欢写k 或者key

在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不能瞌睡呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值