object.defineProperty()实现双向数据绑定

计算机软件开发 · 2024-9-19 18:05:41

Object.defineProperty()方法会直接在一个对象上界说一个新属性，大概修改一个对象的现有属性(属性为相应式属性)，并返回此对象。

语法:
Object.defineProperty(obj, prop, descriptor)
obj要界说属性的对象。
prop要界说或修改的属性的名称或 descriptor要界说或修改的属性形貌符。

get:
属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继续关系，这里的this并不肯定是界说该属性的对象）。该函数的返回值会被用作属性的值。
默以为 undefined。
set:
属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法担当一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
默以为 undefined。
Object.defineProperty(person,'age',{ 四个配置项:value enumerable writable configurable // value:18, //给属性添加值 // enumerable:true, //控制属性是否可以摆列，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性是否可以被删除，默认值是false 两个函数配置项:get() set()//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number //更改number的值即时赋值给age },//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) number = value //同上 } })使用Object.defineProperty实现双向数据绑定
var model = {};Object.defineProperty(model,'txt',{get:function(){},set:function(val){var span = document.getElementsByTagName('span')[0];span.innerHTML = val;}})var input = document.getElementsByTagName('input')[0];input.oninput = function(){model.txt = input.value;//一定触发set函数}当我们使用 Object.defineProperty 对数组对象赋值有一个新对象的时间，会执行set方法
同时在双向数据绑定的过程中也运用到了数据挟制的概念

数据挟制在使用大概设置某的对象的属性的时间，通过一系列的代码拦截此次的此次的举动。即可以在赋值过程中添加一些操纵大概修改返回的结果。
给数据添加监听，一旦数据发生变革，就执行视图的修改操纵，这个过程就是数据挟制。

object.defineProperty()实现双向数据绑定

所属分类: 问答交流

新帖推荐: 30日

推荐作品