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

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()实现双向数据绑定)