<img width="500px" src="https://img.haomeiwen.com/i3809801/4942f77926d1dbcd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/100">
很有意思的一章
Proxy get
利用Proxy，可以将读取属性的操作(get)，转变为执行某个函数，从而实现属性的链式操作。
var pipe = (function () {
return function (value) {
var funcStack = [];
var oproxy = new Proxy({} , {
get : function (pipeObject, fnName) {
if (fnName === 'get') {
//es5的写法
// return funcStack.reduce(function (val, fn) { return fn(val); },value);
//es6写法
return funcStack.reduce((val, fn)=>fn(val),value);
}
funcStack.push(window[fnName]); return oproxy; } });
return oproxy;
}
}()
);
var double = n => n * 2;
var pow = n => n * n;
var reverseInt = n => n.toString().split("").reverse().join("") | 0;
pipe(3).double.pow.reverseInt.get; // 63
例子则是利用get拦截，实现一个生成各种DOM节点的通用函数dom。
const dom = new Proxy({}, {
get(target, property) {
return function(attrs = {}, ...children) {
const el = document.createElement(property);
for (let prop of Object.keys(attrs)) {
el.setAttribute(prop, attrs[prop]);
}
for (let child of children) {
if (typeof child === 'string') {
child = document.createTextNode(child);
}
el.appendChild(child);
}
return el;
}
}
});
const el = dom.div({},
'Hello, my name is ',
dom.a({href: '//example.com'}, 'Mark'), '. I like:',
dom.ul({},
dom.li({}, 'The web'),
dom.li({}, 'Food'),
dom.li({}, '…actually that\'s it') )
);
document.body.appendChild(el);
Set用法
set方法用来拦截某个属性的赋值操作。
let validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
if('young'===value){
value=18;
}else{
throw new TypeError('The age is not an integer');
}
}
if (value > 200) {
throw new RangeError('The age seems invalid');
}
}
// 对于age以外的属性，直接保存
obj[prop] = value;
}
};
let person = new Proxy({}, validator);
person.age = 100;
person.age // 100
person.age = 'young'
person.age // 18
person.age = 'old' // 报错
person.age = 300 // 报错
利用set方法，还可以数据绑定，即每当对象发生变化时，会自动更新DOM。有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用
apply
拦截函数的调用、call和apply操作。
var twice = {
apply (target, ctx, args) {
return Reflect.apply(...arguments) * 2; }
};
function sum (left, right) {
return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30
has
用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符
let stu1 = {name: '张三', score: 59};
let stu2 = {name: '李四', score: 99};
let handler = {
has(target, prop) {
if (prop === 'score' && target[prop] < 60) {
console.log(`${target.name} 不及格`);
return false;
}
return prop in target;
}
}
let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);
'score' in oproxy1
// 张三 不及格
// false
'score' in oproxy2
// true
for (let a in oproxy1) {
console.log(oproxy1[a]);
}
// 张三
// 59
for (let b in oproxy2) {
console.log(oproxy2[b]);
}
// 李四
// 99
has方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has方法不判断一个属性是对象自身的属性，还是继承的属性has拦截只对in循环生效，对for...in循环不生效
construct
方法用于拦截new命令
var p = new Proxy(function() {}, {
construct: function(target, args) {
console.log('called: ' + args.join(', ')
);
return { value: args[0] * 10 };
}
});
new p(1).value
// "called: 1"
// 10
deleteProperty
deleteProperty方法用于拦截delete操作，如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除。
ddefineProperty
defineProperty方法拦截了Object.defineProperty操作,如果方法返回false，导致添加新属性会抛出错误，如：proxy.foo = 'bar' 会报错
getPrototypeOf()
法主要用来拦截Object.getPrototypeOf()运算符，以及其他一些操作。
- Object.prototype.proto
- Object.prototype.isPrototypeOf()
- Object.getPrototypeOf()
- Reflect.getPrototypeOf()
- instanceof运算符
var proto = {};
var p = new Proxy({}, {
getPrototypeOf(target) {
return proto;
}
});
Object.getPrototypeOf(p) === proto // true
ownKeys()
ownKeys方法用来拦截Object.keys()操作。
setPrototypeOf()
setPrototypeOf方法主要用来拦截Object.setPrototypeOf方法。
Proxy.revocable()
Proxy.revocable方法返回一个可取消的Proxy实例。
let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke();
proxy.foo // TypeError: Revoked
Proxy.revocable方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例。上面代码中，当执行revoke函数之后，再访问Proxy实例，就会抛出一个错误。
Reflect概述
Reflect对象与Proxy对象一样，也是ES6为了操作对象而提供的新API。Reflect对象的设计目的有这样几个。
（1） 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。
（2） 修改某些Object方法的返回结果，让其变得更合理。比如Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
（3） 让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
（4）Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。
var loggedObj = new Proxy(obj, {
get(target, name) {
console.log('get', target, name);
return Reflect.get(target, name);
},
deleteProperty(target, name) {
console.log('delete' + name);
return Reflect.deleteProperty(target, name);
},
has(target, name) {
console.log('has' + name);
return Reflect.has(target, name);
}
});
网友评论