JavaScript使用Object.defineProperty方法實現雙資料繫結

標籤：輸出   doc   mvc   property   inf   對象   tab   案例   span   

　　Object.defineProperty這個方法非常值得學習，很多mvc架構中的雙向資料繫結就是通過它來實現的。

　　本著互連網分享精神，今天我就將我自己的見解分享給大家，希望能有所協助。

 開始使用　　Object.defineProperty接收三個參數

　　　*  目標對象

　　　*  需要要定義的屬性名稱或方法的名字

　　　*  目標屬性所擁有的特性 - descriptor （之後講解下面案例不包括）

　　代碼執行個體

var User = {};Object.defineProperty(User, ‘info‘, {    value: 123});console.log(User.info);

 descriptor

　　descriptor接收6個參數

　　注意事項：如果使用了（value和writable）就不能使用（get和set），他們可以理解為兩組參數。如果同時使用就會報錯。

　　另外如果參數中設定configurable 又設定了value，writable，configurable，將會以value，writable，configurable中設定的值為準。

var User = {};Object.defineProperty(User, "info", {    // value: 123, // 屬性的值    // writable: false, // 預設為false 如果值為false那麼屬性的值就不能被重寫，只能讀取。    configurable: false,//預設false 如果值為false 就不能再設定或修改他的（value，writable，configurable）    enumerable: false,// 預設false 如果值為false就不能再for..in迴圈中遍曆和 Object.keys() 中被枚舉。    // 調用時不傳參執行的方法    get: function () {        return ‘get‘    },    //調用時傳參執行的方法    set: function (set) {        return set    }});console.log(User.info);//調用get方法輸出 getconsole.log(User.info = ‘aaa‘);//調用 set 方法 輸出 aaa

　　值的修改

　　注意事項： configurable=false,但只要是設定了writable 值還是會修改的，如果writable=false，那麼兩次輸出的結果都會是123。

var User = {};Object.defineProperty(User, "info", {    value: 123,            writable: true,    configurable: false});console.log(User.info); // 輸出 123User.info = 456;console.log(User.info); // 輸出 456

　　enumerable

　　注意事項如果enumerable=false,那麼輸出就會是一個空數組、

var User = {};Object.defineProperty(User, "info", {    value: 123,    enumerable: true,});console.log(Object.keys(User)); //輸出[‘info‘]

　　實戰小案例實現雙向資料繫結

　　　  html源碼

    <p>今天天氣  ：  <span id=‘state‘>晴天</span></p>    <div id="clothes"></div>

　　　　JavaScript源碼

var UserInfo = {};Object.defineProperty(UserInfo, "state", {    get: function () {        return document.getElementById(‘state‘).innerHTML;    },    set: function (nick) {        document.getElementById(‘state‘).innerHTML = nick;    }});Object.defineProperty(UserInfo, "clothes", {    get: function () {        return document.getElementById(‘clothes‘).innerHTML;    },    set: function (clothes) {        document.getElementById(‘clothes‘).innerHTML = clothes;    }});console.log(UserInfo.state);   //輸出晴天UserInfo.clothes = "適合穿短袖";//修改html中的資料

 

　　

 

JavaScript使用Object.defineProperty方法實現雙資料繫結