資訊專欄INFORMATION COLUMN
摘要：代理原始對(duì)象，或者真實(shí)數(shù)據(jù)，可以理解為供應(yīng)商代理對(duì)象，可以理解為代理商，對(duì)用戶來(lái)說(shuō)，直接操作，而不能直接操作攔截對(duì)象屬性的讀取攔截對(duì)象設(shè)置屬性只讓用戶修改屬性，其他的不允許修改攔截操作只暴露屬性，其他的都不暴露攔截屬性名以下劃線開(kāi)頭的，
Proxy代理
{
// 原始對(duì)象，或者真實(shí)數(shù)據(jù)，可以理解為供應(yīng)商
let obj = {
time: "2018-10-05",
name: "lucy",
age: 16,
_is: true
};
// 代理對(duì)象，可以理解為代理商，對(duì)用戶來(lái)說(shuō)，直接操作monitor，而不能直接操作obj
let monitor = new Proxy(obj, {
// 攔截對(duì)象屬性的讀取
get(target, key) {
return target[key].replace("2018", "2019");
},
// 攔截對(duì)象設(shè)置屬性
set(target, key, value) {
// 只讓用戶修改name屬性，其他的不允許修改
if (key === "name") {
return target[key] = value;
} else {
return target[key];
}
},
// 攔截 key in object 操作
has(target, key) {
// 只暴露name屬性，其他的都不暴露
if (key === "name") {
return target[key];
} else {
return false;
}
},
// 攔截delete
deleteProperty(target, key) {
// 屬性名以_下劃線開(kāi)頭的，就允許刪除，否則不允許刪除
if (key.indexOf("_") > -1) {
delete target[key];
return true;
} else {
return target[key];
}
},
// 攔截Object.keys Object.getOwnPropertySymbols, Object.getOwnPropertyNames
ownKeys(target) {
// 攔截了time屬性
return Object.keys(target).filter(item => item != "time");
}
});
console.log("get", monitor.time); // 2019-10-05
monitor.time = "2020";
monitor.name = "can";
console.log("set", monitor.time, monitor.name); // 2019-10-05 can
console.log("has", "name" in monitor, "time" in monitor); // true false
delete monitor.time;
delete monitor._is;
console.log(monitor); // Proxy?{time: "2018-10-05", name: "can", age: 16}
console.log("ownKeys", Object.keys(monitor)) // ["name", "age"]
}
Reflect反射
反射的是 object，Reflect的方法跟Proxy一樣，都有g(shù)et,set,has...
{
let obj = {
time: "2018-10-05",
name: "ahhh",
age: 16,
_is: true
};
console.log(Reflect.get(obj, "time")); // 2018-10-05
Reflect.set(obj, "name", "lxc");
console.log(obj); // {time: "2018-10-05", name: "lxc", age: 16, _is: true}
console.log(Reflect.has(obj, "name")); // true
}
數(shù)據(jù)校驗(yàn)例子
{
function validator(target, validator) {
return new Proxy(target, {
_validator: validator,
// 對(duì)set進(jìn)行攔截
set(target, key, value, proxy) {
if (target.hasOwnProperty(key)) {
let va = this._validator[key]; // 拿到_validator配置好的方法
if (!!va(value)) {
// 允許修改
return Reflect.set(target, key, value, proxy);
} else {
// 拋出異常
throw Error(`不能設(shè)置${key}到${value}`);
}
} else {
throw Error(`${key} 不存在`);
}
}
});
}
const personValidators = {
name(val) {
// 如果name設(shè)置為字符串，則允許修改，否則拋出異常
return typeof val === "string";
},
age(val) {
// 如果age設(shè)置為數(shù)值類型并且大于18，則允許修改，否則拋出異常
return typeof val === "number" && val > 18;
}
};
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
// 返回了一個(gè)Proxy對(duì)象，用戶操作的并不是Person這個(gè)實(shí)例，而是這個(gè)實(shí)例的代理對(duì)象
return validator(this, personValidators);
}
}
const person = new Person("haha", 18);
console.log(person); // Proxy?{name: "haha", age: 18}
// person.name = 46; // 不能設(shè)置name到46
// person.age = 20; // 不能設(shè)置age到12
// person.number = 111; // number 不存在
person.name = "yoyo";
person.age = 20;
console.log(person); // Proxy?{name: "yoyo", age: 20}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98714.html
摘要：理解元編程和是屬于元編程范疇的，能介入的對(duì)象底層操作進(jìn)行的過(guò)程中，并加以影響。元編程中的元的概念可以理解為程序本身。中，便是兩個(gè)可以用來(lái)進(jìn)行元編程的特性。在之后，標(biāo)準(zhǔn)引入了，從而提供比較完善的元編程能力。 導(dǎo)讀 幾年前 ES6 剛出來(lái)的時(shí)候接觸過(guò) 元編程（Metaprogramming）的概念，不過(guò)當(dāng)時(shí)還沒(méi)有深究。今天在應(yīng)用和學(xué)習(xí)中不斷接觸到這概念，比如 mobx 5 中就用到了 Pr...
摘要：與學(xué)習(xí)的新語(yǔ)法糖既能學(xué)習(xí)到新東西，又能使得自己的代碼更加優(yōu)雅，逼格更高，爽與之間的運(yùn)用就是對(duì)對(duì)象的操作觸發(fā)的攔截是對(duì)對(duì)象進(jìn)行代理，通過(guò)生成的對(duì)象間接操作原本對(duì)象，最常見(jiàn)的就是與語(yǔ)法形式是需要操作的對(duì)象，而是包含操作對(duì)象的一些方法的對(duì)象是能夠 Proxy與Reflect 學(xué)習(xí)es6的新語(yǔ)法糖既能學(xué)習(xí)到新東西，又能使得自己的代碼更加優(yōu)雅，逼格更高，爽proxy與Reflect之間的運(yùn)用就是...
摘要：通過(guò)對(duì)這些底層內(nèi)置對(duì)象的代理陷阱和反射函數(shù)，讓開(kāi)發(fā)者能進(jìn)一步接近引擎的能力。顯然，與要求代理目標(biāo)對(duì)象必須是一個(gè)函數(shù)，這兩個(gè)代理陷阱在函數(shù)的執(zhí)行方式上開(kāi)啟了很多的可能性，結(jié)合使用就可以完全控制任意的代理目標(biāo)函數(shù)的行為。 代理（Proxy）可以攔截并改變 JS 引擎的底層操作，如數(shù)據(jù)讀取、屬性定義、函數(shù)構(gòu)造等一系列操作。ES6 通過(guò)對(duì)這些底層內(nèi)置對(duì)象的代理陷阱和反射函數(shù)，讓開(kāi)發(fā)者能進(jìn)一步接...
摘要：此時(shí)，鏈家起到的作用就是代理的作用。驗(yàn)證代理構(gòu)造函數(shù)第二個(gè)參數(shù)中的方法，可以很方便的驗(yàn)證向一個(gè)對(duì)象的傳值。 1 什么是代理模式 showImg(https://segmentfault.com/img/remote/1460000015800706?w=1262&h=464); 為其他對(duì)象提供一種代理以控制對(duì)這個(gè)對(duì)象的訪問(wèn)。在某些情況下，一個(gè)對(duì)象不適合或者不能直接引用另一個(gè)對(duì)象，而代理...
摘要：方法與代理處理程序的方法相同。使用給目標(biāo)函數(shù)傳入指定的參數(shù)。當(dāng)然，不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法，然后傳入?yún)?shù)，將返回值賦值給，這樣我們就能在需要讀取這個(gè)返回值的時(shí)候調(diào)用。這種代理模式和的代理有異曲同工之妙。 反射 Reflect 當(dāng)你見(jiàn)到一個(gè)新的API，不明白的時(shí)候，就在瀏覽器打印出來(lái)看看它的樣子。 showImg(https://segmentfault....
閱讀 1452·2021-11-11 16:54
閱讀 9438·2021-11-02 14:44
閱讀 2387·2021-10-22 09:53
閱讀 3270·2019-08-30 11:18
閱讀 1962·2019-08-29 13:29
閱讀 2017·2019-08-27 10:58
閱讀 1635·2019-08-26 11:38
閱讀 3532·2019-08-26 10:31
