Object.defineProperty()方法详解

Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

一、语法

Object.defineProperty(obj, prop, descriptor)

二、参数

• obj 需要定义属性的对象。
• prop 需被定义或修改的属性名。
• descripter 需被定义或修改的属性的描述符。

三、示例

var o={};//创建一个新对象
Object.defineProperty(o,"a",{
    //该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined
    value:37,
    // 仅当仅当该属性的writable为 true 时，该属性才能被赋值运算符改变。默认为 false
    writable:true,
    //仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false
    enumerable:true,
    // 仅当该属性的 configurable 为 true 时，该属性才能够被改变，也能够被删除。默认为 false
    configurable:true
});
// 对象o拥有了属性a，值为37

var bValue;
Object.defineProperty(o,"b",{
    get:function () { return bValue; },
    set:function (v) { bValue=v; },
    enumerable:true,
    configurable:true
});
o.b=45;

数据和视图联动

给对象o定义新的属性b，并且定义属性b的get和set方法，当o.b的时候会调用b属性的get方法，给b属性赋值的时候，会调用set方法，这就是修改数据的时候，视图会自动更新的关键
前端获取数据后，需要根据数据操作dom，视图变化后，需要修改不少代码，有没有方法将数据和dom操作隔离，看一个例子,显示用户信息的html模版。

<div>
    <p>你好，<span id='nickName'></span></p>
    <div id="introduce"></div>
</div>　　

//视图控制器
var userInfo = {};
Object.defineProperty(userInfo, "nickName", {
    get: function(){
        return document.getElementById('nickName').innerHTML;
    },
    set: function(nick){
        document.getElementById('nickName').innerHTML = nick;
    }
});
Object.defineProperty(userInfo, "introduce", {
    get: function(){
        return document.getElementById('introduce').innerHTML;
    },
    set: function(introduce){
        document.getElementById('introduce').innerHTML = introduce;
    }
});

//数据
//todo 获取用户信息的代码
....

userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx，我来自云南，..."