JavaScript设计模式：装饰者模式详解与AOP实现

作者：木棉时间：2026-10-29 20:35:42浏览：555

本文深入解析JavaScript中的装饰者模式，阐述如何在不修改原函数的前提下动态添加额外功能。通过保存原引用、解决this劫持问题以及利用AOP思想实现前置和后置装饰，展示了该模式在插件式表单验证等场景中的实际应用，并对比了其与代理模式的核心差异。

装饰者模式概述

为了避免类过于庞大且包含过多职责，我们可以采用装饰者模式。该模式允许动态地为对象添加额外职责，同时不影响从该类派生的其他对象。其核心机制是将一个对象嵌入另一个对象中，形成一条包装链，从而实现对象的包装效果。

动态扩展函数功能

一、在不修改原函数代码的情况下，为该函数添加额外功能

1. 保存原函数引用


window.onload = function() {
  console.log(1);
};

var _onload = window.onload || function() {};

window.onload = function() {
  _onload();
  console.log(2);
}

实现过程中需注意以下问题：（1）必须维护中间变量以保存原函数引用。（2）可能遇到this指向被劫持的问题。在window.onload的示例中不存在此烦恼，因为调用普通函数_onload时，this同样指向window，与直接调用window.onload时的行为一致。

2. 解决this被劫持的问题


var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById(id);
}

return _getElementById(id); // 报错“Uncaught TypeError: Illegal invocation”

由于_getElementById是全局函数，调用时this指向window；而document.getElementById期望this指向document对象，直接调用会导致上下文错误。

3. 解决this被劫持的方法


var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById.call(document, id);
}

基于AOP的函数装饰

二、利用AOP（面向切面编程）思想装饰函数


/* 让新添加的函数在原函数之前执行（前置装饰）*/
Function.prototype.before = function(beforefn) {
  var _self = this;
  return function() {
    beforefn.apply(this, arguments);  // 新函数接收的参数会被原封不动的传入原函数
    return _self.apply(this, arguments);
  };
};


/* 让新添加的函数在原函数之后执行（后置装饰）*/
Function.prototype.after = function(afterfn) {
  var _self = this;
  return function() {
    var ret = _self.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};


document.getElementById = document.getElementById.before(function() {
  console.log(1);
});

三、避免污染原型链


var before = function(fn, beforefn) {
  return function() {
    beforefn.apply(this, arguments);
    return fn.apply(this, arguments);
  };
};

var after = function(fn, afterfn) {
  return function() {
    var ret = fn.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};

document.getElementById = before(document.getElementById, function(){
  console.log(1);
});

插件式表单验证示例

四、示例：插件式表单验证

结合《学习JavaScript设计模式之策略模式》中的表单验证逻辑，将其应用于ajax数据提交验证，效果显著。

修改上述before方法以支持条件拦截


var before = function(fn, beforefn) {
  return function() {
    if(beforefn.apply(this, arguments) === false) {
      // beforefn返回false，直接return，不执行后面的原函数
      return;
    }
    return fn.apply(this, arguments);
  };
};


/* 模拟数据验证*/
var validate = function() {
  if(username === "") {
    console.log("验证失败！");
    return false;
  }
  return true;
}
/* 模拟ajax提交*/
var formSubmit = function() {
  console.log("提交！！！");
}


username = 1;
formSubmit = before(formSubmit, validate); // 提交！！！
formSubmit();

username = "";
formSubmit = before(formSubmit, validate); // 验证失败！
formSubmit();

装饰者模式与代理模式的区别

五、装饰者模式与代理模式的对比

相同点：两种模式都描述了如何为对象提供一定程度的间接引用，实现部分均保留对另一个对象的引用，并向该对象发送请求。区别：（1）代理模式：当直接访问本体不便或不符合需求时，提供一个替代者。本体定义关键功能，代理负责提供或拒绝访问，或在访问本体前执行额外操作（其核心功能仍与本体一致）。（2）装饰者模式：为对象动态加入新的行为。在初始阶段无法确定对象的全部功能，旨在实实在在为对象添加新的职责和行为。

希望本文所述内容能对大家学习JavaScript程序设计有所帮助。

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01