ES6中的Proxy - 技术栈

什么是Proxy

在JavaScript中，Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

javascript 复制代码

let proxy = new Proxy(target, handler);

在这里，target是要包装的对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理），handler是一个对象，其属性是当执行一个操作时定义代理的行为的函数。

Proxy的工作原理

Proxy通过包装一个对象，可以拦截并定义基本操作的行为，比如获取属性值、设置属性值、检查属性是否存在等。

当我们对代理对象执行操作时，比如读取属性值，JavaScript会将操作转发给handler对象，由handler对象的相应方法来处理。如果handler没有实现某个方法，那么就会直接对目标对象执行该操作。

Proxy的基本使用

让我们通过一个例子来看看如何使用Proxy。在这个例子中，我们将创建一个不能添加新属性的对象。

javascript 复制代码

let handler = {
    get: function(target, name) {
        return name in target ? target[name] : 37;
    },
    set: function(target, property, value) {
        if (property in target) {
            target[property] = value;
        } else {
            throw new Error('Cannot add new property');
        }
    }
};

let p = new Proxy({}, handler);
p.a = 1; // 设置成功
console.log('a' in p, p.a); // 输出: true 1
try {
    p.b = 2; // 抛出错误: Cannot add new property
} catch(e) {
    console.log(e.message);
}

在这个例子中，我们定义了一个handler，它有get和set两个方法。get方法用于读取属性值，如果属性不存在，则返回37。set方法用于设置属性值，如果属性不存在，则抛出错误。

Proxy的其它用法

除了基本的get和set操作，Proxy还可以拦截其他操作，比如删除属性、检查属性是否存在等。下面是一个例子：

javascript 复制代码

let handler = {
    has: function(target, prop) {
        if (prop[0] === '_') {
            return false;
        }
        return prop in target;
    },
    deleteProperty: function(target, prop) {
        if (prop[0] === '_') {
            throw new Error('Cannot delete private property');
        }
        delete target[prop];
    }
};

let p = new Proxy({}, handler);
p.a = 1;
p._b = 2;
console.log('a' in p, '_b' in p); // 输出: true false
try {
    delete p._b; // 抛出错误: Cannot delete private property
} catch(e) {
    console.log(e.message);
}

在这个例子中，我们定义了一个handler，它有has和deleteProperty两个方法。has方法用于检查属性是否存在，如果属性名以_开头，就返回false。deleteProperty方法用于删除属性，如果属性名以_开头，就抛出错误。

Proxy的应用场景

数据绑定和观察者模式 ：Proxy可以用来实现数据绑定，也就是当对象的属性发生变化时，可以自动更新DOM。这是现代前端框架（如Vue和Angular）的基础。
数据验证 ：Proxy可以用来对对象的属性进行验证。例如，你可以确保某个属性总是返回正数。

javascript 复制代码

let validator = {
    set: function(obj, prop, value) {
        if (prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('Age is always an integer');
            }
            if (value <= 0) {
                throw new RangeError('Age is always a positive integer');
            }
        }

        // 对于age以外的属性，直接保存
        obj[prop] = value;
    }
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
try {
    person.age = 'young'; // 抛出错误: Age is always an integer
} catch(e) {
    console.log(e.message);
}
try {
    person.age = -1; // 抛出错误: Age is always a positive integer
} catch(e) {
    console.log(e.message);
}

性能优化 ：Proxy可以用来实现懒加载或者是数据的虚拟化。这意味着对象可以在需要的时候才创建，或者是只有部分数据保持在内存中。
函数的钩子 ：Proxy不仅可以代理对象，还可以代理函数。这意味着你可以在函数调用前后添加额外的逻辑，比如日志记录、性能测试等。