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方法
同时 在双向数据绑定的过程中 也运用到了数据挟制的概念
数据挟制 在使用大概设置某的对象的属性的时间,通过一系列的代码拦截此次的此次的举动。即可以在赋值过程中添加一些操纵大概修改返回的结果。
给数据添加监听,一旦数据发生变革,就执行视图的修改操纵,这个过程就是数据挟制。
|