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

  

时间: 2024-10-07 17:13:38

JavaScript使用Object.defineProperty方法实现双数据绑定的相关文章

JavaScript Object.defineProperty()方法详解

Object.defineProperty() Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop, descriptor) 1 参数 obj 需要定义属性的对象. prop 需被定义或修改的属性名. descriptor 需被定义或修改的属性的描述符. 描述 该方法允许精确添加或修改对象的属性.一般情况下,我们为对象添加属性是通过赋值来创建并显示

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

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, prop, descriptor) 参数 obj 需要定义属性的对象. prop 需定义或修改的属性的名字. descriptor 将被定义或修改的属性的描述符. 返回值 返回传入函数的对象,即第一个参数obj 描述EDIT 该方法允许精确添加或修改对象的属性.一般情况下,我们为对象添加属性是通过

浅谈js对象之数据属性、访问器属性、Object.defineProperty方法

一.对象 这个不用多说,常见的几种创建对象的方法有: 1.通过构造函数创建对象,如下所示: function Person(){ } var person = new Person(); 2.通过Object创建简单对象,例如: var obj = new Object(); 3.通过字面量创建对象. var obj = {}; 常用的一般是第一种和第三种方法. 二.属性类型 javascript中有两种属性:数据属性和访问器属性,确切的说这两种特性是用来描述对象属性的各种特征,比如说这个对象属

javascript之Object.defineProperty的奥妙

直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age: 21}) // 返回了一个能容纳4条数据的对象,初始数据为name:'xu'和age: 21 返回的该对象总会有以下属性:overLength(数据容纳量).size(当前数据条数) 返回的对象应该有以下方法:cache(保存一条数据).delete(删除一条数据) 每一次引用某属性后,该属性值

vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单

在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数, Object.defineproperty(obj,'val',attrObject), 参数1: obj是属性所在的对象,参数2: 'val',属性名,它是一个string类型,参数3: {}属性所描述的对象 详情可以看Object.defineproperty的文档 下面直接上dem

Object.defineProperty 方法

先看一个例子: var o = {}; o.a = 1; // 等待于: Object.defineProperty(o, 'a', { value: 1, writable: true, configurable: true, enumerable: true }); Object.defineProperty(o, 'a', { value: 1 }); // 等待于: Object.defineProperty(o, 'a', { value: 1, writable: false, co

16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析

一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProperty可以用于给对象添加或更新属性. // 它里面有下面三个参数: 给设置属性的对象.设置属性的属性名.以及设置的配置项 // 先声明的一个对象 var obj = {} Object.defineProperty(obj,"name",{ // 这个配置项里面有两个函数,分别是gett

javascript:利用Object.create()方法创建对象

在javascript里面,我们知道有两种常见的创建对象的方法,一种是使用对象直接量: 对象直接量是由若干值/键对组成的映射表,值/键对用逗号”,“分隔开,整个部分用花括号”{}“括起来. 例如: var empty={}; var people = { name:'kobe', age:'34' }; 另外一种方法是通过new创建对象:在new后面使用一个函数调用,这个函数也成为构造函数,通过new来初始化一个新的对象. 例如: var arr = new Array(); var date

Object.defineProperty() 以及 vue 中双数据绑定的底层原理

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是Object对象其实包含了很多很有用的属性和方法,尤其是ES5增加的方法,今天我们先探讨一下Object.defineProperty(). Object.defineProperty 给一个对象添加或者修改属性 返回的是一个对象 语法 Object.defineProperty(obj, prop