JavaScript使用Object.defineProperty方法实现双数据绑定

　　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方法输出 get

console.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); // 输出 123

User.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中的数据

巴特西