首先看一下官方的定义：
Object.defineProperty()
方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。
语法
Object.defineProperty(obj,prop,descriptor)
对象添加属性—以前的修改添加对象属性的方法
OBJ.parice=500;
OBJ.address=’北京’
console.log(OBJ)
现在可以用 Object.defineProperty();方法来重新定义对象属性
Object.defineProperty(obj,prop,descrioptor)
现在可以用 Object.defineProperty();方法来重新定义对象属性
三个属性：
value:设置属性值 默认为undefined
writable:值是否可以重写 true|false 默认为false
enumerable:目标属性可以是否被枚举 true|false 默认为false
configurable:目标属性可以是否被删除或是否看再次修改特性 true|false 默认为false
var OBJ = {
name: '',
age: 23,
sex: '男',
college: '北京大学',
jobs: 'customer'
}
// 对象里添加的num的属性且值为999；
Object.defineProperty(OBJ, 'num', {
value: 999
})
// 修改了对象的age属性，值为100
Object.defineProperty(OBJ, 'age', {
value: 100
})
Object.defineProperty(OBJ,'age',{
//不允许修改这个属性的，最后修改属性试试OBJ.age=33;，一直不变的,true可以修改
writable:true,
}) // OBJ.age=33;
Object.defineProperty(OBJ,'address',{
value:'天津市南开区',
writable:false,
enumerable:false //改属性不允许遍历出来
})
Object.defineProperty(OBJ,'color',{
// value:设置属性值 默认为undefined
value:'黑色',
// writable:值是否可以重写 true|false 默认为false
writable:true,
// enumerable:目标属性可以是否被枚举 true|false 默认为false
enumerable:true,
// configurable:目标属性可以是否被删除或是否看再次修改特性 true|false 默认为false
configurable:true
})
console.log(OBJ)
get
一个给属性提供 getter 的方法，如果没有 getter 则为undefined。
当我们读取某个属性的时候，其实是在对象内部调用了该方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。
该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法。
要注意：在 descriptor 中不能同时设置访问器（get 和 set）和 wriable 或 value，否则会错，就是说想用 get 和 set，就不能用 writable 或 value 中的任何一个。
get和set是我们今天要重点讨论的两个方法，先看一下他们的简单实例：
虽然我将a.b的值设置成了1，但是因为我在get方法中始终返回了2，所以a.b的值一直是2。
我们可以在页面监听某个变量，当变量发生变化的时候，我们就更新对应的视图。由数据来驱动视图的更新，是不是很熟悉？是的，vue .js的核心思想就是这个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test">这是一个测试</div>
<script>
var view = document.getElementById("test");
var data = {};
var i=0;
Object.defineProperty(data, "b", {
set: function(newValue) {
//当data.b的值改变的时候更新＃test的视图
view.textContent=newValue;
},
get: function() {
}
});
setInterval(function(){
i++;
data["b"] = "data.b的值更新了，我要更新视图"+i;
},1000);
</script>
</body>
</html>
视图变化
最开始的视图
1秒后的视图
2秒后的视图
使用js实现简单的双向数据绑定
<input type="text" id="aa"></input>
<span id="bb"></span>
var obj={}
Object.definedProperty(obj,"hello",{
set:function(val){
document.getElementById("bb").innerHTML=val
document.getElementById("aa").value=val
}
});
document.getElementById("aa").onkeyup=function(e){
obj.hello=e.target.value
}
obj.hello=""
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/webdev/280852.html