ES6 21.代理Proxy
阿新 • • 發佈:2021-11-28
要點:代理能力
1.什麼是代理?
答:給目標物件封裝一層攔截,外界訪問必須先通過這層攔截
2.類似獵頭招聘,你自己釋出招聘會暴露自身資訊,而通過中介則安全的多
3.代理Proxy的語法:
// 目標物件 let obj={ name:'Mr.Lee', age:100, gender:'男' } // 建立一個代理,引數1攔截的目標物件,引數2攔截行為 // 引數2如果是空物件,代理直接會呼叫目標物件 let p=new Proxy(obj,{ // get方法用於攔截某個屬性的讀取操作 // 這裡直接return,通過代理物件無論訪問目標物件的任何屬性都是fail get(target,property){return 'fail'; } }) // 代理物件訪問name為fail console.log(p.name);
4.如果想讓代理物件公佈出合適的資訊,可以通過 get() 兩個引數來實現
// 通過屬性判斷,可以獲取目標物件屬性的值 // 並且還可以各種操作,比如驗證、修改等 if(property==='age'){ return target[property]-80; //obj.age }else{ return 'fail'; } // 對外公佈的年齡20console.log(p.age);
5.可以通過set()方法對代理物件的屬性進行賦值,有三個引數
// set可以攔截某個屬性的賦值操作,比get多了引數3 set(target,property,value) { if(property==='age'){ if(!Number.isInteger(value) || value > 150){ throw new TypeError('年齡資料不合法!'); } target[property]=value; } }// 通過代理物件對屬性進行賦值 p.age=25; console.log(p.age); //25 console.log(obj.age); //目標物件屬性也被更改
ps:1.代理並不是複製克隆目標物件,只是攔截目標物件更改預設行為
2.代理可以使用 set() 和 get() 方法,對目標物件的資料進行過渡和驗證
3.代理物件中任何未公開或不存在的屬性,可自定義返回內容,比如:fail 或者 已遮蔽
4.代理也可以阻止賦值的預設行為:直接 return false ,就禁止賦值了
set(target,property,value) { return false; }