[JavaScript知识库]JavaScript Proxy学习笔记（二）

今天国庆假期第一天，祝大家国庆快乐，今天来看看JavaScript Proxy的使用实例，主要有get()、set()和apply()的拦截操作，用来拦截对象属性的获取和赋值，函数的调用。

Proxy 使用示例

get() 拦截

当通过proxy去访问目标对象时，会触发get()函数。

在上一篇的例子里，打印proxyUser对象的属性时，会额外打印出一条消息。

所以我们可以在get()函数中开发自己的自定义逻辑。

例如，使用get()来实现一个计算属性的功能。这和Vue中的计算属性类似。

const user = {
    firstName: '小帅',
    lastName: '编程笔记'
}

const handler = {
    get(target, property) {
        return property === 'fullName' ?
            `${target.firstName} ${target.lastName}` :
            target[property];
    }
};

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.fullName);
// 输出：小帅 编程笔记

上面user对象并没有fullName属性，我们在get()函数中通过自定义判断返回一个firstName属性和lastName属性拼好的结果。

set() 拦截

当我们要给proxy对象属性赋值时会触发set()函数。

假如我们有一个需求，需要确保age属性的类型必须为数字，并且要大于等于18岁，那么我们可以用set()函数来自定义逻辑。

const user = {
    firstName: '小帅',
    lastName: '编程笔记',
    age: 20
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('请输入正确的年龄');
            }
            if (value < 18) {
                throw new Error('您的年龄必须满足18周岁')
            }
        }
        target[property] = value;
    }
};

const proxyUser = new Proxy(user, handler);

然后，尝试设置一个错误类型的值

proxyUser.age = 'foo';
// 输出：Uncaught Error: 请输入正确的年龄

然后尝试设置小于18的值

proxyUser.age = 16;
// 输出：Uncaught Error: 您的年龄必须满足18周岁

最后设置，正确的值

proxyUser.age = 23;
// 输出：23
console.log(proxyUser);
// 输出：Proxy {firstName: '小帅', lastName: '编程笔记', age: 23}
console.log(user);
// {firstName: '小帅', lastName: '编程笔记', age: 23}

apply() 拦截

apply()是用来调用函数的时候的拦截函数，做一些其他自定义逻辑。

const user = {
    firstName: 'hello',
    lastName: 'world'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}

const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
      	// target为getFullName目标函数
      	console.log(target);
      	// args为实际调用函数时传入的参数user
      	console.log(args);
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user));
// 输出：HELLO WORLD

我通过创建了一个函数的代理getFullNameProxy，来在调用函数时最后把值转换为大写进行返回。

最后

proxy的可以拦截操作还有很多，上面的三种，get()、set()、apply()是平时比较算常用的。

还有一些其他的，比较冷门，少用的

• construct – 拦截 new 调用时
• getPrototypeOf – 拦截代理 [[GetPrototypeOf]]
• setPrototypeOf – 拦截代理 Object.setPrototypeOf
• isExtensible – 拦截代理 Object.isExtensible
• preventExtensions –拦截代理 Object.preventExtensions
• getOwnPropertyDescriptor – 拦截代理 Object.getOwnPropertyDescriptor

今天到这里，国庆快乐。

欢迎关注我公众号【小帅的编程笔记】，跟着我每天进步一点点