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，我來自雲南，..."