ES6 Proxy

定义:

Proxy 可以理解成,在目标对象之前架设一层"拦截",外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来"代理"某些操作,可以译为"代理器"。

语法:

Proxy对象由一个目标对象(target)和一个捕捉器对象(handler)组成。目标对象是被代理的对象,而捕捉器对象定义了在代理对象上执行操作时的行为。

javascript 复制代码
let proxy = new Proxy(target, handler);

Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

使用方法:

属性访问拦截:

javascript 复制代码
const target = {
  name: 'Alice',
  age: 25
};

const handler = {
  get: function(target, prop) {
    console.log(`访问属性: ${prop}`);
    return target[prop];
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出: "访问属性: name",然后输出 "Alice"

属性赋值拦截:

javascript 复制代码
const target = {
  name: 'Alice',
  age: 25
};

const handler = {
  set: function(target, prop, value) {
    console.log(`设置属性: ${prop} 值为 ${value}`);
    target[prop] = value;
  }
};

const proxy = new Proxy(target, handler);
proxy.age = 30; // 输出: "设置属性: age 值为 30"
console.log(proxy.age); // 输出: 30

函数调用拦截:

javascript 复制代码
const target = function(message) {
  console.log(`原始函数被调用,传入参数: ${message}`);
};

const handler = {
  apply: function(target, thisArg, args) {
    console.log(`函数调用拦截,参数: ${args}`);
    target.apply(thisArg, args);
  }
};

const proxy = new Proxy(target, handler);
proxy('Hello!'); // 输出: "函数调用拦截,参数: Hello!",然后输出 "原始函数被调用,传入参数: Hello!"

常见实例方法:

get():

get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。

set():

set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。

apply():

apply方法拦截函数的调用、callapply操作。

apply方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(this)和目标对象的参数数组。

相关推荐
郝学胜-神的一滴18 分钟前
Linux系统函数link、unlink与dentry的关系及使用注意事项
linux·运维·服务器·开发语言·前端·c++
昔人'1 小时前
css`text-wrap:pretty`
前端·css
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
詩句☾⋆᭄南笙1 小时前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒1 小时前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌1 小时前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip1 小时前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙2 小时前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
夏天想2 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界2 小时前
这个 CSS 特性,可能终结样式冲突
前端·css