數據劫持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郵箱：同上，呵呵！