JavaScript语言特性对设计模式的影响

JavaScript作为一门灵活且多范式的编程语言，其独特的语言特性（如原型继承、闭包、动态类型等）深刻影响了设计模式的实现方式。与传统面向对象语言不同，JavaScript的设计模式往往需要结合其特有的运行时特性进行调整，甚至催生出一些独有的模式变体。

原型继承与工厂模式

JavaScript的原型链机制使得工厂模式的实现更倾向于使用原型而非类继承。例如，创建一个图形对象的工厂时，可以直接基于原型共享方法：

function createShape(type) {
  function Circle() {}
  Circle.prototype.draw = function() {
    console.log('Drawing circle');
  };

  function Square() {}
  Square.prototype.draw = function() {
    console.log('Drawing square');
  };

  const shapes = { circle: Circle, square: Square };
  return new shapes[type]();
}

const circle = createShape('circle');
circle.draw(); // "Drawing circle"

这种实现避免了传统工厂方法中繁琐的类继承体系，利用原型链实现方法共享。ES6的class语法糖虽然提供了更接近传统OOP的写法，但底层仍然是基于原型的继承。

闭包与单例模式

JavaScript的闭包特性为单例模式提供了天然的实现支持。通过IIFE（立即调用函数表达式）可以创建私有作用域来保护单例实例：

