Dieser Artikel bietet Ihnen eine Einführung in Proxy und Reflect in ES6 (Codebeispiele). Ich hoffe, dass er für Freunde hilfreich ist.
Proxy
{
// 原始对象，或者真实数据，可以理解为供应商
let obj = {
time: '2018-10-05',
name: 'lucy',
age: 16,
_is: true
};
// 代理对象，可以理解为代理商，对用户来说，直接操作monitor，而不能直接操作obj
let monitor = new Proxy(obj, {
// 拦截对象属性的读取
get(target, key) {
return target[key].replace('2018', '2019');
},
// 拦截对象设置属性
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) {
// 属性名以_下划线开头的，就允许删除，否则不允许删除
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"]
}Reflection
Reflections Methode ist die gleiche wie die von Proxy, beide haben get ,set ,hat...
{
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
}{
function validator(target, validator) {
return new Proxy(target, {
_validator: validator,
// 对set进行拦截
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(`不能设置${key}到${value}`);
}
} else {
throw Error(`${key} 不存在`);
}
}
});
}
const personValidators = {
name(val) {
// 如果name设置为字符串，则允许修改，否则抛出异常
return typeof val === 'string';
},
age(val) {
// 如果age设置为数值类型并且大于18，则允许修改，否则抛出异常
return typeof val === 'number' && val > 18;
}
};
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
// 返回了一个Proxy对象，用户操作的并不是Person这个实例，而是这个实例的代理对象
return validator(this, personValidators);
}
}
const person = new Person('haha', 18);
console.log(person); // Proxy {name: "haha", age: 18}
// person.name = 46; // 不能设置name到46
// person.age = 20; // 不能设置age到12
// person.number = 111; // number 不存在
person.name = 'yoyo';
person.age = 20;
console.log(person); // Proxy {name: "yoyo", age: 20}
}Das obige ist der detaillierte Inhalt vonEinführung in Proxy und Reflect in ES6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
