数据劫持Object.defineProperty与代理Proxy

1,514 阅读2分钟

数据劫持作用:

双向数据绑定的核心方法,主要是做数据劫持操作(监控数据变化),同时是后期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邮箱:同上,呵呵!