网站
引入
学了 JS 对象 之后，知道可以用 {} 创建一个对象。但如果要创建多个结构相同的对象，每次都手写一遍太麻烦。
JS 提供了几种方式来批量创建相似的对象：对象字面量、构造函数和 class。
正文
定义
定义
自定义对象是用代码自己创建的对象，区别于 JS 内置的
Object、Array等对象。可以用对象字面量、构造函数或class来创建。
对象字面量
适合创建单个、独一无二的对象。
let user1 = {
name: "Tom",
age: 18,
sayHello() {
console.log("你好，我是" + this.name);
}
};
let user2 = {
name: "Jack",
age: 20,
sayHello() {
console.log("你好，我是" + this.name);
}
};每个对象都要单独写一遍，代码重复度高。
构造函数
构造函数是一个普通函数，用 new 调用时可以创建对象。
function User(name, age) {
this.name = name;
this.age = age;
this.sayHello = function () {
console.log("你好，我是" + this.name);
};
}
let user1 = new User("Tom", 18);
let user2 = new User("Jack", 20);
user1.sayHello();
user2.sayHello();构造函数名通常首字母大写，用来和普通函数区分。
new 做了这几件事：
- 创建一个空对象
- 让
this指向这个空对象 - 执行构造函数里的代码
- 返回这个新对象
方法放到原型上
如果把方法写在构造函数里，每次 new 都会创建一份新的函数。
更好的做法是把方法放到 prototype 上。
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.sayHello = function () {
console.log("你好，我是" + this.name);
};
let user1 = new User("Tom", 18);
let user2 = new User("Jack", 20);
user1.sayHello();
user2.sayHello();这样所有实例共享同一个方法，更省内存。
class 语法
ES6 引入了 class，是构造函数的更清晰写法。
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log("你好，我是" + this.name);
}
}
let user1 = new User("Tom", 18);
let user2 = new User("Jack", 20);
user1.sayHello();
user2.sayHello();constructor 是构造函数，new 时自动调用。
写在 class 里面的方法，会自动放到原型上，不需要手动操作 prototype。
三种方式对比
| 特性 | 对象字面量 | 构造函数 | class |
|---|---|---|---|
| 适合场景 | 创建单个对象 | 创建多个相似对象 | 创建多个相似对象 |
| 语法简洁度 | 直观 | 一般 | 最清晰 |
| 方法共享 | 每个对象独立 | 需要手动放 prototype | 自动放原型 |
| 继承写法 | 不支持 | 需要手动设置原型链 | extends 关键字 |
| ES 版本 | ES3 | ES3 | ES6 |
什么时候用哪种
- 只需要一个对象 → 对象字面量
- 需要创建多个相似对象 →
class（推荐）或构造函数 - 老项目可能还在用构造函数，需要能看懂
特点
- 对象字面量最简单，但不适合批量创建
- 构造函数配合
prototype可以实现方法共享 class是构造函数的语法糖，底层原理一样- 构造函数名首字母大写是约定
new关键字用来调用构造函数
理解
可以把这三种方式理解为造房子的不同方法。
对象字面量就像手工盖一间房子，盖完一间再盖下一间，每间都要从头来。
构造函数就像有了一张图纸，每次按图纸盖，都能盖出结构一样的房子。
class 就是图纸的升级版，画法更清楚，还能在大图纸上画小图纸（继承）。
实际开发中，如果只需要一个对象，直接用字面量。如果需要创建很多相似对象，优先用 class。
引出
理解了自定义对象的创建方式后，可以继续学习 JS 原型和原型链，了解对象背后的继承机制。
也可以直接学习 JS 类，深入了解 class 的继承和其他用法。
如果想了解 JS 提供了哪些可以直接用的内置对象，可以看看 JS 常用对象。