这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

代理

ES2015的标准增加了：Proxies即代理，这篇文章我们就来了解一下什么是代理。

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。它的语法如下：

const p = new Proxy(target, handler)

• target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理。
• handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

如何使用

我们可以参考Proxy - JavaScript这篇文章来学习Proxy的使用。

handler的apply方法

我们要对代理的对象再次处理，我们可以用apply方法，如下：

const handler = {
    apply(target, ctx, args) {
        const double=target.call(null,...args)*2;
        return  `总数的两倍：${double}`
    }
};

const target = (x, y) => {
    return x + y
}

const p = new Proxy(target, handler);

console.log(p(10,20)); //总数的两倍：60

我们想在两数求和之后，输出的值是总和的两倍且要有一个label提示，此时我们可以这样做：

1. 在函数内部处理，也就是return的时候做些操作

2. 使用proxy代理，如上所示

handler的get方法

我们也可以使用代理，给对象属性一个默认数值，如下：

const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 12;
    },
};

const p = new Proxy({}, handler);

console.log(p.x); //12

当对象属性不存在的时候，默认值为12.

注意事项

在项目中，我们用到的代理一般是处理前端通信跨域的问题。

总结

这篇文章主要是让我们对Proxy有个大概了解，如果需要深入了解，还需再学习。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。