找女朋友时，可能真需要一个媒人 Proxy

Proxy，中文意思是「代理」，在 JavaScript 中提供了一个系统类 Proxy，当你想要操作一个对象的时候，可以不直接操作对象本身，而是操作代理对象，这时代理扮演了一个中间人的角色。

在解决浏览器跨域问题，我们有一种方案通过代理解决，此时代理也充当了中间人的角色，在发起网络请求时直接通过代理发起请求。

总之，代理其实就是「中间人」，它与现实生活中的媒人意义大同小异。我们来看具体如何使用 Proxy。定义一个对象 book：

const book = {
    name: 'JavaScript',
    author: 'suyan',
    des: '公众号：素燕',
    age: 10
};

如果想监听方法 book 中的属性，可以通过一个代理来实现，在给属性 age 设置值的时候可以判断 age 是否合法，当获取属性 author 时可以在返回结果中拼接一个其它字符串：

const handler = {
    get: function(target, prop, receiver) {
        if(prop === 'author') {
            return target.author + '(素燕)';
        }
        return Reflect.get(...arguments);
    },
    set: function(target, prop, value) {
        if(prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
                throw new RangeError('The age seems invalid');
            }
        }
        target[prop] = value;
        return true;
    }
};

const proxy = new Proxy(book, handler);

在使用时需要使用 proxy 对象，而不是 suyan 对象：

// JavaScript
console.log(proxy.name);
// suyan(素燕)
console.log(proxy.author);
// 公众号：素燕
console.log(proxy.des);
// age 不能是字符串
// proxy.age = '100';
proxy.age = 100;
// 100
console.log(proxy.age);

再来举个例子，在数组中保存了多个对象：

const books = [
    {
        id: '666',
        name: '《读懂 Vue3 编程思想》',
        author: 'suyan'
    },
    {
        id: '888',
        name: '《前端小课》',
        author: '素燕'
    },
    {
        id: '111',
        name: '《前端小课手机版》',
        author: '公众号：素燕'
    }
]

实现能够通过下标（books[0]）和对象 id （books['888']）获取数组中的对象。

const proxyBooks = new Proxy(books, {
    get: function(obj, prop) {
        console.log(prop);
        // 默认实现方式
        if (prop in obj) {
            return obj[prop];
        }
        for (let book of obj) {
            if (book.id === prop) {
                return book;
            }
        }
        return undefined;
    }
});

使用：

// 可通过数组下标来获取数据
console.log(proxyBooks[0]);
// 可通过 id 来获取数据
console.log(proxyBooks['888']);

但是 Proxy 不支持 IE 浏览器，而 Vue3 使用 Proxy 作为响应式框架的基础，如果 Vue3 不想办法解决 IE 兼容的问题，估计开发者很难升级 Vue：

但可以用到 wap 和小程序的开发当中。大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/

找女朋友时，可能真需要一个媒人 Proxy

浏览过的版块