使用Js的Proxy监听对象属性变化并进行类public/private的访问控制
Proxy是ES6的引入的一个对象监听机制。可视为JavaScript对象的一个代理中间件。用户在访问对象时，会触发自定义行为。
监听属性变化
Proxy最简单的用法是可以监听对象属性的变化，比如下面的，当 obj 的 visit 属性改变时，自动更新页面上相应的 input元素值。
<form>
<input type="text" name="visit">
</form>
<script type="text/javascript">
var obj = {}
var handler = {
set: function(target, name, value) {
//改变被代理对象的值，使之保持一致
target[name] = value
var input = document.querySelector('[name=' + name + ']')
if (input) {
input.value = value
}
}
}
var proxy = new Proxy(obj, handler);
proxy.visit = 100
setInterval(function() {
proxy.visit++
}, 1000)
</script>上例每秒都会更新表单中对应属性输入框的值。
Proxy还可以用来检查设置的值是否规范：
var obj = {}
var handler = {
set: function(target, name, value) {
if (isNaN(Number(value))) {
throw 'Type error'
}
target[name] = value
}
}
var proxy = new Proxy(obj, handler);执行结果，obj中所有对象只允许赋值数字：
proxy.visit = 'OurJS'
> Uncaught Type error
proxy.visit = 100
> 100用Proxy实现private/ public
ES6已经有了关于实现private修饰符的提案，但是浏览器目前还没有实施，示例代码如下：
class Something {
#property;
constructor(){
this.#property = "test";
}
}
const instance = new Something();
console.log(instance.property); //=> undefined这个提案的缺陷很明显，private私有属性必须以'#'开头的方式命名。用Proxy就可以简单实现这个方案：
var obj = { '#user': 'OurJS' }
var proxy = new Proxy(obj, {
get: function(target, name) {
if (name[0]=='#') {
throw 'Access forbidden'
}
}
});执行结果：
console.log(proxy['#user'])
> Uncaught Access forbidden因为Proxy也是可以继承的，这样只需提供相应的Proxy对象即可实现public/ private、set/get控制等强控制类型的类。
有一些框架，比如vue3.0即准备利用Proxy对象，实现Model到View的自动渲染。
控制 in 语法
Proxy可以控制in语法
var obj = { _visit: 100, name: 'OurJS' } var proxy = new Proxy(obj, { has: function(target, name) { return name[0] != '_' } })
使用
_visit in proxy > VM306:1 Uncaught ReferenceError: _visit is not defined name in proxy true
Proxy也提供其他语法代理控制，类似的可以控制for in枚举等，可参考：
Proxy/ Proxy.revocable
handler.apply
handler.construct
handler.defineProperty
handler.deleteProperty
handler.enumerate(Deprecated)
handler.get
handler.getOwnPropertyDescriptor
handler.getPrototypeOf
handler.has
handler.isExtensible
handler.ownKeys
handler.preventExtensions
handler.set
handler.setPrototypeOf
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
