数据劫持Object.defineProperty与代理Proxy

数据劫持做用：

双向数据绑定的核心方法，主要是作数据劫持操做(监控数据变化)，同时是后期ES6中不少语法糖底层实现的核心方法。

数据描述符

使用Object.defineProperty(对象，属性，{})，Object.defineProperty函数传入三个参数，一第一个对象，第二个是对象属性，第三个数据描述符，其中
1.value为对象值
2.writable为可写入，js内置代码不可写好比Function
3.configurable 为可配置的，挂载到window的属性不可配置delete不可删除
4.enumerable为可枚举的，Object.prototype里的属性不可枚举

var obj = {}
    Object.defineProperty(obj,'name' ,{
        value : 'aa',
        writable :true ,//默认false
        configurable : true ,//默认false
        enumerable: true //默认false
    })
    console.log(obj.name) //aa
复制代码

存取描述符

使用set和get时，value和writable不可以使用。觉得都是设置值，和写入值。 1.get方法 get(){}写入值

Object.defineProperty(obj,'name' ,{

           // value : 'aa',
           // writable :true ,//默认false
           configurable : true ,//默认false
           enumerable: true, //默认false
           get: function () {
               return 'aa'
           },
           set: function (newValue) {
           }
       })
       console.log(obj.name) //aa
复制代码

2.set方法 set(){}更新时监听的值，里面必须穿一形参

var tempName = ''
    Object.defineProperty(obj,'name' ,{

        // value : 'aa',
        // writable :true ,//默认false
        configurable : true ,//默认false
        enumerable: true, //默认false
        get: function () {
            return tempName
        },
        set: function (newValue) {
            console.log(newValue) // bb
            tempName = newValue
        }
    })
    obj.name = 'bb'
    console.log(obj.name)// bb
复制代码

上面写法能够简化：

var obj = {
        tempValue : 'aa',
        get name() {
            return this.tempValue
        },
        set name(newValue) {
            this.tempValue = newValue
        }
    }
    console.log(obj.name) //aa
    obj.name = 'bb'
    console.log(obj.name) //bb
复制代码

代理Proxy

代理Proxy是一个构造函数，经过new使用，传入第一个参数为obj，第二个参数为{}，里面方法get，set与数据劫持差很少，但有区别。

let obj = {
        val:'aa'
    }
    let oProxyObj = new Proxy(obj,{
        get(target,key,receuver) { //对象，对象的属性，代理的对象（通常不用）
            console.log(target,key,receuver) // obj,val,oProxyObj
            return Reflect.get(target,key) //至关于 return target[key]
        },
        set (target,key,newVal,receuver) { //对象，对象的属性， 设置的值，代理的对象（通常不用）
            console.log(target,key,newVal,receuver) //obj ,val ,bb , oProxyObj
            Reflect.set(target,key,newVal)
        },
        has (target,key){
            return true
        }
    })
    console.log(oProxyObj.val) //aa
    oProxyObj.val = 'bb'
    console.log(oProxyObj.val)//bb
复制代码

有错误欢迎指出，谢谢观看。

广告：
做者github：github.com/webxukai
做者gitee：gitee.com/webxukai
做者微信：e790134972
做者QQ:我想你应该知道了！
做者QQ邮箱：同上，呵呵！