JavaScript对象创建与构造函数模式详解

1. JavaScript对象创建与构造函数解析

在JavaScript开发中，对象创建是最基础也是最重要的技能之一。不同于其他面向对象语言，JS提供了多种灵活的对象创建方式，每种方式都有其适用场景和性能特点。

1.1 对象字面量与工厂模式

对象字面量是最简单的创建方式：

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

但当需要创建多个相似对象时，工厂模式更为高效：

javascript复制function createPerson(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`你好，我是${this.name}`);
    }
  };
}
const p1 = createPerson('李四', 25);
const p2 = createPerson('王五', 30);

注意：工厂模式虽然解决了重复创建的问题，但所有对象都是Object类型，无法识别具体"种类"

1.2 构造函数模式进阶

构造函数是JS实现面向对象的核心机制：

javascript复制function Person(name, age) {
  // 实例属性
  this.name = name;
  this.age = age;
  
  // 实例方法
  this.greet = function() {
    console.log(`你好，我是${this.name}`);
  };
}

const p1 = new Person('赵六', 32);
const p2 = new Person('钱七', 27);

构造函数执行时，new操作符会：

1. 创建一个新对象
2. 将this指向该对象
3. 执行构造函数代码
4. 返回新对象

关键点：构造函数首字母大写是行业惯例，用于区分普通函数

2. 实例成员与静态成员详解

2.1 实例成员的特点

实例成员是每个对象独有的属性和方法：

javascript复制function Car(model) {
  this.model = model;  // 实例属性
  this.start = function() {  // 实例方法
    console.log(`${this.model}启动中...`);
  };
}

const car1 = new Car('Model S');
const car2 = new Car('Model 3');

此时car1和car2都有自己独立的start方法副本，这在内存使用上并不高效。

2.2 静态成员的最佳实践

静态成员属于构造函数本身，而非实例：

javascript复制function Car(model) {
  this.model = model;
}

// 静态属性
Car.brand = 'Tesla';

// 静态方法
Car.showBrand = function() {
  console.log(`品牌：${this.brand}`);
};

const car = new Car('Model X');
console.log(Car.brand);  // "Tesla"
Car.showBrand();         // "品牌：Tesla"
console.log(car.brand);  // undefined

静态方法常用于：

• 工具函数（如Math.random()）
• 工厂方法
• 不需要实例状态的辅助函数

2.3 原型优化方案

为避免每个实例都创建方法副本，可将方法定义在原型上：

javascript复制function Car(model) {
  this.model = model;
}

Car.prototype.start = function() {
  console.log(`${this.model}启动中...`);
};

const car1 = new Car('Model Y');
const car2 = new Car('Cybertruck');

此时所有实例共享同一个start方法，内存效率更高。

3. 内置构造函数深度应用

3.1 Object构造函数的妙用

Object构造函数提供了多种创建和操作对象的方式：

javascript复制// 动态添加属性
const obj = new Object();
obj.key1 = 'value1';
Object.defineProperty(obj, 'key2', {
  value: 'value2',
  writable: false,
  enumerable: true
});

// 对象合并
const defaults = { theme: 'light', fontSize: 14 };
const userSettings = { fontSize: 16 };
const finalSettings = Object.assign({}, defaults, userSettings);

3.2 Array构造函数的进阶技巧

数组操作是JS开发中最频繁的任务之一：

javascript复制// 创建数组的不同方式
const arr1 = new Array(1, 2, 3);  // [1, 2, 3]
const arr2 = new Array(3);        // [empty × 3]

// 实用的静态方法
const isArray = Array.isArray(arr1);  // true

// 原型方法链式调用
const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2)
  .reduce((sum, n) => sum + n, 0);

3.3 Function构造函数的特殊用途

虽然不推荐日常使用，但Function构造函数在某些场景很有价值：

javascript复制// 动态创建函数
const add = new Function('a', 'b', 'return a + b');
console.log(add(2, 3));  // 5

