对象

发表于 | 分类于 ，

在 JavaScript 中，数据类型一共分为了 7 种。其中包含 6 种简单数据类型：number、string、boolean、null、undefined、symbol，和 1 种复杂数据类型：object。

JavaScript 中的对象是一个可以储存多个任意类型数据的无序集合。

对象的分类

虽然复杂数据类型的分类只有一个对象，但是在这一个类型下面，却包含了很多种不同的数据结构。根据这些数据结构的特点，JavaScript 又将它们细分成了不同的几种对象：

  • 内置对象：由 JavaScript 内部提供的对象。
    • 例如：Array、Function、Object…
  • 宿主对象：由代码运行环境提供的对象。
    • 例如：浏览器提供的 BOM、DOM。
  • 自定义对象：开发人员自己定义的对象。

这一章我们主要讲一下自定义对象的基本使用。

定义对象

自定义对象的创建方式有两种：

  • 字面量方式

    1
    {};

  • 构造函数方式

    1
    new Object();

通过以上两种方式都可以创建出一个还未储存数据的空对象。一般情况下，为了方便后面对对象的操作使用，我们将对象创建好后都会赋值给一个变量保存起来。

1
2
let obj1 = {};
let obj2 = new Object();

对象初始化

对象初始化即在创建对象的同时就将数据添加进去。

1
2
3
4
5
6
let student = {
    name: "HanMeiMei",
    age: 18,
    gender: "female",
    friends: ["MaDongMei", "LiZiMing"]
}

每一条数据在对象中的保存格式都是由“属性名:属性值”组成。其中，属性名作为数据的标识符，只能是字符串类型（可以不写引号）；属性值即要储存的数据，可以是任意数据类型。每条数据之间用逗号隔开。

对象的属性和方法

  • 当对象中某一条数据的值是非函数类型时，我们就将这条数据叫做对象的属性。
  • 当对象中某一条数据的值是函数类型时，我们就将这条数据叫做对象的方法。

例如：

1
2
3
4
5
6
7
let student = {
	name: 'HanMeiMei',
	age: 20,
    introduce: function() {
        console.log("My name is HanMeiMei, I'm 20 years old.");
    }
}

上面代码中，name和age对应的值都不是函数，因此name和age就是student对象的属性。而introduce对应的值是一个函数，那么introduce就是student对象的方法。

属性和方法的操作

JavaScript 中提供了两种方式用来访问对象的属性和方法。

  • .运算符

    1
    2
    3
    4
    5
    6
    console.log(student.name);  // 查看已有的属性
    student.gender = "female";  // 新增没有的属性
    student.age = 18;           // 修改已有的属性
    student.introduce();        // 调用已有的方法
    delete student.name;        // 删除已有的属性
    delete student.introduce;   // 删除已有的方法

  • []中括号

    1
    2
    3
    4
    5
    6
    console.log(student["name"]);  // 查看已有的属性
    student["gender"] = "female";  // 新增没有的属性
    student["age"] = 18;           // 修改已有的属性
    student["introduce"]();        // 调用已有的方法
    delete student["name"];        // 删除已有的属性
    delete student["introduce"];   // 删除已有的方法

注意：正常情况下，.点和[]中括号两种操作方式没有区别。但是有一种特殊情况：

当对象的属性名是一个变量时，就只能通过[]中括号的方式去操作。

1
2
3
let key = "name";
console.log(student.key);     // undefined
console.log(student[key]);    // HanMeiMei

对象的遍历

JavaScript 提供了 for-in 用来遍历对象。

1
2
3
4
5
6
7
8
9
10
11
12
let student = {
	name: 'HanMeiMei',
	age: 20,
    introduce: function() {
        console.log("My name is HanMeiMei, I'm 20 years old.");
    }
}
for(let key in student) {
    console.log(key);   // name  age  introduce
    console.log(student[key]);  // 'HanMeiMei'  20  function(){...}
}

对象方法中的 this

对象方法中的 this 永远指向调用该方法的对象。

1
2
3
4
5
6
7
let foo = { 
    a: 1,
    bar: function(){
        console.log(this.a);
    } 
}
foo.bar();     // 1
我 秦始皇 打钱