JavaScript 创建对象的方法
对象字面量、构造函数、Object.create、class 等创建对象的方式
问题
JavaScript 中创建对象有哪几种方法?各有什么特点?
解答
1. 对象字面量
const person = {
name: '张三',
age: 25,
sayHi() {
console.log(`Hi, I'm ${this.name}`);
}
};
person.sayHi(); // Hi, I'm 张三
2. new Object()
const person = new Object();
person.name = '张三';
person.age = 25;
// 等价于对象字面量,但写法更繁琐
3. 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 方法放在原型上,所有实例共享
Person.prototype.sayHi = function() {
console.log(`Hi, I'm ${this.name}`);
};
const p1 = new Person('张三', 25);
const p2 = new Person('李四', 30);
console.log(p1.sayHi === p2.sayHi); // true,共享同一个方法
4. Object.create()
// 创建一个以 proto 为原型的对象
const proto = {
sayHi() {
console.log(`Hi, I'm ${this.name}`);
}
};
const person = Object.create(proto);
person.name = '张三';
person.sayHi(); // Hi, I'm 张三
// 创建一个没有原型的纯净对象
const pureObj = Object.create(null);
console.log(pureObj.toString); // undefined,没有继承 Object.prototype
5. class 语法
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
// 方法自动放在原型上
sayHi() {
console.log(`Hi, I'm ${this.name}`);
}
// 静态方法
static create(name, age) {
return new Person(name, age);
}
}
const p1 = new Person('张三', 25);
const p2 = Person.create('李四', 30);
6. 工厂函数
function createPerson(name, age) {
return {
name,
age,
sayHi() {
console.log(`Hi, I'm ${this.name}`);
}
};
}
const p1 = createPerson('张三', 25);
const p2 = createPerson('李四', 30);
// 缺点:每个对象都有独立的方法副本
console.log(p1.sayHi === p2.sayHi); // false
方法对比
| 方法 | 适用场景 | 特点 |
|---|---|---|
| 对象字面量 | 单个对象 | 简单直观 |
| 构造函数 | 创建多个相似对象 | 可共享原型方法 |
| Object.create | 指定原型 | 灵活控制继承 |
| class | 面向对象编程 | 语法清晰,ES6+ |
| 工厂函数 | 封装创建逻辑 | 不需要 new |
关键点
- 对象字面量最常用,适合创建单个对象
- 构造函数和 class 适合创建多个相似对象,方法放原型上可节省内存
- Object.create(null) 可创建无原型的纯净对象,常用于 Map 替代
- class 是构造函数的语法糖,本质相同
- 工厂函数不需要 new,但无法共享方法
目录