监听属性变化

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

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/4427