JavScript对象

195 阅读5分钟

目标

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

目录

  • 对象
  • 创建对象的三种方式
  • new关键字
  • 遍历对象属性

1.对象

1.1 什么是对象?

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

在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。 对象是由属性方法组成的。

  • 属性:事物的特征,在对象中用属性来表示(常用名词)
  • 方法:事物的行为,在对象中用方法来表示(常用动词)

1.2 为什么需要对象

保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢? 例如,将张三疯的个人信息保存在数组中的方式为:

var arr = ['张三疯','男',128,154];

JS中的对象表达结构更清晰,更强大。张三疯的个人信息在对象中的表达结构如下:

张三疯.姓名 = '张三疯';

张三疯.性别 = '男';

张三疯.年龄 = 128;

张三疯.身高 = 154;

转换为代码

person.name = '张三疯';

person.sex = '男';

person.age = 128;

person.heigt = 154;

2.创建对象的三种方式

在JavaScript中,现阶段我们可以采用三种方式创建对象(object):

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

2.1 利用字面量创建对象

对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。 {}里面采取键值对的形式表示

  • 键:相当于属性名
  • 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型、函数类型等)
 var Alk = {
        gname:'可可',
        type:'阿拉斯加犬',
        age:5,
        color:'maroon',
        bark:function() {
          console.log('汪汪汪!');
        },
        showFilm:function() {
          console.log('性感母狗在线发牌~');
        }
      }
对象的调用
  • 对象里面的属性调用:“对象.属性名”,"xx.xx"可以理解为“xx的xx”。
  • 对象里面属性的另一种调用方式:对象['属性名'],注意方括号里面的属性必须加引号,我们后面会用
  • 对象里面的方法调用:对象.方法名(),注意这个方法名字后面一定加括号
      console.log(Alk.gname);

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

      Alk.bark();
      Alk.showFilm();
变量、属性、函数、方法的区别
  • 变量和属性的相同点

    • 他们都是用来存储数据的
  • 变量和属性的不同点

    • 变量,单独声明并赋值,使用的时候直接写变量名,单独存在
    • 属性 在对象里面不需要单独声明,使用的时候必须是 对象.属性 才能实现
  • 函数和方法的相同点

    • 都是实现某种功能、做某件事情
  • 函数和方法的不同点

    • 函数是单独声明,使用 函数名();的方式就可以调用, 单独存在
    • 方法在对象当中,调用的时候是 对象.方法(); 用来描述该对象的行为和功能

2.2 利用new Object创建对象

      var obj = new Object();// 创建了一个空的对象。
     obj.uname = '张三疯';
     obj.age = 18;
     obj.sex = '男';
     obj.sayHi = function() {
       console.log('hi~');
     }
  • 我们利用 等号 = 赋值的方法,添加对象的属性和方法
  • 每个属性和方法之间用分号结尾
     console.log(obj.uname);
     console.log(obj['sex']);
     obj.sayHi();

2.3 利用构造函数创建对象

前两种创建对象的方式一次只能创建一个对象,很多时候里面的属性和方法是大量相同的,我们可以利用函数的方法,重复这些相同的代码,我们就把这些函数称为构造函数。

  • 这个函数封装的不是普通代码,而是对象
  • 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

构造函数: 是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

 function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(song) {
          console.log(song);
        }
      }

2.4 构造函数和对象

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

3.new关键字

  1. new 构造函数可以在内存中创建一个空的对象
  2. this 就会指向刚才创建的空对象
  3. 执行构造函数里面的代码,给这个空对象添加属性和方法
  4. 返回这个对象(所以构造函数里面不需要return)
 function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(song) {
          console.log(song);
        }
      }
      var ldh = new Star('刘德化',18,'男');// 调用函数返回的是一个对象
       console.log(typeof ldh);// Object

4.遍历对象

for...in语句用于对数组或者对象的属性进行循环操作。

var obj = {
        name:'pink',
        age:18,
        sex:'男',
        fn: function() {}
      }

使用for (变量 in 对象) {}来变量对象:

for(var k in obj) {
        console.log(k);// k 变量
        console.log(obj[k]);// obj[k] 得到是 属性值
      }
      // 我们使用 for in 里面的变量 我们喜欢写 k 或者 key

结果:

5.小结

  • 对象可以让代码结构更清晰
  • 对象复杂3数据类型object
  • 本质:对象就是一组无序的相关属性和方法的集合
  • 构造函数泛指某一大类,比如苹果,不管是红色还是绿色苹果,都统称为苹果
  • 对象实例特指一个事物,比如这个苹果,正在讲课的老师
  • for...in 语句用于对对象的属性进行循环操作