如何用JavaScript创建对象

发布时间：2021-10-28 16:34:05 作者：iii
来源：亿速云阅读：152

# 如何用JavaScript创建对象

JavaScript作为一门灵活多变的编程语言，提供了多种创建对象的方式。本文将全面介绍7种主流方法，并分析它们的适用场景和优缺点。

## 1. 对象字面量（Object Literal）

最基础的对象创建方式，适合简单场景：

```javascript
const person = {
  name: '张三',
  age: 28,
  greet() {
    console.log(`你好，我是${this.name}`);
  }
};

特点： - 创建简单直观 - 无法复用对象结构 - 适合配置对象或单例模式

2. new Object()构造函数

const book = new Object();
book.title = 'JavaScript高级编程';
book.author = 'Nicholas C.Zakas';
book.showInfo = function() {
  return `${this.title} - ${this.author}`;
};

注意： 与字面量方式本质相同，但写法更冗长，现代开发中较少使用。

3. 构造函数模式（Constructor Pattern）

实现可复用的对象创建：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`我是${this.name}，今年${this.age}岁`);
  };
}

const person1 = new Person('李四', 30);
const person2 = new Person('王五', 25);

关键点： - 构造函数首字母大写（约定） - 使用new操作符调用 - 每个方法都会重新创建（内存浪费）

优化方案： 将方法移到原型上

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

Person.prototype.sayHello = function() {
  console.log(`我是${this.name}，今年${this.age}岁`);
};

4. 原型模式（Prototype Pattern）

利用原型链实现属性和方法共享：

const animalPrototype = {
  init(name) {
    this.name = name;
  },
  makeSound() {
    console.log(`${this.name}发出声音`);
  }
};

const dog = Object.create(animalPrototype);
dog.init('旺财');

优点： - 内存高效（方法共享） - 支持原型链继承

缺点： - 共享属性可能被意外修改 - 需要额外初始化步骤

5. 工厂函数模式

不依赖new操作符的创建方式：

function createUser(name, role) {
  return {
    name,
    role,
    displayInfo() {
      console.log(`${name}是${role}角色`);
    }
  };
}

const admin = createUser('管理员', 'admin');

特点： - 避免new关键字 - 每次返回新对象 - 无法使用instanceof检测类型

6. ES6 Class语法

语法糖形式的构造函数：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea();
  }
  
  calcArea() {
    return this.height * this.width;
  }
}

const rect = new Rectangle(10, 20);

关键特性： - 支持静态方法（static） - 包含getter/setter - 本质仍是原型继承

7. Object.assign()组合创建

实现对象组合和混入（Mixin）：

const canEat = {
  eat() {
    console.log('正在进食');
  }
};

const canWalk = {
  walk() {
    console.log('正在行走');
  }
};

function createPerson(name) {
  return Object.assign({ name }, canEat, canWalk);
}

const person = createPerson('赵六');

进阶技巧

私有成员实现

闭包方案：

function Counter() {
  let count = 0; // 私有变量
  
  this.increment = function() {
    count++;
  };
  
  this.getCount = function() {
    return count;
  };
}

ES2022正式私有字段：

class User {
  #password;  // 私有字段
  
  constructor(username, password) {
    this.username = username;
    this.#password = password;
  }
}

对象拷贝方法对比

方法	浅拷贝	深拷贝	特性
`=`赋值	❌	❌	引用传递
`Object.assign()`	✅	❌	只拷贝可枚举属性
展开运算符	✅	❌	ES6+语法
`JSON.parse(JSON.stringify())`	✅	✅	丢失函数/Symbol
Lodash的`_.cloneDeep()`	✅	✅	完整深拷贝

设计模式实践

单例模式实现

class AppConfig {
  constructor() {
    if (!AppConfig.instance) {
      this.settings = {};
      AppConfig.instance = this;
    }
    return AppConfig.instance;
  }
}

const config1 = new AppConfig();
const config2 = new AppConfig();
console.log(config1 === config2); // true

工厂模式示例

class Car {
  constructor(options) {
    this.type = options.type || '轿车';
  }
}

class CarFactory {
  create(type) {
    switch(type) {
      case 'suv':
        return new Car({ type: 'SUV' });
      default:
        return new Car({});
    }
  }
}

性能考量

内存占用：原型共享方法比构造函数更节省内存
创建速度：字面量 > 构造函数 > class语法
V8引擎优化：频繁创建的对象应保持相同”隐藏类”

最佳实践： - 大量创建对象时使用原型模式 - 简单对象优先使用字面量 - 复杂系统采用class语法提高可读性

总结对比表

创建方式	复用性	内存效率	可读性	适用场景
字面量	❌	一般	★★★★★	简单配置对象
构造函数	✅	较低	★★★☆☆	传统OOP实现
原型模式	✅	高	★★☆☆☆	需要共享方法
Class语法	✅	一般	★★★★★	现代项目开发
工厂函数	✅	一般	★★★★☆	需要灵活创建

结语

JavaScript的对象创建方式各具特色，选择时应考虑： 1. 项目规模和要求 2. 团队熟悉程度 3. 性能需求 4. 未来扩展性

现代开发中推荐优先使用class语法，在需要极致性能时考虑原型模式，简单场景使用对象字面量。理解这些模式背后的原型机制，才能写出更优雅高效的JavaScript代码。 “`

这篇文章包含了： 1. 7种主要创建方式及代码示例 2. 进阶技巧（私有字段、对象拷贝） 3. 设计模式实践 4. 性能考量建议 5. 对比总结表格 6. 完整的技术细节和实用建议

总字数约2200字，采用Markdown格式，包含代码块、表格等元素，适合作为技术博客或文档。