JavaScript对象的几种创建方式

JavaScript对象的几种创建方式

在 JavaScript 中，对象可以通过多种方式创建，每种方法都有其适用场景和特点。以下是常见的对象创建方式及其示例：

1. 对象字面量（Object Literal）

特点：最简洁的方式，直接定义键值对。 适用场景：创建简单的单例对象，无需复用或继承。

const person = {
  name: '张三',
  age: 30,
  greet() {
    console.log(`你好，我是${this.name}`);
  }
};
person.greet(); // 输出：你好，我是张三

2. 构造函数（Constructor Function）

特点：通过 new 关键字调用构造函数，实例共享原型方法。 适用场景：需要批量创建相似对象，支持继承。

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

Person.prototype.greet = function() {
  console.log(`你好，我是${this.name}`);
};

const person1 = new Person('李四', 25);
person1.greet(); // 输出：你好，我是李四

3. Object.create()

特点：基于现有对象创建新对象，可指定原型。 适用场景：需要精确控制原型链，实现纯净继承。

const protoPerson = {
  greet() {
    console.log(`你好，我是${this.name}`);
  }
};

const person = Object.create(protoPerson);
person.name = '王五';
person.greet(); // 输出：你好，我是王五

创建无原型的对象：

const bareObject = Object.create(null); // 无原型链
bareObject.key = 'value';
console.log(bareObject.toString); // undefined（无继承方法）

4. ES6 类（Class）

特点：语法糖，本质仍基于原型继承，支持 extends 继承。 适用场景：面向对象编程（OOP），需要清晰的结构和继承关系。

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

  greet() {
    console.log(`你好，我是${this.name}`);
  }
}

const person = new Person('赵六', 28);
person.greet(); // 输出：你好，我是赵六

5. 工厂函数（Factory Function）

特点：通过函数返回新对象，无需 new 关键字。 适用场景：灵活封装对象创建逻辑，避免 this 绑定问题。

function createPerson(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`你好，我是${this.name}`);
    }
  };
}

const person = createPerson('孙七', 35);
person.greet(); // 输出：你好，我是孙七

6. 动态对象（动态属性名）

特点：使用计算属性名动态定义键。 适用场景：属性名需在运行时确定。

const dynamicKey = 'id';
const obj = {
  [dynamicKey]: 123,
  [`get${dynamicKey}`]() {
    return this[dynamicKey];
  }
};
console.log(obj.getId()); // 输出：123

7. 对象合并与复制

特点：通过 Object.assign() 或展开运算符 ... 创建新对象。 适用场景：合并对象或创建浅拷贝。

// 使用 Object.assign
const source = { a: 1, b: 2 };
const target = Object.assign({}, source); // 浅拷贝

// 使用展开运算符
const copied = { ...source };

总结与对比

方式	语法	原型链	复用性	典型场景
对象字面量	{}	Object.prototype	无	简单单例对象
构造函数	new Constructor()	自定义原型	高	批量实例化，继承
ES6 类	class + new	自定义原型	高	OOP，清晰继承结构
Object.create	Object.create(proto)	指定原型	中	原型链控制，纯净继承
工厂函数	函数返回对象	默认或自定义	灵活	避免this，灵活封装逻辑

---

选择建议

• 简单对象：优先使用 对象字面量。
• 批量实例化：选择 构造函数 或 ES6 类。
• 原型控制：使用 Object.create()。
• 避免 this：采用 工厂函数。
• 现代语法：推荐 ES6 类 以提升代码可读性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github