精确属性配置-赋值监听

例题讲解

 <script>
        // 写一个简单的对象类型
        var emp={
            ename:"zhuzhu",
            //在属性名前面加下划线可以用来存储检查站age检查出来的值
            //注意要设成空的属性值
            _age:null
        }
        // 修改对象的值
        //如果修改的值是不对的,怎么检查这个赋值操作并做出提示
        //给对象添加精确属性配置
        Object.defineProperty(emp,'age',{
            // 由于用户不知道age是检查站，不存储值，所以可以用另一个属性get,但是get和set不同的是get不存值
            get(){
                return this._age
            },
            //set检查站属性,值是一个函数,监听的是对象的属性值
            //set:function(value){}
            //也可以简写成语法糖 就是直接不写function
             set (value){
                console.log("age赋值为",value);
                //判断age要大于0或小于100
                if(value>=1 && value<=100){
                    /* 为啥不能这样写
                    this.age=value
                    因为set属性会让age变成一个函数并成为和set一样的检查站,所以这样写会变成一个死循环
                    由于age变成了检查站不能再存值,可以自己弄一个属性来存值,在前面加个下划线就可以
                    */
                    this._age=value

                }else{
                    //如果修改的对象的属性值不对,就抛出错误
                    throw Error("age赋值错误"+value);
                }
            }
        })
        emp.age=100;
        // 输出对象
        console.log(emp);
         /*读取属性
        console.log(emp._age);
        这种写法对开发者来说是可以的,因为开发者知道这个_age是写来存储监听到的那个值的,但是用户不知道,所以要用get那个方法
        解决方法:由于get(){}这样就可以,括号没有值,所以读取的时候也没有括号,所以可以从外观上迷惑用户
        */
        console.log("用get计算属性迷惑用户"+emp.age);
    </script>

练习1

 <script>
        //创建对象
        var emp={
            ename:"宇",
            _salary:null
        }
        //
        Object.defineProperty(emp,"salary",{
            get(){
               return this._salary
            },
            set(value){
                if(value>=5000 && value<=30000){
                    this._salary=value
                }else{
                    throw Error("薪水范围5000-30000,你写"+value);
                }
            }
        })
        //修改一个属性,监听这个属性不合理的话报错
        emp.salary=15000;
        //读取属性
        console.log(emp.salary);
    </script>

结果

练习2

  <script>
        //创建对象
        var stu={
            ename:'宇',
            _sid:null
        }
        Object.defineProperty(stu,"sid",{
            get(){
                return this._sid
            },
            set(value){
                //学号范围：1-100000
                if(value>=1 && value<=100000){
                    //这是开发者的赋值方法
                    this._sid=value;
                }else{
                    throw Error("学号1-100000，你写"+value
                    );
                }
            }
        });
        //修改数据,set监听这个修改的数据是否在范围内
       // stu.sid=200000;
       //输入能正常储存的学号
       stu.sid=2000
       //打印出这个能正常储存的值
       console.log("用get计算属性迷惑用户"+stu.sid);
        //输出这个对象
        console.log(stu);
    </script>

结果