原型模式(Prototype)与JavaScript原型链的关系

原型模式是一种创建型设计模式，它通过复制现有对象来创建新对象，而不是通过构造函数。JavaScript的原型链机制天然支持这种模式，两者在概念和实现上存在深度关联。理解这种关系能更高效地利用JavaScript的特性进行对象创建和继承。

原型模式的核心思想

原型模式的核心在于通过克隆已有对象来创建新实例，避免了重复初始化过程。传统面向对象语言中通常需要实现Cloneable接口，而JavaScript通过原型链直接内置了这种能力。例如：

const carPrototype = {
  wheels: 4,
  drive() {
    console.log('Driving with ' + this.wheels + ' wheels');
  },
  clone() {
    return Object.create(this);
  }
};

const myCar = carPrototype.clone();
myCar.drive(); // 输出: Driving with 4 wheels

这种模式特别适合以下场景：

• 当对象初始化成本较高时（如需要复杂计算或IO操作）
• 系统需要动态选择实例化类时
• 需要避免构建类层次结构的情况

JavaScript原型链工作机制

JavaScript每个对象都有__proto__属性（ES6规范建议使用Object.getPrototypeOf），构成原型链查找机制：

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

Person.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

const john = new Person('John');
console.log(john.__proto__ === Person.prototype); // true
console.log(john.__proto__.__proto__ === Object.prototype); // true

原型链的工作流程：

1. 访问对象属性时，先在实例自身查找
2. 找不到则沿__proto__向上查找
3. 直到Object.prototype（原型链顶端）

两种原型的结合点

原型模式在JavaScript中的实现直接利用了语言内置的原型机制：

// 原型模式实现
const robotPrototype = {
  beep() {
    console.log(this.sound || 'Beep beep');
  }
};

function createRobot(sound) {
  const robot = Object.create(robotPrototype);
  robot.sound = sound;
  return robot;
}

const r2d2 = createRobot('哔哔嘟');
r2d2.beep(); // 输出: 哔哔嘟

与传统原型模式的区别：

• JavaScript通过原型链自动处理委托
• 不需要显式实现克隆接口
• 修改原型会影响所有派生实例

实际应用模式

性能优化场景

对于需要创建大量相似对象的场景：

// 游戏中的子弹对象
const bulletPrototype = {
  x: 0,
  y: 0,
  speed: 10,
  draw() {
    console.log(`Drawing bullet at (${this.x}, ${this.y})`);
  }
};

function createBullet(x, y) {
  const bullet = Object.create(bulletPrototype);
  bullet.x = x;
  bullet.y = y;
  return bullet;
}

// 创建100颗子弹
const bullets = Array.from({length: 100}, (_, i) => 
  createBullet(i % 10 * 50, Math.floor(i / 10) * 50)
);

动态继承实现

利用原型链实现运行时继承关系修改：

const animal = {
  breathe() {
    console.log('Breathing...');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Woof!');
};

// 运行时修改原型
const superDog = Object.create(dog);
superDog.fly = function() {
  console.log('Flying!');
};

superDog.breathe(); // Breathing...
superDog.bark();    // Woof!
superDog.fly();     // Flying!

高级应用技巧

原型属性屏蔽

当原型和实例存在同名属性时：

const proto = { value: 42 };
const obj = Object.create(proto);

console.log(obj.value); // 42

obj.value = 100;
console.log(obj.value); // 100 (屏蔽原型属性)
console.log(proto.value); // 42 (未改变)

delete obj.value;
console.log(obj.value); // 42 (恢复访问原型属性)

原型链污染防护

防止意外修改原型链：

// 安全的原型继承
function safeExtend(parent, child) {
  const proto = Object.create(parent.prototype || Object.prototype);
  // 复制可枚举属性
  for (const key in child) {
    if (child.hasOwnProperty(key)) {
      proto[key] = child[key];
    }
  }
  return proto;
}

function Parent() {}
Parent.prototype.method = function() {};

function Child() {}
Child.prototype = safeExtend(Parent, {
  newMethod() {}
});

现代JavaScript中的演进

ES6的class语法糖底层仍基于原型链：

class Vehicle {
  constructor(wheels) {
    this.wheels = wheels;
  }
  drive() {
    console.log(`Driving with ${this.wheels} wheels`);
  }
}

class Car extends Vehicle {
  constructor() {
    super(4);
  }
}

console.log(Car.prototype.__proto__ === Vehicle.prototype); // true

Object.create的polyfill实现揭示了原型链本质：

if (!Object.create) {
  Object.create = function(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
  };
}

性能考量与陷阱

原型链过长会影响查找性能：

// 创建深度原型链
let current = {};
for (let i = 0; i < 100; i++) {
  current = Object.create(current);
  current['level'+i] = i;
}

// 属性查找时间随深度增加
console.time('deep lookup');
current.level99;
console.timeEnd('deep lookup'); // 比直接访问慢数倍

for...in会遍历原型链属性：

const obj = Object.create({ inherited: true });
obj.own = true;

for (const key in obj) {
  console.log(key); // 输出 'own' 和 'inherited'
  if (obj.hasOwnProperty(key)) {
    console.log('Own property:', key);
  }
}