es6 proxy 總結


Proxy: 可以對數據的處理,對構造函數的處理,對數據的驗證,說白了就是在我們訪問對象添加了一層攔截 ,
其實說明白點跟 vuejs computed 的計算屬性很類似,
proxy 字面意思就是代理,下面代碼就相當與代理了 test{} 對象,當proxy.age  時觸發Proxy 的get 方法,做修改操作時觸發 set 方法,
*  測試es6 proxy代理
*/
function f() {
    var  name="小剛"
    var handler={
        get:(target, prop)=>{
            console.log(target); // target {name: "小紅", age: "20"}
            console.log(prop); //  age 
            debugger;
            if(prop==="age"){
                return  target[prop]+="日子";
            }
        },
        set:(target,key ,value)=>{
            debugger;
            console.log(target); // {name: "小紅", age: "20日子"}
            console.log(key);    //age  注: 只顯示proxy 調用的值
            console.log(value);  // 30
            if(key==="age" && typeof value!=="number"){
                throw  Error("age 字段名必須為number");
             }
        }
    }
    var test={
        name:"小紅",
        age:"20"
    }
    var proxy = new Proxy(test,handler);
    var name = test.age;
    // proxy 現在 代理 test 對象
    console.log(`我的年紀${proxy.age}`)  // 獲取 對象 數據時觸發, 與vuejs 的computed 屬性類似
        // 輸出: 我的年紀20
    // 做一個set 修改操作
    console.log(`我修改了年紀屬性觸發set 方法${proxy.age=30}`)
        // 輸出:我修改了年紀屬性觸發set 方法 30


}
f();

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM