首先看一下官方的定义：
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:设置属性值 默认为undefinedwritable:值是否可以重写 true|false 默认为falseenumerable:目标属性可以是否被枚举 true|false 默认为falseconfigurable:目标属性可以是否被删除或是否看再次修改特性 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=""