Proxy 是 ECMAScript 2015 引入的新特性，它允许我们在一个对象之前创建一个代理对象，从而可以拦截目标对象的操作，并在需要时自定义这些操作的行为。在 ECMAScript 2017 中，Proxy 的功能得到了进一步扩展，增加了更多的拦截操作，同时也提高了性能和稳定性。本文将详细介绍 Proxy 的使用方法及其在前端开发中的应用。
创建 Proxy 对象
使用 Proxy 首先需要创建一个 Proxy 对象，语法如下：
let proxy = new Proxy(target, handler);
其中，target 是被代理的目标对象，handler 是一个对象，它定义了对目标对象进行拦截时的各种行为。下面我们将详细介绍 handler 对象的各个属性和方法。
拦截操作
在 Proxy 中，我们可以使用 handler 对象来拦截目标对象的各种操作，例如访问属性、设置属性、调用函数等等。下面是 handler 对象中常用的拦截操作：
get
get 方法用来拦截对目标对象属性的访问操作，语法如下：
let handler = {
get(target, prop, receiver) {
// 在这里自定义属性访问的行为
}
};其中，target 是目标对象，prop 是属性名，receiver 是 Proxy 对象或继承 Proxy 对象的对象（即目标对象）。在 get 方法中，我们可以自定义属性访问的行为，例如返回一个新的值、抛出一个错误等等。
下面是一个示例代码，我们使用 get 方法拦截对 person 对象的 name 属性的访问操作：
// javascriptcn.com 代码示例
let person = { name: 'John' };
let handler = {
get(target, prop, receiver) {
if (prop === 'name') {
return 'Hello, ' + target[prop];
} else {
return target[prop];
}
}
};
let proxy = new Proxy(person, handler);
console.log(proxy.name); // 输出：Hello, John
console.log(proxy.age); // 输出：undefinedset
set 方法用来拦截对目标对象属性的设置操作，语法如下：
let handler = {
set(target, prop, value, receiver) {
// 在这里自定义属性设置的行为
return true;
}
};其中，target 是目标对象，prop 是属性名，value 是属性值，receiver 是 Proxy 对象或继承 Proxy 对象的对象（即目标对象）。在 set 方法中，我们可以自定义属性设置的行为，例如限制属性值的类型、触发其他操作等等。需要注意的是，set 方法必须返回一个布尔值，表示是否设置成功。
下面是一个示例代码，我们使用 set 方法拦截对 person 对象的 age 属性的设置操作：
// javascriptcn.com 代码示例
let person = { name: 'John' };
let handler = {
set(target, prop, value, receiver) {
if (prop === 'age') {
if (typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
target[prop] = value;
return true;
} else {
target[prop] = value;
return true;
}
}
};
let proxy = new Proxy(person, handler);
proxy.age = 30; // 设置成功
console.log(proxy.age); // 输出：30
proxy.age = '30'; // 抛出 TypeError 错误apply
apply 方法用来拦截对目标对象函数的调用操作，语法如下：
let handler = {
apply(target, thisArg, args) {
// 在这里自定义函数调用的行为
}
};其中，target 是目标对象，thisArg 是函数调用时的 this 值，args 是函数调用时的参数列表。在 apply 方法中，我们可以自定义函数调用的行为，例如修改 this 值、记录函数调用日志等等。
下面是一个示例代码，我们使用 apply 方法拦截对 person 对象的 sayHello 函数的调用操作：
// javascriptcn.com 代码示例
let person = {
name: 'John',
sayHello() {
console.log('Hello, ' + this.name);
}
};
let handler = {
apply(target, thisArg, args) {
console.log('Calling ' + target.name + '\'s sayHello function');
target.sayHello();
}
};
let proxy = new Proxy(person, handler);
proxy.sayHello(); // 输出：Calling John's sayHello function，Hello, John其他拦截操作
除了上述常用的拦截操作，handler 对象还支持其他拦截操作，例如 has 方法用来拦截 in 操作符，construct 方法用来拦截 new 操作符等等。详细的拦截操作请参考 MDN 文档。
应用场景
Proxy 的强大功能使得它在前端开发中有着广泛的应用场景。下面是一些常见的应用场景：
数据校验
使用 set 方法拦截属性设置操作，可以实现对数据的类型、格式等进行校验，从而确保数据的有效性和安全性。例如，我们可以定义一个 person 对象，使用 Proxy 对象对其进行代理，并在 set 方法中对属性进行校验：
// javascriptcn.com 代码示例
let person = { name: '', age: 0 };
let handler = {
set(target, prop, value, receiver) {
if (prop === 'name') {
if (typeof value !== 'string') {
throw new TypeError('Name must be a string');
}
target[prop] = value;
return true;
} else if (prop === 'age') {
if (typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
target[prop] = value;
return true;
} else {
return false;
}
}
};
let proxy = new Proxy(person, handler);
proxy.name = 'John'; // 设置成功
proxy.age = 30; // 设置成功
proxy.name = 123; // 抛出 TypeError 错误
proxy.age = '30'; // 抛出 TypeError 错误
proxy.gender = 'male'; // 抛出 TypeError 错误缓存代理
使用 Proxy 对象可以实现缓存代理，即在访问某个计算量较大的操作时，先检查是否已经有缓存结果，如果有则直接返回缓存结果，否则再进行计算并缓存结果。例如，我们可以定义一个 fibonacci 函数，使用 Proxy 对象对其进行代理，并在 get 方法中实现缓存代理：
// javascriptcn.com 代码示例
let fibonacci = new Proxy(function(n) {
if (n < 2) {
return n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}, {
cache: {},
get(target, prop, receiver) {
if (prop in this.cache) {
return this.cache[prop];
}
let result = target(prop);
this.cache[prop] = result;
return result;
}
});
console.log(fibonacci[10]); // 输出：55
console.log(fibonacci[10]); // 输出：55（从缓存中获取）拦截 AJAX 请求
使用 Proxy 对象可以实现拦截 AJAX 请求，从而可以在请求发送前或请求返回后对请求进行一些处理。例如，我们可以定义一个 ajax 函数，使用 Proxy 对象对其进行代理，并在 apply 方法中实现对请求的拦截：
// javascriptcn.com 代码示例
let ajax = new Proxy(function(url, options) {
let xhr = new XMLHttpRequest();
xhr.open(options.method || 'GET', url);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
options.success(xhr.responseText);
} else {
options.error(xhr.statusText);
}
};
xhr.onerror = function() {
options.error(xhr.statusText);
};
xhr.send(options.data);
}, {
apply(target, thisArg, args) {
let url = args[0];
let options = args[1];
let headers = options.headers || {};
headers['X-Requested-With'] = 'XMLHttpRequest';
options.headers = headers;
options.success = options.success || function() {};
options.error = options.error || function() {};
target(url, options);
}
});
ajax('/api/data', {
method: 'POST',
data: { name: 'John', age: 30 },
headers: { 'Content-Type': 'application/json' },
success: function(data) {
console.log('Success:', data);
},
error: function(error) {
console.log('Error:', error);
}
});总结
本文介绍了 ECMAScript 2017 中 Proxy 的使用方法及其在前端开发中的应用场景。通过 Proxy，我们可以实现对目标对象的拦截操作，并在需要时自定义这些操作的行为，从而实现更加灵活和高效的开发。在实际开发中，我们可以根据具体的需求选择合适的拦截操作，以及结合其他技术和工具进行开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65741d5cd2f5e1655dd5de1e