3.13 对象与类

数组适合装“一串同类的值”，但有些东西更像“一个有很多属性的整体”：一个人有名字、年龄、邮箱；一辆车有品牌、颜色、速度。这种数据用对象（object） 来表示最自然。

下面的实验有两个标签页：先看“对象字面量”，再看“类”怎么批量造对象。

正在加载交互实验...

对象：用“键值对”存数据

对象用大括号 {}，里面是一组 键: 值：

const person = {
  name: "小叶",
  age: 18,
  isStudent: true,
};

用点号访问属性：

person.name    // "小叶"
person.age     // 18
person.age = 19;          // 修改属性
person.email = "[email protected]"; // 新增属性

正在加载概念检查...

对象里也能放函数（方法）

对象的值可以是函数，这种函数叫方法：

const dog = {
  name: "Rex",
  bark: function () {
    return this.name + " 汪汪!";
  },
};

dog.bark();   // "Rex 汪汪!"

this 指“当前这个对象”，所以 this.name 就是 dog.name。

类：批量制造对象的“模板”

如果要造很多个结构相同的对象（100 只狗），一个个手写太麻烦。类（class） 就是一张“图纸”，用 new 可以按图纸造出任意多个实例：

class Dog {
  constructor(name) {   // 创建实例时自动调用
    this.name = name;   // 每个实例存自己的 name
  }

  bark() {              // 方法，所有实例共享
    return this.name + " 汪汪!";
  }
}

const rex = new Dog("Rex");
const bobby = new Dog("Bobby");

rex.bark();    // "Rex 汪汪!"
bobby.bark();  // "Bobby 汪汪!"

class：定义模板。

constructor：特殊方法，new 的时候自动运行，用来初始化每个实例的数据。

new Dog("Rex")：按模板造一个具体实例。

this：指当前这个实例。每个实例的 this.name 各不相同，互相独立。

正在加载概念检查...

注意

对象 vs 数组怎么选？ 当数据是“一串同类的东西、靠位置区分”（第 1 个、第 2 个）时用数组；当数据是“一个东西的多个属性、靠名字区分”（name、age）时用对象。两者还能嵌套：一个数组里装很多对象，是前端最常见的数据结构。

正在加载本节练习...

3.13 对象与类

下面的实验有两个标签页：先看“对象字面量”，再看“类”怎么批量造对象。

正在加载交互实验...

对象：用“键值对”存数据

对象用大括号 {}，里面是一组 键: 值：

const person = {
  name: "小叶",
  age: 18,
  isStudent: true,
};

用点号访问属性：

person.name    // "小叶"
person.age     // 18
person.age = 19;          // 修改属性
person.email = "[email protected]"; // 新增属性

正在加载概念检查...

对象里也能放函数（方法）

对象的值可以是函数，这种函数叫方法：

const dog = {
  name: "Rex",
  bark: function () {
    return this.name + " 汪汪!";
  },
};

dog.bark();   // "Rex 汪汪!"

this 指“当前这个对象”，所以 this.name 就是 dog.name。

类：批量制造对象的“模板”

如果要造很多个结构相同的对象（100 只狗），一个个手写太麻烦。类（class） 就是一张“图纸”，用 new 可以按图纸造出任意多个实例：

class Dog {
  constructor(name) {   // 创建实例时自动调用
    this.name = name;   // 每个实例存自己的 name
  }

  bark() {              // 方法，所有实例共享
    return this.name + " 汪汪!";
  }
}

const rex = new Dog("Rex");
const bobby = new Dog("Bobby");

rex.bark();    // "Rex 汪汪!"
bobby.bark();  // "Bobby 汪汪!"

class：定义模板。

constructor：特殊方法，new 的时候自动运行，用来初始化每个实例的数据。

new Dog("Rex")：按模板造一个具体实例。

this：指当前这个实例。每个实例的 this.name 各不相同，互相独立。

正在加载概念检查...

注意

正在加载本节练习...