js中的访问器属性 defineProperty（vue双向绑定的原理）

最新推荐文章于 2022-10-01 20:34:32 发布

加菲猫的鳄鱼

最新推荐文章于 2022-10-01 20:34:32 发布

阅读量449

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Anticipate_/article/details/89303006

本文介绍如何使用JavaScript实现简单的双向数据绑定，并探讨访问器属性的概念及其在保护数据方面的作用。通过具体示例，展示了如何利用访问器属性对数据进行有效保护，防止非法篡改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div>
     <input type="text" id="inputVal" placeholder="请输入您的信息">
     <p id="showVal"></p>
  </div>


<script>
//用js实现简单的双向绑定
var data={};
Object.defineProperty(data,'text',{        
    //利用es5的defineProperty的访问器属性来实现
    get(){
        return data
    },
    set(newData){
        document.getElementById("inputVal").value=newData;
        //获得当前元素被修改的value
        document.getElementById("showVal").innerHTML=newData;
        //把修改后的value传递给需要动态显示的元素
    }
})
document.getElementById("inputVal").addEventListener("keyup",(e)=>{      
    //给需要显示双向绑定的元素绑定一个事件
    data.text=e.target.value;
})
</script>

访问器属性：
        1、概念：不直接存储属性值，仅提供对其他数据属性的保护
        2、何时：只要用自定义规则保护属性时
        3、如何：2步：
          1、定义隐藏的数据属性，起别名；实际存储数据
            问题:使用enmuerable隐藏的属性,防for in ,防不住点,别人可用eric._age绕过访问器属性, 
            直接篡改受保护的属性
            解决:使用
          2、定义访问器属性，从受保护的数据属性中读取或修改数据

//此访问器则达到了对数据的保护，不受篡改
 <script>
   //设置访篡改的访问器
function Visitor(name,score,age){
    this.name=name;
    this.age=age;
    var _score="";
    //闭包中的_score等效于Java中的私有属性(仅对象内可用的属性)
    Object.defineProperties(this,{
        score:{
            get(){
            console.log("自动调用get")
            return _score;
            },
            set(val){
                console.log("自动调用set");
                if(val>=60&&val<=100){
                    _score=val;     //把传递的值赋值给_score
                }else{
                    throw new RangeError("传递的分数值不属于合格范围内");
                }
            },
            enumerable:true,//控制能否被for in遍历到
        }
        
    })
    this.score=score;
    Object.seal(this);
    //禁止添加新属性，同时不允许删除
}

var one=new Visitor("xiaoming","68","14");
//one.shuxe="12";
//如果试图添加新属性时则会报错，
//Uncaught TypeError: Cannot add property shuxe, object is not extensible

for(var i in one){           //打印值
    console.log(i+":"+one[i])
}

   
  </script>