简介
Proxy 是 ECMAScript 2015 (ES6) 中新增的一个特性，它可以拦截并代理某些操作，使得我们可以对其进行自定义的处理。通过 Proxy，我们可以实现很多有趣的功能，例如：数据双向绑定、对象深度克隆、权限控制等等。本文将会详细介绍 Proxy 的使用方法和实现原理，并提供相关示例代码。
代理的实现
在 ECMAScript 2015 中，我们可以通过以下方式创建一个 Proxy 对象：
const proxy = new Proxy(target, handler);
其中，target 是被代理的对象，handler 是一个对象，它定义了拦截 target 的各种操作的方法。下面我们来看一下 handler 支持哪些方法：
get
当我们使用代理对象的某个属性时，get 方法会被调用。例如：
// javascriptcn.com 代码示例
const target = { name: 'Tom' };
const handler = {
get(target, key) {
console.log(`正在获取 ${key} 属性`);
return target[key];
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 正在获取 name 属性，输出 Tom在上面的示例中，我们通过 get 方法拦截了对 name 属性的获取，当我们获取该属性时，会先输出一条日志，然后返回 target 对象的 name 属性。
set
当我们对代理对象的某个属性进行赋值时，set 方法会被调用。例如：
// javascriptcn.com 代码示例
const target = { name: 'Tom' };
const handler = {
set(target, key, value) {
console.log(`正在设置 ${key} 属性为 ${value}`);
target[key] = value;
}
};
const proxy = new Proxy(target, handler);
proxy.name = 'Jerry'; // 正在设置 name 属性为 Jerry
console.log(proxy.name); // 输出 Jerry在上面的示例中，我们通过 set 方法拦截了对 name 属性的赋值，当我们设置该属性时，会先输出一条日志，然后将 target 对象的 name 属性设置为指定的值。
has
当我们使用 in 运算符判断代理对象是否包含某个属性时，has 方法会被调用。例如：
// javascriptcn.com 代码示例
const target = { name: 'Tom' };
const handler = {
has(target, key) {
console.log(`正在判断是否包含 ${key} 属性`);
return key in target;
}
};
const proxy = new Proxy(target, handler);
console.log('name' in proxy); // 正在判断是否包含 name 属性，输出 true
console.log('age' in proxy); // 正在判断是否包含 age 属性，输出 false在上面的示例中，我们通过 has 方法拦截了对代理对象的 in 运算符操作，当判断代理对象是否包含某个属性时，会先输出一条日志，然后返回 target 对象是否包含该属性的结果。
deleteProperty
当我们使用 delete 运算符删除代理对象的某个属性时，deleteProperty 方法会被调用。例如：
// javascriptcn.com 代码示例
const target = { name: 'Tom' };
const handler = {
deleteProperty(target, key) {
console.log(`正在删除 ${key} 属性`);
delete target[key];
}
};
const proxy = new Proxy(target, handler);
delete proxy.name; // 正在删除 name 属性
console.log(proxy.name); // 输出 undefined在上面的示例中，我们通过 deleteProperty 方法拦截了对代理对象的 delete 运算符操作，当删除代理对象的某个属性时，会先输出一条日志，然后删除 target 对象的该属性。
apply
当我们将代理对象作为函数进行调用时，apply 方法会被调用。例如：
// javascriptcn.com 代码示例
const target = function(a, b) {
return a + b;
};
const handler = {
apply(target, thisArg, args) {
console.log(`正在调用 ${target.name} 函数`);
return target.apply(thisArg, args);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy(1, 2)); // 正在调用 函数，输出 3在上面的示例中，我们通过 apply 方法拦截了对代理对象的函数调用操作，当调用该函数时，会先输出一条日志，然后返回 target 函数的执行结果。
construct
当我们使用代理对象作为构造函数创建新对象时，construct 方法会被调用。例如：
// javascriptcn.com 代码示例
class Person {
constructor(name) {
this.name = name;
}
}
const handler = {
construct(target, args) {
console.log(`正在创建 ${target.name} 对象`);
return new target(...args);
}
};
const proxy = new Proxy(Person, handler);
const person = new proxy('Tom'); // 正在创建 Person 对象
console.log(person.name); // 输出 Tom在上面的示例中，我们通过 construct 方法拦截了对代理对象的构造函数创建新对象操作，当创建新对象时，会先输出一条日志，然后返回 target 构造函数的执行结果。
拦截与代理的应用
数据双向绑定
数据双向绑定是现代前端框架中常见的一个功能，它可以使得界面上的数据和数据模型中的数据保持同步。我们可以通过 Proxy 来实现数据双向绑定，例如：
// javascriptcn.com 代码示例
const data = { name: 'Tom', age: 18 };
const handler = {
get(target, key) {
console.log(`正在获取 ${key} 属性`);
return target[key];
},
set(target, key, value) {
console.log(`正在设置 ${key} 属性为 ${value}`);
target[key] = value;
// 更新界面上的数据
document.querySelector(`[name=${key}]`).value = value;
}
};
const proxy = new Proxy(data, handler);
// 监听界面上的数据变化
document.querySelectorAll('[name]').forEach(input => {
input.addEventListener('input', event => {
proxy[event.target.name] = event.target.value;
});
});在上面的示例中，我们通过 get 和 set 方法拦截了对 data 对象的获取和赋值操作，当获取或赋值某个属性时，会先输出一条日志，然后更新界面上对应的数据。
对象深度克隆
在 JavaScript 中，对象的复制通常是浅复制，即只复制对象的第一层属性，而不会复制嵌套在对象中的对象。我们可以通过 Proxy 来实现对象的深度克隆，例如：
// javascriptcn.com 代码示例
const obj = {
name: 'Tom',
age: 18,
address: {
province: 'Guangdong',
city: 'Shenzhen'
}
};
const handler = {
get(target, key) {
console.log(`正在获取 ${key} 属性`);
const value = target[key];
return typeof value === 'object' ? new Proxy(value, handler) : value;
}
};
const proxy = new Proxy(obj, handler);
const clone = JSON.parse(JSON.stringify(proxy));
console.log(clone); // 输出克隆后的对象在上面的示例中，我们通过 get 方法拦截了对 obj 对象的获取操作，当获取某个属性时，会先输出一条日志，然后判断该属性是否为对象，如果是对象则返回一个新的代理对象，否则返回该属性的值。通过以上方式，我们可以实现对象的深度克隆。
权限控制
在某些场景下，我们需要对对象的属性进行权限控制，例如：某些属性只能被特定用户访问或修改。我们可以通过 Proxy 来实现对象的属性权限控制，例如：
// javascriptcn.com 代码示例
const obj = {
name: 'Tom',
age: 18,
address: {
province: 'Guangdong',
city: 'Shenzhen'
}
};
const handler = {
get(target, key) {
console.log(`正在获取 ${key} 属性`);
const value = target[key];
if (key === 'address') {
// 检查用户是否有访问该属性的权限
if (user.role === 'admin') {
return value;
} else {
throw new Error('没有访问该属性的权限');
}
}
return value;
},
set(target, key, value) {
console.log(`正在设置 ${key} 属性为 ${value}`);
if (key === 'name') {
// 检查用户是否有修改该属性的权限
if (user.role === 'admin') {
target[key] = value;
} else {
throw new Error('没有修改该属性的权限');
}
} else {
target[key] = value;
}
}
};
const proxy = new Proxy(obj, handler);
// 模拟用户
const user = { role: 'user' };
try {
console.log(proxy.name); // 输出 Tom
proxy.name = 'Jerry'; // 抛出错误：没有修改该属性的权限
} catch (error) {
console.log(error.message);
}
try {
console.log(proxy.address); // 抛出错误：没有访问该属性的权限
} catch (error) {
console.log(error.message);
}在上面的示例中，我们通过 get 和 set 方法拦截了对 obj 对象的获取和赋值操作，当获取或赋值某个属性时，会先输出一条日志，然后检查该属性是否为受权限控制的属性，如果是则检查用户是否有相应的权限，如果没有则抛出错误。通过以上方式，我们可以实现对象的属性权限控制。
总结
通过 Proxy，我们可以实现很多有趣的功能，例如：数据双向绑定、对象深度克隆、权限控制等等。在使用 Proxy 时，我们需要了解其拦截和代理的原理，并根据实际需求实现相应的方法。希望本文对大家学习和使用 Proxy 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e88fd95b1f8cacd7a69a0