使用JavaScript的Proxy监听对象属性变化并进行类public/private的访问控制

监听属性变化

<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>

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);

proxy.visit = 'OurJS'
> Uncaught Type error

proxy.visit = 100
> 100

用Proxy实现private/ public

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

控制 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