const Singleton = (function() {
  let instance;

  function createInstance() {
    const object = new Object('I am the instance');
    return object;
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

闭包在这里起到了关键作用：instance变量被永久保存在内存中，且外部无法直接访问，这完美符合单例模式的需求。相比之下，传统语言可能需要依赖静态变量或类属性来实现类似功能。

高阶函数与装饰器模式

JavaScript的函数是一等公民这一特性，使得装饰器模式可以通过高阶函数优雅实现。不需要借助复杂的类继承结构：

function withLogging(fn) {
  return function(...args) {
    console.log(`Calling function with args: ${args}`);
    const result = fn.apply(this, args);
    console.log(`Function returned: ${result}`);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const loggedAdd = withLogging(add);
loggedAdd(2, 3); 
// 输出:
// "Calling function with args: 2,3"
// "Function returned: 5"

这种函数式实现比传统的装饰器模式更简洁，且不需要修改原始对象。ES7引入的装饰器语法@decorator进一步简化了这种模式在类方法上的应用。

动态类型与策略模式

JavaScript的动态类型系统让策略模式的实现变得更加灵活。策略对象可以简单地用普通对象字面量表示，策略方法也可以是任意类型的函数：

const strategies = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b
};

function calculate(strategy, a, b) {
  return strategies[strategy](a, b);
}

console.log(calculate('add', 5, 3)); // 8
console.log(calculate('multiply', 5, 3)); // 15

这种实现完全避免了传统策略模式中必须定义策略接口的约束，策略可以随时动态添加或修改：

strategies.divide = (a, b) => a / b;
console.log(calculate('divide', 6, 3)); // 2

事件循环与观察者模式

JavaScript的事件驱动特性使得观察者模式（发布-订阅模式）成为最常用的设计模式之一。浏览器环境中的EventTarget就是最典型的实现：

class Observable {
  constructor() {
    this.listeners = {};
  }

  on(event, fn) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(fn);
  }

  emit(event, ...args) {
    (this.listeners[event] || []).forEach(fn => fn(...args));
  }
}

const observable = new Observable();
observable.on('data', data => console.log('Received:', data));
observable.emit('data', { value: 42 }); // "Received: {value: 42}"

Node.js中的EventEmitter也是类似的实现。JavaScript的异步特性使得观察者模式在处理事件驱动编程时特别高效，避免了轮询带来的性能损耗。

原型链与组合模式

JavaScript原型链的委托机制天然适合组合模式的结构。考虑一个图形渲染的例子：

class Graphic {
  draw() {
    throw new Error('Abstract method');
  }
}

class Circle extends Graphic {
  draw() {
    console.log('Drawing circle');
  }
}

class CompositeGraphic extends Graphic {
  constructor() {
    super();
    this.graphics = [];
  }

  add(graphic) {
    this.graphics.push(graphic);
  }

  draw() {
    this.graphics.forEach(graphic => graphic.draw());
  }
}

const composite = new CompositeGraphic();
composite.add(new Circle());
composite.add(new Circle());
composite.draw(); 
// "Drawing circle"
// "Drawing circle"

虽然这个实现看起来与传统OOP语言类似，但JavaScript的原型查找机制使得方法调用更加灵活。即使某个子组件没有实现draw方法，JavaScript会沿着原型链向上查找，而不会立即抛出错误。

函数式特性与命令模式

JavaScript的函数作为一等公民的特性，使得命令模式可以简化为简单的函数传递：

function lightOn() {
  console.log('Light is on');
}

function lightOff() {
  console.log('Light is off');
}

class Switch {
  constructor(onCommand, offCommand) {
    this.onCommand = onCommand;
    this.offCommand = offCommand;
  }

  turnOn() {
    this.onCommand();
  }

  turnOff() {
    this.offCommand();
  }
}

const lightSwitch = new Switch(lightOn, lightOff);
lightSwitch.turnOn(); // "Light is on"

这种实现比传统的命令模式更轻量，命令对象可以直接用函数表示。结合闭包，还可以实现更复杂的命令：

function createTimerCommand(delay, callback) {
  return function() {
    setTimeout(callback, delay);
  };
}

const delayedCommand = createTimerCommand(1000, () => console.log('Delayed action'));
lightSwitch.turnOn = delayedCommand;
lightSwitch.turnOn(); // 1秒后输出 "Delayed action"

动态对象扩展与适配器模式

JavaScript允许运行时动态扩展对象，这使得适配器模式的实现更加灵活。假设需要适配一个不兼容的第三方库：

// 不兼容的第三方库
const incompatibleLibrary = {
  specialRequest: function(specialParam) {
    return `Result: ${specialParam}`;
  }
};

// 适配器
function createAdapter(lib) {
  return {
    request: function(standardParam) {
      return lib.specialRequest(standardParam.toUpperCase());
    }
  };
}

const adapter = createAdapter(incompatibleLibrary);
console.log(adapter.request('test')); // "Result: TEST"

这种动态适配方式不需要创建复杂的类层次结构，甚至可以在运行时根据需要动态创建适配器。JavaScript的鸭子类型（duck typing）特性也减少了适配器模式的使用场景——只要对象具有所需的方法或属性，通常可以直接使用而不需要适配。

模块模式与命名空间

JavaScript的模块模式利用闭包创建私有状态，这为解决命名冲突提供了优雅方案：

const MyNamespace = (function() {
  let privateCounter = 0;

  function privateMethod() {
    return privateCounter++;
  }

  return {
    publicMethod: function() {
      return privateMethod();
    }
  };
})();

console.log(MyNamespace.publicMethod()); // 0
console.log(MyNamespace.publicMethod()); // 1

在现代JavaScript中，ES6模块已经原生支持这种隔离，但模块模式仍然在需要私有状态的场景下有用武之地。TypeScript的private修饰符编译后实际上也是类似的实现方式。

Proxy与虚拟代理模式

ES6引入的Proxy对象为代理模式提供了语言级别的支持。实现图片懒加载的虚拟代理：

class ImageLoader {
  constructor(src) {
    this.src = src;
    this.realImage = new Image();
  }

  load() {
    console.log('Loading image:', this.src);
    this.realImage.src = this.src;
  }
}

function createImageProxy(src) {
  let loader = null;
  
  return new Proxy({}, {
    get(target, prop) {
      if (prop === 'display') {
        return function() {
          if (!loader) {
            loader = new ImageLoader(src);
            loader.load();
          }
          console.log('Displaying image');
        };
      }
      return target[prop];
    }
  });
}

const image = createImageProxy('large-image.jpg');
image.display(); // "Loading image: large-image.jpg" 然后 "Displaying image"

Proxy的强大之处在于它可以拦截对象的各种操作，这使得实现各种代理变体（保护代理、缓存代理等）变得更加简单直观。

异步编程与Promise模式

JavaScript的异步特性催生了Promise模式，它本质上是一种特殊的状态模式：

class CustomPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.callbacks = [];

    const resolve = value => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;
      this.callbacks.forEach(cb => cb.onFulfilled(value));
    };

    const reject = reason => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.value = reason;
      this.callbacks.forEach(cb => cb.onRejected(reason));
    };

    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }

  then(onFulfilled, onRejected) {
    return new CustomPromise((resolve, reject) => {
      const handleCallback = () => {
        try {
          if (this.state === 'fulfilled') {
            const result = onFulfilled?.(this.value);
            resolve(result);
          } else if (this.state === 'rejected') {
            const result = onRejected?.(this.value);
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      };

      if (this.state !== 'pending') {
        setTimeout(handleCallback, 0);
      } else {
        this.callbacks.push({
          onFulfilled: value => {
            setTimeout(() => handleCallback(), 0);
          },
          onRejected: reason => {
            setTimeout(() => handleCallback(), 0);
          }
        });
      }
    });
  }
}

这个简化版的Promise实现展示了状态模式在异步编程中的应用。JavaScript的事件循环机制使得这种异步状态管理成为可能，而async/await语法则进一步简化了这种模式的使用。

元编程与反射模式

JavaScript的反射API（Reflect）和Proxy结合，为元编程提供了强大支持。实现一个自动记录属性访问的代理：

const user = {
  name: 'John',
  age: 30
};

const observedUser = new Proxy(user, {
  get(target, prop) {
    console.log(`Accessed property: ${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    console.log(`Set property ${prop} to ${value}`);
    return Reflect.set(target, prop, value);
  }
});

observedUser.name; // "Accessed property: name"
observedUser.age = 31; // "Set property age to 31"

这种模式在实现数据绑定、ORM等高级功能时非常有用。JavaScript的动态特性使得运行时修改对象行为成为可能，这是静态类型语言难以实现的。