ES6 中新增了一个非常强大的对象——Proxy 对象，它可以拦截并改变 JavaScript 的底层操作，从而让我们可以在语言层面上进行更加灵活和高效的编程。本文将详细介绍 Proxy 对象的使用方法和在实际项目中的应用实例，希望能够帮助大家更好地掌握这个重要的技术。
什么是 Proxy 对象
Proxy 对象是 JavaScript 中的一个新类型，它提供了一种机制，可以在对象的属性被访问、赋值或删除时进行拦截和响应。Proxy 对象的基本用法如下：
let p = new Proxy(target, handler);
其中，target 是要拦截的对象，handler 是一个对象，里面定义了拦截 target 的各种操作的方法。比如，如果我们想要拦截 target 对象的 get 操作，就可以在 handler 中定义一个 get 方法：
// javascriptcn.com 代码示例
let handler = {
get: function(target, property) {
console.log('getting ' + property);
return target[property];
}
};
let target = { name: 'Tom', age: 18 };
let p = new Proxy(target, handler);
console.log(p.name); // "getting name"，"Tom"在上面的代码中，我们定义了一个 handler 对象，其中的 get 方法会在 target 对象的属性被访问时被调用。在 get 方法中，我们输出了一条日志，并返回了 target 对象的相应属性。然后，我们使用 new Proxy() 创建了一个 p 对象，并将 target 和 handler 作为参数传递进去。最后，我们访问了 p.name 属性，这时 handler 中的 get 方法就会被调用，并输出一条日志。
Proxy 对象的拦截方法
除了 get 方法以外，Proxy 对象还支持很多其他的拦截方法。下面是一些常用的拦截方法及其作用：
get(target, property, receiver)：拦截对象属性的读取操作，返回属性值。set(target, property, value, receiver)：拦截对象属性的赋值操作，返回一个布尔值，表示是否成功赋值。has(target, property)：拦截in操作符，返回一个布尔值，表示对象是否具有该属性。deleteProperty(target, property)：拦截delete操作符，返回一个布尔值，表示是否成功删除属性。apply(target, thisArg, argumentsList)：拦截函数的调用操作，返回函数调用的结果。construct(target, argumentsList, newTarget)：拦截new操作符，返回一个对象。
除了上面这些方法以外，Proxy 对象还支持很多其他的拦截方法，比如 getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf 等等。这些方法的详细说明可以参考 MDN 文档。
Proxy 对象的应用实例
在实际项目中，Proxy 对象有很多应用实例，下面就介绍几个常见的例子。
数据校验
我们经常需要对用户输入的数据进行校验，比如判断一个字符串是否是合法的邮箱地址。使用 Proxy 对象可以很方便地实现这个功能，例如：
// javascriptcn.com 代码示例
let validator = {
set: function(target, property, value) {
if (property === 'email') {
if (!value.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/)) {
throw new Error('Invalid email address');
}
}
target[property] = value;
return true;
}
};
let data = {};
let p = new Proxy(data, validator);
p.email = 'test@example.com'; // 此时 data.email 的值为 'test@example.com'
p.email = 'invalid email'; // 抛出一个错误：“Invalid email address”在上面的代码中，我们定义了一个 validator 对象，其中的 set 方法会在 data 对象的属性被赋值时被调用。在 set 方法中，我们判断了 property 是否为 email，如果是的话，就对 value 进行了校验。如果校验不通过，就抛出一个错误。否则，就将 value 赋值给 target[property]，并返回 true，表示赋值成功。
缓存代理
我们经常需要对一些计算密集型的函数进行缓存，以提高程序的性能。使用 Proxy 对象可以很方便地实现这个功能，例如：
// javascriptcn.com 代码示例
function fibonacci(n) {
if (n === 0 || n === 1) {
return n;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
let cache = new Map();
let fibonacciProxy = new Proxy(fibonacci, {
apply: function(target, thisArg, argumentsList) {
let n = argumentsList[0];
if (cache.has(n)) {
return cache.get(n);
} else {
let result = target.apply(thisArg, argumentsList);
cache.set(n, result);
return result;
}
}
});
console.log(fibonacciProxy(10)); // 55
console.log(fibonacciProxy(10)); // 55，从缓存中读取在上面的代码中，我们定义了一个 fibonacci 函数，它用于计算斐波那契数列。然后，我们使用 new Map() 创建了一个 cache 对象，用于缓存计算结果。接着，我们使用 new Proxy() 创建了一个 fibonacciProxy 对象，并将 fibonacci 和一个 apply 方法作为参数传递进去。在 apply 方法中，我们判断了 cache 中是否已经有了当前 n 的计算结果。如果有的话，就直接返回缓存中的结果。否则，就调用 target.apply() 方法计算结果，并将结果存入 cache 中，然后返回结果。
对象深度监听
我们经常需要对一个对象进行深度监听，以便在其中任何属性发生变化时及时得到通知。使用 Proxy 对象可以很方便地实现这个功能，例如：
// javascriptcn.com 代码示例
let deepProxy = function(target, onChange) {
let handler = {
get: function(target, property, receiver) {
let value = Reflect.get(target, property, receiver);
if (typeof value === 'object' && value !== null) {
return deepProxy(value, onChange);
} else {
return value;
}
},
set: function(target, property, value, receiver) {
let oldValue = target[property];
if (value !== oldValue) {
let result = Reflect.set(target, property, value, receiver);
onChange(target, property, value, oldValue);
return result;
} else {
return true;
}
}
};
return new Proxy(target, handler);
};
let data = { name: 'Tom', age: 18, contact: { email: 'test@example.com' } };
let p = deepProxy(data, function(target, property, value, oldValue) {
console.log(`Property '${property}' changed from '${oldValue}' to '${value}'`);
});
p.name = 'Jerry'; // 输出：Property 'name' changed from 'Tom' to 'Jerry'
p.age = 20; // 输出：Property 'age' changed from '18' to '20'
p.contact.email = 'new-email@example.com'; // 输出：Property 'email' changed from 'test@example.com' to 'new-email@example.com'在上面的代码中，我们定义了一个 deepProxy 函数，它使用递归的方式对一个对象进行深度监听，并调用 onChange 回调函数通知对象属性的变化。在 handler 中，我们重写了 get 和 set 方法。在 get 方法中，我们判断了 value 是否为对象，如果是的话，就递归调用 deepProxy 函数对其进行监听。在 set 方法中，我们判断了 value 是否与 oldValue 相等，如果不相等，就调用 onChange 回调函数通知属性的变化。否则，就返回 true，表示赋值成功。
总结
Proxy 对象是 JavaScript 中一种非常强大的工具，它能够拦截并改变语言底层的操作，从而让我们可以在语言层面上进行更加灵活和高效的编程。在实际项目中，Proxy 对象有很多应用实例，比如数据校验、缓存代理、对象深度监听等等。希望本文能够帮助大家更好地掌握这个重要的技术，从而写出更加高效和优雅的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507abec95b1f8cacd2ee725