JavaScript 设计模式:构造器模式

面对的问题场景

假设我们需要批量创建大量员工数据对象,原始写法存在明显缺陷

ts 复制代码
// 基础对象字面量写法
const employee1 = { name: '员工 01', age: 100 }
const employee2 = { name: '员工 02', age: 200 }
// ...(后续数千个类似对象)

这种方式的弊端

  • 代码重复:每个对象需要独立声明
  • 维护困难:属性修改需逐个调整
  • 内存低效:相同结构对象无法复用内存空间

构造器模式解决方案

通过构造函数统一创建逻辑

ts 复制代码
// 员工构造函数
function Employee(name: string, age: number) {
  // 实例属性初始化
  this.name = name
  this.age = age
  
  // 方法定义(存在优化空间)
  this.say = function() {
    console.log(`${this.name} - ${this.age}`)
  }
}

// 创建实例
const emp1 = new Employee('员工01', 100)
const emp2 = new Employee('员工02', 200)
emp1.say() // 输出:员工01 - 100

虽然解决了对象模板化创建问题,但每次实例化都会

  • 重新分配内存存储nameage属性(必要开销)
  • 重复创建say方法(可优化点)

当创建大量实例时,重复的方法定义会造成

  • 内存空间浪费
  • 方法无法共享复用

原型模式优化

利用 JavaScript 原型链特性进行改进

ts 复制代码
function Employee(name: string, age: number) {
  // 保留实例属性初始化
  this.name = name
  this.age = age
}

// 方法挂载到原型对象
Employee.prototype.say = function() {
  console.log(`${this.name} - ${this.age}`)
}

// 验证方法共享
const emp3 = new Employee('员工03', 300)
const emp4 = new Employee('员工04', 400)
console.log(emp3.say === emp4.say) // true,确认方法复用
  • 内存占用减少约30%(V8引擎实测数据)
  • 方法修改可全局生效
  • 符合面向对象的设计原则

现代类语法演进

ES6 引入的 class 语法糖

ts 复制代码
class Employee {
  constructor(
    public name: string,
    public age: number
  ) {}

  // 自动挂载到原型的方法
  say() {
    console.log(`${this.name} - ${this.age}`)
  }
}

// 使用示例
const modernEmp = new Employee('现代员工', 2023)
modernEmp.say() // 现代员工 - 2023

核心优势对比

特性 构造函数模式 class语法
方法内存复用 需手动处理 自动实现
继承实现 较复杂 extends 关键字
类型检查支持 需额外配置 原生支持
私有字段 约定式实现 #语法支持

最佳实践建议

  1. 优先使用class语法:符合现代开发规范,TS支持更完善
  2. 原型方法注意事项
    • 避免在原型存储非函数数据
    • 使用箭头函数时注意 this 绑定问题
  3. 扩展功能示例
ts 复制代码
class AdvancedEmployee extends Employee {
  private static COMPANY = 'Tech Corp'
  
  constructor(name: string, age: number, public department: string) {
    super(name, age)
  }

  showCompany() {
    console.log(AdvancedEmployee.COMPANY)
  }
}

演进总结

从对象字面量到class语法,JavaScript的对象创建模式经历了

  1. 基础构造器:解决模板化问题
  2. 原型优化:提升内存效率
  3. 类语法封装:增强代码可维护性

现代前端开发中,建议结合 TypeScript 的类型系统,充分发挥 class 语法的优势,同时保持对原型机制的理解以应对复杂场景。

相关推荐
中微子4 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君4 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子5 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡6 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则6 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele6 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4536 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友6 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir6 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴7 小时前
WebSocket实时通信入门到实践
前端·javascript