ES6 Proxy的简单使用

最新推荐文章于 2025-06-17 19:50:35 发布

原创最新推荐文章于 2025-06-17 19:50:35 发布 · 869 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 Proxy的简单使用 #Proxy的简单使用 #Proxy使用 #Proxy 对象预处理

前端开发同时被 2 个专栏收录

238 篇文章

订阅专栏

ES6

15 篇文章

订阅专栏

本文详细解析了JavaScript中Proxy对象的使用方法，包括通过new Proxy进行声明的基本形式，以及get和set属性如何作为钩子函数预处理属性访问和修改。同时，介绍了apply属性在调用内部方法时的应用。

我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。

new Proxy（{},{}）;

需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am mayouchen'
}, {
        get:function(target,key,property){
            console.log('come in Get');
            return target[key];
        }
    });
console.log(pro.name);
console.log(pro.add(10));

可以在控制台看到结果，先输出了come in Get, 然后在输出 20，相当于在方法调用前执行了钩子函数。

get属性

get属性是在你得到某对象属性值时预处理的方法，他接受三个参数

target：得到的目标值
key：目标的key值，相当于对象的属性
property：这个不太常用。

set属性

set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。

target:目标值。
key：目标的Key值。
value：要改变的值。
receiver：改变前的原始值。

apply的使用

apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码。

target = function () {
    return 'I am mayouchen';
};
var handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}
var pro = new Proxy(target, handler);
console.log(pro());