JavaScript创建对象的几种方式与使用技巧详解

JavaScript 作为一门基于原型的动态语言，其对象创建机制既灵活又复杂。从最基本的字面量声明到 ES6 引入的类语法，开发者需要掌握多种对象创建模式及其底层原理。本文ZHANID工具网将系统梳理 JavaScript 中创建对象的 5 种核心方法，通过代码示例、机制解析和对比分析，帮助读者构建完整的对象创建知识体系。

一、对象字面量：最基础的创建方式

1.1 基本语法与特性

对象字面量是最直观的创建对象的方法，使用花括号 {} 包裹键值对：

const person = {
 name: 'Alice',
 age: 25,
 greet() {
  console.log(`Hello, I'm ${this.name}`);
 }
};

核心特点：

• 简洁性：一行代码即可创建包含属性和方法的对象

• 动态性：运行时动态添加/删除属性

• 唯一性：每次执行都会创建新对象实例

• 枚举性：默认所有属性可枚举（可通过描述符修改）

1.2 属性简写语法（ES6+）

ES6 引入了更简洁的属性定义方式：

const name = 'Bob';
const age = 30;

const user = {
 name,  // 等价于 name: name
 age,
 // 方法简写
 greet() {
  console.log(`Hi, ${this.name}`);
 }
};

优势：

• 减少重复代码

• 提升可读性

• 与解构赋值语法统一

1.3 计算属性名（ES6+）

允许使用表达式作为属性名：

const propKey = 'firstName';
const obj = {
 [propKey]: 'Charlie', // 计算属性名
 ['last' + 'Name']: 'Brown' // 动态拼接
};
console.log(obj.firstName); // Charlie

典型应用场景：

• 需要动态生成属性名的情况

• 避免重复书写长属性名

• 实现属性名的条件化定义

1.4 对象字面量的局限性

尽管方便，但存在以下限制：

• 重复创建：每次声明都会生成新对象

• 难以复用：无法创建多个相似对象实例

• 原型链固定：默认继承 Object.prototype

适用场景：

• 配置对象

• 简单数据结构

• 模块内部的私有状态存储

• 不需要复用的临时对象

二、构造函数模式：类式编程的桥梁

2.1 基本构造函数实现

构造函数通过 new 操作符创建对象实例：

function Person(name, age) {
 this.name = name;
 this.age = age;
 this.greet = function() {
  console.log(`Hello ${this.name}`);
 };
}

const alice = new Person('Alice', 25);

关键机制：

1. 创建新对象

2. 将新对象的原型指向构造函数的 prototype 属性

3. 绑定 this 到新对象

4. 返回新对象（除非构造函数显式返回对象）

2.2 原型方法共享

为避免每个实例创建独立的方法，应将方法定义在原型上：

function Person(name, age) {
 this.name = name;
 this.age = age;
}

// 共享方法
Person.prototype.greet = function() {
 console.log(`Hello ${this.name}`);
};

const bob = new Person('Bob', 30);
bob.greet(); // 调用原型方法

性能优势：

• 所有实例共享同一方法引用

• 节省内存空间

• 保持方法更新同步

2.3 构造函数与实例的关系验证

console.log(alice instanceof Person); // true
console.log(Person.prototype.isPrototypeOf(alice)); // true
console.log(Object.getPrototypeOf(alice) === Person.prototype); // true

原型链结构：

alice.__proto__ → Person.prototype.__proto__ → Object.prototype

2.4 构造函数模式的问题

• 设计缺陷：

• 忘记使用 new 会导致 this 绑定到全局对象

• 原型上的属性被所有实例共享（包括引用类型）

解决方案：

// 安全构造函数模式
function SafePerson(name, age) {
 if (!(this instanceof SafePerson)) {
  return new SafePerson(name, age);
 }
 this.name = name;
 this.age = age;
}

三、Object.create()：原型继承的精确控制

3.1 基本用法与参数解析

const prototype = {
 sayHi() {
  console.log(`Hi from ${this.name}`);
 }
};

const user = Object.create(prototype, {
 name: {
  value: 'Bob',
  writable: true,
  enumerable: true,
  configurable: true
 }
});

参数说明：

• 第一个参数：原型对象（可为 null 创建无原型对象）

• 第二个参数：属性描述符对象（可选）

3.2 创建纯净对象

// 创建无原型对象（不继承任何属性）
const pureObj = Object.create(null);
console.log(pureObj.toString); // undefined

应用场景：

• 需要完全隔离原型污染的情况

• 实现高性能字典（V8 引擎优化）

• 作为 Map 的轻量级替代（当键为字符串时）

3.3 原型式继承实现

function object(o) {
 function F() {}
 F.prototype = o;
 return new F();
}

// 等价于 Object.create()
const parent = { name: 'Parent' };
const child = object(parent);

与构造函数继承的区别：

• 不需要中间构造函数

• 更接近原型链的本质

• 性能优于 new 操作符（V8 引擎优化）

3.4 属性描述符的精细控制

const obj = Object.create({}, {
 id: {
  value: 123,
  writable: false,  // 不可修改
  enumerable: true,  // 可枚举
  configurable: false // 不可删除/修改描述符
 },
 secret: {
  value: 'hidden',
  enumerable: false  // 不可枚举
 }
});

