(六) -set的用途-实现响应式，还有给目标对象设置值的时候，对值进行合法性的校验

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104872126

set的用途-实现响应式，还有给目标对象设置值的时候，对值进行合法性的校验

示例1：

<body>
  <script>
    var obj = {
      name: 'zs',
      age: 18
    }


    var p = new Proxy(obj, {
      get (target, key) {
        console.log(key)
        return target[key]
      },
      set (target, key, value) {
        console.log(key, value)
        if (key === 'age') {
          if ( value >= 0 && value <= 200 ) {
          } else {
              //用throw new Error()方法，这样可以停止js执行，但浏览器会显示有错误
            throw new Error('age的值不合法')
          }
        }
        target[key] = value
      }
    })

  
  </script>
</body>

页面显示为：

在这里插入图片描述

示例2：

通过代理，你可以轻松地验证向一个对象的传值。这个例子使用了 set。

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age); 
// 100

person.age = 'young'; 
// 抛出异常: Uncaught TypeError: The age is not an integer

person.age = 300; 
// 抛出异常: Uncaught RangeError: The age seems invalid