// 替代eval的安全方案
const userInput = '2 + 3 * 4';
const calculate = new Function(`return ${userInput}`);
console.log(calculate());  // 14

4. 综合案例：电商商品系统实现

4.1 商品类设计

javascript复制function Product(id, name, price, stock) {
  // 实例属性
  this.id = id;
  this.name = name;
  this.price = price;
  this.stock = stock;
  
  // 实例方法
  this.sell = function(quantity) {
    if (this.stock >= quantity) {
      this.stock -= quantity;
      console.log(`售出${quantity}件${this.name}`);
    } else {
      console.log('库存不足');
    }
  };
}

// 静态属性
Product.category = '电子产品';

// 静态方法
Product.createDiscountProduct = function(id, name, price, stock, discount) {
  const discountedPrice = price * (1 - discount);
  return new Product(id, name, discountedPrice, stock);
};

// 原型方法
Product.prototype.displayInfo = function() {
  console.log(`[${this.id}] ${this.name} - ￥${this.price} (库存:${this.stock})`);
};

4.2 购物车系统实现

javascript复制function ShoppingCart() {
  this.items = [];
}

ShoppingCart.prototype = {
  addItem: function(product, quantity) {
    const existing = this.items.find(item => item.product.id === product.id);
    if (existing) {
      existing.quantity += quantity;
    } else {
      this.items.push({ product, quantity });
    }
  },
  
  removeItem: function(productId) {
    this.items = this.items.filter(item => item.product.id !== productId);
  },
  
  calculateTotal: function() {
    return this.items.reduce((total, item) => {
      return total + (item.product.price * item.quantity);
    }, 0);
  },
  
  checkout: function() {
    this.items.forEach(item => {
      item.product.sell(item.quantity);
    });
    this.items = [];
    console.log('订单已结算');
  }
};

4.3 实际应用示例

javascript复制// 创建商品
const p1 = new Product(1, '手机', 3999, 100);
const p2 = Product.createDiscountProduct(2, '耳机', 599, 50, 0.2);

// 创建购物车
const cart = new ShoppingCart();
cart.addItem(p1, 2);
cart.addItem(p2, 1);

// 显示购物车状态
console.log('当前总价:', cart.calculateTotal());

// 结算
cart.checkout();

// 验证库存变化
p1.displayInfo();
p2.displayInfo();

5. 常见问题与性能优化

5.1 内存泄漏预防

构造函数中常见的内存问题：

javascript复制function ProblematicComponent() {
  this.data = getHugeData();  // 大数据
  
  // 错误：在实例方法中保留对this的引用
  window.addEventListener('resize', () => {
    this.handleResize();  // 闭包保留了this引用
  });
}

// 正确做法
function GoodComponent() {
  this.data = getHugeData();
  
  // 使用弱引用或显式解绑
  this.handleResize = () => { /*...*/ };
  window.addEventListener('resize', this.handleResize);
}

GoodComponent.prototype.cleanup = function() {
  window.removeEventListener('resize', this.handleResize);
  this.data = null;
};

5.2 原型链优化策略

避免原型污染：

javascript复制// 不推荐：修改内置原型
Array.prototype.unique = function() {
  return [...new Set(this)];
};

// 推荐：使用工具类
class ArrayUtils {
  static unique(arr) {
    return [...new Set(arr)];
  }
}

5.3 实例方法的最佳实践

javascript复制function EfficientObject() {
  // 大型数据适合放在实例上
  this.largeData = new Array(1000).fill(0);
}

// 小型方法适合放在原型上
EfficientObject.prototype.process = function() {
  // 处理this.largeData
};

// 静态方法适合工具函数
EfficientObject.helper = function() {
  // 不依赖实例状态的逻辑
};

在实际项目中，我习惯将业务对象的实例方法控制在7±2个以内，过多的方法会导致对象臃肿。对于复杂业务逻辑，建议拆分为多个专注的类，通过组合而非继承来实现功能复用。