JavaScript 动态代理全面指南

JavaScript 动态代理全面指南

动态代理是ES6引入的强大功能,通过Proxy对象实现,允许你拦截和自定义对目标对象的操作。下面我将全面介绍JavaScript动态代理的各种用法,包括空对象、get方法拦截等高级特性。

1. Proxy基础

Proxy对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。

ini 复制代码
const target = {};
const handler = {
  get: function(target, prop) {
    return prop in target ? target[prop] : 37;
  }
};

const proxy = new Proxy(target, handler);
proxy.a = 1;
console.log(proxy.a); // 1
console.log(proxy.b); // 37 (handler中定义的默认值)

2. 空对象代理

创建一个"空对象"代理,可以拦截所有操作并返回默认值:

javascript 复制代码
const emptyObject = new Proxy({}, {
  get(target, prop) {
    return undefined; // 所有属性访问返回undefined
  },
  set(target, prop, value) {
    return false; // 阻止所有赋值操作
  },
  has(target, prop) {
    return false; // 所有in操作返回false
  }
});

console.log(emptyObject.anyProperty); // undefined
emptyObject.a = 1; // 静默失败
console.log('a' in emptyObject); // false

3. Get方法拦截

get拦截器可以自定义属性访问行为:

javascript 复制代码
const person = {
  name: 'John',
  age: 30
};

const proxy = new Proxy(person, {
  get(target, prop) {
    if (prop === 'age') {
      return `Age is ${target[prop]}`;
    }
    return target[prop] || `Property "${prop}" does not exist`;
  }
});

console.log(proxy.name); // "John"
console.log(proxy.age); // "Age is 30"
console.log(proxy.job); // "Property "job" does not exist"

4. 完整的拦截器方法

Proxy支持拦截多种操作:

javascript 复制代码
const handler = {
  // 拦截属性读取
  get(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    return Reflect.get(...arguments);
  },
  
  // 拦截属性设置
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(...arguments);
  },
  
  // 拦截in操作符
  has(target, prop) {
    console.log(`Checking if ${prop} exists`);
    return Reflect.has(...arguments);
  },
  
  // 拦截delete操作
  deleteProperty(target, prop) {
    console.log(`Deleting ${prop}`);
    return Reflect.deleteProperty(...arguments);
  },
  
  // 拦截Object.keys等操作
  ownKeys(target) {
    console.log('Getting own keys');
    return Reflect.ownKeys(...arguments);
  },
  
  // 拦截函数调用(当代理目标是函数时)
  apply(target, thisArg, argumentsList) {
    console.log('Function called with', argumentsList);
    return Reflect.apply(...arguments);
  },
  
  // 拦截new操作符
  construct(target, argumentsList, newTarget) {
    console.log('Constructor called with', argumentsList);
    return Reflect.construct(...arguments);
  }
};

const obj = new Proxy({}, handler);
obj.a = 1; // 日志: Setting a to 1
console.log('a' in obj); // 日志: Checking if a exists
delete obj.a; // 日志: Deleting a

5. 验证代理

使用Proxy实现数据验证:

ini 复制代码
const validator = {
  set(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value <= 0) {
        throw new TypeError('Age must be a positive number');
      }
    }
    target[prop] = value;
    return true;
  }
};

const person = new Proxy({}, validator);
person.age = 30; // 正常
person.age = 'thirty'; // 抛出TypeError

6. 自动填充对象

实现一个自动填充默认值的代理:

ini 复制代码
const autoFiller = {
  get(target, prop) {
    if (!(prop in target)) {
      target[prop] = {};
    }
    return target[prop];
  }
};

const obj = new Proxy({}, autoFiller);
obj.a.b.c = 'value'; // 自动创建嵌套结构
console.log(obj); // { a: { b: { c: 'value' } } }

7. 负索引数组

使用Proxy实现类似Python的负索引数组:

ini 复制代码
function createNegativeArray(array) {
  return new Proxy(array, {
    get(target, prop, receiver) {
      if (typeof prop === 'string') {
        const index = parseInt(prop, 10);
        if (index < 0) {
          prop = target.length + index;
        }
      }
      return Reflect.get(target, prop, receiver);
    }
  });
}

const array = createNegativeArray([1, 2, 3, 4, 5]);
console.log(array[-1]); // 5
console.log(array[-2]); // 4

8. 方法链代理

实现一个流畅的方法链代理:

javascript 复制代码
const chainable = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    
    return function(...args) {
      console.log(`Called ${prop} with args: ${args}`);
      return target; // 返回自身以实现链式调用
    };
  }
};

const api = new Proxy({}, chainable);
api.method1().method2(1, 2).method3('a', 'b');
// 输出:
// Called method1 with args: 
// Called method2 with args: 1,2
// Called method3 with args: a,b

9. 性能考虑

虽然Proxy功能强大,但需要注意:

  1. Proxy操作比直接对象访问慢
  2. 某些操作无法被拦截(如Date.prototype.getTime()
  3. 不是所有浏览器都完全支持所有Proxy特性

10. 实际应用场景

  1. 数据验证:在设置属性值时进行验证
  2. 日志记录:跟踪对象的所有操作
  3. 性能监控:测量方法调用时间
  4. 自动保存:在数据变更时自动保存到后端
  5. 虚拟属性:动态计算属性值
  6. API封装:简化复杂API的使用
  7. 权限控制:限制对某些属性的访问

Proxy是JavaScript元编程的强大工具,合理使用可以极大地增强代码的灵活性和可维护性。

相关推荐
Highcharts.js3 小时前
Highcharts Stock 股票图在交易系统中的应用思路
前端·数据可视化·股票图
teeeeeeemo3 小时前
前端模块化(commonJS和ES Module)
前端·笔记·es6·前端模块化
小old弟4 小时前
前端异常隔离方案:Proxy代理、Web Workers和iframe
前端
脑子慢且灵4 小时前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom
TimelessHaze4 小时前
前端面试必问:深浅拷贝从基础到手写,一篇讲透
前端·trae
CaptainDrake4 小时前
React 中 key 的作用
前端·javascript·react.js
全栈技术负责人4 小时前
移动端富文本markdown中表格滚动与页面滚动的冲突处理:Touch 事件 + 鼠标滚轮精确控制方案
前端·javascript·计算机外设
前端拿破轮4 小时前
从零到一开发一个Chrome插件(二)
前端·面试·github
珍宝商店4 小时前
Vue.js 中深度选择器的区别与应用指南
前端·javascript·vue.js