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

[code] <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>