資料劫持Object.defineProperty與代理Proxy

前端coder發表於2019-02-23
Object

資料劫持作用：

雙向資料繫結的核心方法，主要是做資料劫持操作(監控資料變化)，同時是後期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郵箱：同上，呵呵！

相關文章