ES6个人笔记记录——Proxy2

Proxy实例的方法

1.get

let person = {
	name: "wjy"
};

let proxy1 = new Proxy(person, {
	get: function(target, property) {
		if (property in target) {
			return target[property];
		} else {
			// throw new ReferenceError("Property " + property +" does not exist.");
			console.log("Property " + property + " does not exist.");
		}
	}
})

console.log(proxy1.name, proxy1.age);

get方法可以被继承

let proto = new Proxy({}, {
	get(target, propertyKey, receiver) {
		console.log("GET", propertyKey);
		return target[propertyKey]
	}
});

const {
	create
} = Object;
const {
	get
} = Reflect;
let obj1 = create(proto);
obj1.xxx;

使用get拦截实现数组读取负数索引

function createArray(...elements) {
	let handler = {
		get(target, propKey, receiver) {
			let index = Number(propKey);
			if (index < 0) {
				propKey = String(target.length + index);
			}
			return get(target, propKey, receiver);
		}
	};

	let target = [];
	target.push(...elements);
	return new Proxy(target, handler);
};

let arr1 = createArray('a', 'b', 'c');
let arr2 = ['a', 'b', 'c'];
console.log(arr1[-1], arr2[-1]);

利用Proxy，可以将读取属性的操作(get)转变为执行某个函数，从而实现属性的链式操作

let pipe = (function() {
	return function(value) {
		let funcStack = [];
		let oproxy = new Proxy({}, {
			get: function(pipeObject, fnName) {
				try {
					funcStack.push(window[fnName]);
					return oproxy;

				} catch {
					if (fnName === 'get') {
						return funcStack.reduce(function(val, fn) {
							return fn(val);
						}, value);
					}
				}
			}
		});

		return oproxy;
	}
}());

let double = n => n * 2;
let pow = n => n * n;
let reverseInt = n => n.toString().split("").reverse().join("") | 0;
// pipe(3).double.pow.reverseInt.get;

set()方法用来拦截某个属性的赋值操作

const {	isInteger } = Number;
let validator = {
	set: function(obj, prop, value) {
		if (prop === 'age') {
			if (isInteger(value)) {
				throw new Error("The age is not a integer");
			}
			if (value > 200) {
				throw new Error("The age invalid");
			}
			// 对于age以外的属性，直接保存
			obj[prop] = value;
		}
	}
};

let person1 = new Proxy({}, validator);
console.log(person1.age = 100);
// console.log(person1.age = 'young')