四要素详解：

• value：属性值（默认为 undefined）

• writable：是否可修改（ES5+）

• enumerable：是否出现在 for...in 循环中

• configurable：是否可删除或修改特性

四、工厂模式：解耦创建逻辑

4.1 基础工厂函数实现

function createPerson(name, age) {
 return {
  name,
  age,
  greet() {
   console.log(`Hi, ${this.name}`);
  }
 };
}

const carol = createPerson('Carol', 30);

设计优势：

• 隐藏复杂初始化逻辑

• 统一对象创建接口

• 便于实现对象池等模式

• 无需 new 操作符

4.2 带参数默认值的工厂函数

function createUser(options = {}) {
 const { name = 'Anonymous', age = 18, role = 'user' } = options;
 return {
  name,
  age,
  role,
  getInfo() {
   return `${name} (${role}), ${age} years old`;
  }
 };
}

const admin = createUser({ name: 'Admin', role: 'administrator' });

4.3 工厂模式与构造函数的对比

4.4 高级工厂模式实现

// 带缓存的对象工厂
function createCachedObject(key, creator) {
 const cache = new Map();
 return function(arg) {
  const cacheKey = `${key}:${arg}`;
  if (cache.has(cacheKey)) {
   return cache.get(cacheKey);
  }
  const obj = creator(arg);
  cache.set(cacheKey, obj);
  return obj;
 };
}

const createUser = createCachedObject('user', name => ({ name }));
const user1 = createUser('Alice');
const user2 = createUser('Alice');
console.log(user1 === user2); // true (缓存命中)

五、ES6 Class：语法糖下的原型本质

5.1 类声明与构造函数的关系

class Employee {
 constructor(name, position) {
  this.name = name;
  this.position = position;
 }

 work() {
  console.log(`${this.name} is working as ${this.position}`);
 }

 static company = 'Tech Corp';
}

// 等价于以下构造函数
function Employee(name, position) {
 this.name = name;
 this.position = position;
}

Employee.prototype.work = function() {
 console.log(`${this.name} is working as ${this.position}`);
};
Employee.company = 'Tech Corp';

关键区别：

• 类声明不会被提升（存在暂时性死区）

• 类方法不可枚举（enumerable: false）

• 必须使用 new 调用

• 默认启用严格模式

5.2 继承的实现机制

class Manager extends Employee {
 constructor(name, position, teamSize) {
  super(name, position);
  this.teamSize = teamSize;
 }

 manage() {
  console.log(`${this.name} manages ${this.teamSize} people`);
 }
}

// 原型链关系
// Manager.prototype.__proto__ === Employee.prototype

继承链解析：

1. 子类构造函数调用 super() 初始化父类属性

2. 子类原型继承自父类原型

3. 静态方法继承通过 Object.setPrototypeOf(Child, Parent) 实现

5.3 Getter/Setter 与计算属性名

class Temperature {
 constructor(celsius) {
  this._celsius = celsius;
 }

 get fahrenheit() {
  return this._celsius * 9 / 5 + 32;
 }

 set fahrenheit(value) {
  this._celsius = (value - 32) * 5 / 9;
 }

 static [Symbol.hasInstance](instance) {
  return instance instanceof Temperature;
 }
}

特性说明：

• Getter/Setter 定义在原型上

• 计算属性名可用于静态方法

• Symbol.hasInstance 自定义 instanceof 行为

5.4 私有字段（ES2022）

class BankAccount {
 #balance = 0; // 私有字段

 deposit(amount) {
  if (amount > 0) {
   this.#balance += amount;
   return true;
  }
  return false;
 }

 getBalance() {
  return this.#balance;
 }
}

实现原理：

• 使用唯一符号作为属性名

• 通过 WeakMap 实现真正私有（提案阶段）

• 编译阶段重写为私有属性访问

六、五种方法的综合对比与选择建议

6.1 特性对比表

6.2 选择建议

1. 简单配置对象：优先使用对象字面量

2. 需要实例识别：选择构造函数或类

3. 精确控制原型：使用 Object.create()

4. 隐藏创建逻辑：采用工厂模式

5. 大型项目架构：推荐 ES6 类（配合 TypeScript）

6.3 混合使用示例

// 基类定义
class Animal {
 constructor(name) {
  this.name = name;
 }

 speak() {
  console.log(`${this.name} makes a noise.`);
 }
}

// 工厂函数创建特定类型
function createDog(name, breed) {
 const dog = Object.create(Animal.prototype);
 Animal.call(dog, name);
 dog.breed = breed;
 
 // 覆盖方法
 dog.speak = function() {
  console.log(`${this.name} barks.`);
 };
 
 return dog;
}

const myDog = createDog('Rex', 'Labrador');

结语

JavaScript 的对象创建机制经历了从简单字面量到复杂类系统的演变。理解这五种方法的本质差异和适用场景，是编写高质量 JavaScript 代码的基础。在实际开发中，应根据项目需求、团队规范和性能考虑综合选择创建方式。无论采用哪种模式，掌握原型链、执行上下文和闭包等底层概念，都是成为 JavaScript 高级开发者的必经之路。