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

Posted 铅笔画不出的黑白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中的数据

 

  

 

以上是关于JavaScript使用Object.defineProperty方法实现双数据绑定的主要内容,如果未能解决你的问题,请参考以下文章

前端学习(3289):object.define2

前端学习(3288):object.define

vue双向绑定原理(简单实现原理附demo)

如何编组从 C 头文件中的宏定义的结构?

vue响应式原理

Decorator:从原理到实践