es6 javascript的Proxy 实例的方法

1 get()

get方法用于拦截某个属性的读取操作。 上文已经有一个例子, 下面是另一个拦截读取操作的例子。

var person = {
	name: " 张三 "
};
var proxy = new Proxy(person, {
	get: function(target, property) {
		if(property in target) {
			return target[property];
		} else {
			throw new ReferenceError("Property \"" + property + "\" does not exist.");
		}
	}
});
proxy.name // " 张三 "
proxy.age //  抛出一个错误
上面代码表示, 如果访问目标对象不存在的属性, 会抛出一个错误。 如果没有这个拦截函数, 访问不存在的属性, 只会返回undefined。
get方法可以继承。

let proto = new Proxy({}, {
	get(target, propertyKey, receiver) {
		console.log('GET ' + propertyKey);
		return target[propertyKey];
	}
});
let obj = Object.create(proto);
obj.xxx // "GET xxx"
上面代码中, 拦截操作定义在 Prototype 对象上面, 所以如果读取obj对象继承的属性时, 拦截会生效。
下面的例子使用get拦截, 实现数组读取负数的索引。

function createArray(...elements) {
	let handler = {
		get(target, propKey, receiver) {
			let index = Number(propKey);
			if(index < 0) {
				propKey = String(target.length + index);
			}
			return Reflect.get(target, propKey, receiver);
		}
	};
	let target = [];
	target.push(...elements);
	return new Proxy(target, handler);
}
let arr = createArray('a', 'b', 'c');
arr[-1] // c
上面代码中, 数组的位置参数是 - 1, 就会输出数组的倒数最后一个成员。
利用 Proxy, 可以将读取属性的操作( get), 转变为执行某个函数, 从而实现属性的链式操作。

var pipe = (function() {
	return function(value) {
		var funcStack = [];
		var oproxy = new Proxy({}, {
			get: function(pipeObject, fnName) {
				if(fnName === 'get') {
					return funcStack.reduce(function(val, fn) {
						return 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
上面代码设置 Proxy 以后, 达到了将函数名链式使用的效果。
下面的例子则是利用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);

2 set()

set方法用来拦截某个属性的赋值操作。
假定Person对象有一个age属性, 该属性应该是一个不大于 200 的整数, 那么可以使用Proxy保证age的属性值符合要求。

let validator = {
	set: function(obj, prop, value) {
		if(prop === 'age') {
			if(!Number.isInteger(value)) {
				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 = 300 //  报错
上面代码中, 由于设置了存值函数set, 任何不符合要求的age属性赋值, 都会抛出一个错误。 利用set方法, 还可以数据绑定, 即每当对象发生变化时, 会自动更新 DOM。
有时, 我们会在对象上面设置内部属性, 属性名的第一个字符使用下划线开头, 表示这些属性不应该被外部使用。 结合get和set方法, 就可以做到防止这些内部属性被外部读写。

var handler = {
	get(target, key) {
		invariant(key, 'get');
		return target[key];
	},
	set(target, key, value) {
		invariant(key, 'set');
		return true;
	}
};

function invariant(key, action) {
	if(key[0] === '_') {
		throw new Error(`Invalid attempt to ${action} private "${key}" property`);
	}
}
var target = {};
var proxy = new Proxy(target, handler);
proxy._prop
	// Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c'
	// Error: Invalid attempt to set private "_prop" property
	// Error: Invalid attempt to set private "_prop" property
上面代码中, 只要读写的属性名的第一个字符是下划线, 一律抛错, 从而达到禁止读写内部属性的目的。


3 apply()

apply方法拦截函数的调用、 call 和 apply 操作。

var handler = {
	apply(target, ctx, args) {
		return Reflect.apply(...arguments);
	}
};
apply方法可以接受三个参数, 分别是目标对象、 目标对象的上下文对象( this) 和目标对象的参数数组。
下面是一个例子。

var target = function() {
	return 'I am the target';
};
var handler = {
	apply: function() {
		return 'I am the proxy';
	}
};
var p = new Proxy(target, handler);
p()
	// "I am the proxy"
上面代码中, 变量p是 Proxy 的实例, 当它作为函数调用时( p()), 就会被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
上面代码中, 每当执行proxy函数( 直接调用或call和apply调用), 就会被apply方法拦截。
另外, 直接调用Reflect.apply方法, 也会被拦截。

Reflect.apply(proxy, null, [9, 10]) // 38


4 has()

has方法用来拦截HasProperty操作, 即判断对象是否具有某个属性时, 这个方法会生效。 典型的操作就是in运算符。
下面的例子使用has方法隐藏某些属性, 不被in运算符发现。

var handler = {
	has(target, key) {
		if(key[0] === '_') {
			return false;
		}
		return key in target;
	}
};
var target = {
	_prop: 'foo',
	prop: 'foo'
};
var proxy = new Proxy(target, handler);
'_prop' in proxy // false
上面代码中, 如果原对象的属性名的第一个字符是下划线, proxy.has就会返回false, 从而不会被in运算符发现。
如果原对象不可配置或者禁止扩展, 这时has拦截会报错。

var obj = {
	a: 10
};
Object.preventExtensions(obj);
var p = new Proxy(obj, {
	has: function(target, prop) {
		return false;
	}
});
'a' in p // TypeError is thrown
上面代码中, obj对象禁止扩展, 结果使用has拦截就会报错。
值得注意的是, has方法拦截的是HasProperty操作, 而不是HasOwnProperty操作, 即has方法不判断一个属性是对象自身的属性, 还是继承的属性。
由于for...in操作内部也会用到HasProperty操作, 所以has方法在for...in循环时也会生效。

let stu1 = {
	name: 'Owen',
	score: 59
};
let stu2 = {
	name: 'Mark',
	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);
for(let a in oproxy1) {
	console.log(oproxy1[a]);
}
// Owen
// Owen  不及格
for(let b in oproxy2) {
	console.log(oproxy2[b]);
}
// Mark
// Mark 99
上面代码中,for...in循环时, has拦截会生效, 导致不符合要求的属性被排除在for...in循环之外。


5 construct()

construct方法用于拦截new命令, 下面是拦截对象的写法。

var handler = {
	construct(target, args, newTarget) {
		return new target(...args);
	}
};
construct方法可以接受两个参数。
target: 目标对象
args: 构建函数的参数对象
下面是一个例子。

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
construct方法返回的必须是一个对象, 否则会报错。
var p = new Proxy(function() {}, {
	construct: function(target, argumentsList) {
		return 1;
	}
});
new p() //  报错

6 deleteProperty()

var handler = {
	deleteProperty(target, key) {
		invariant(key, 'delete');
		return true;
	}
};

function invariant(key, action) {
	if(key[0] === '_') {
		throw new Error(`Invalid attempt to ${action} private "${key}" property`);
	}
}
var target = {
	_prop: 'foo'
};
var proxy = new Proxy(target, handler);
delete proxy._prop
	// Error: Invalid attempt to delete private "_prop" property
上面代码中, deleteProperty方法拦截了delete操作符, 删除第一个字符为下划线的属性会报错。


7 defineProperty()

defineProperty方法拦截了Object.defineProperty操作。

var handler = {
	defineProperty(target, key, descriptor) {
		return false;
	}
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar'
	// TypeError: proxy defineProperty handler returned false for property '"foo"'
上面代码中, defineProperty方法返回false, 导致添加新属性会抛出错误。


8 getOwnPropertyDescriptor()

getOwnPropertyDescriptor方法拦截Object.getOwnPropertyDescriptor, 返回一个属性描述对象或者undefined。

var handler = {
	getOwnPropertyDescriptor(target, key) {
		if(key[0] === '_') {
			return;
		}
		return Object.getOwnPropertyDescriptor(target, key);
	}
};
var target = {
	_foo: 'bar',
	baz: 'tar'
};
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'wat')
	// undefined
Object.getOwnPropertyDescriptor(proxy, '_foo')
	// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
	// { value: 'tar', writable: true, enumerable: true, configurable: true }
上面代码中, handler.getOwnPropertyDescriptor方法对于第一个字符为下划线的属性名会返回undefined。


9 getPrototypeOf()

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
上面代码中, getPrototypeOf方法拦截Object.getPrototypeOf(), 返回proto对象。


10 isExtensible()

isExtensible方法拦截Object.isExtensible操作。

var p = new Proxy({}, {
	isExtensible: function(target) {
		console.log("called");
		return true;
	}
});
Object.isExtensible(p)
	// "called"
	// true
上面代码设置了isExtensible方法, 在调用Object.isExtensible时会输出called。
这个方法有一个强限制, 如果不能满足下面的条件, 就会抛出错误。

Object.isExtensible(proxy) === Object.isExtensible(target)
//下面是一个例子。
var p = new Proxy({}, {
	isExtensible: function(target) {
		return false;
	}
});
Object.isExtensible(p) //  报错


11 ownKeys()

ownKeys方法用来拦截Object.keys() 操作。

let target = {};
let handler = {
	ownKeys(target) {
		return ['hello', 'world'];
	}
};
let proxy = new Proxy(target, handler);
Object.keys(proxy)
	// [ 'hello', 'world' ]
上面代码拦截了对于target对象的Object.keys() 操作, 返回预先设定的数组。
下面的例子是拦截第一个字符为下划线的属性名。

let target = {
	_bar: 'foo',
	_prop: 'bar',
	prop: 'baz'
};
let handler = {
	ownKeys(target) {
		return Reflect.ownKeys(target).filter(key => key[0] !== '_');
	}
};
let proxy = new Proxy(target, handler);
for(let key of Object.keys(proxy)) {
	console.log(target[key]);
}
// "baz"

12 preventExtensions()

preventExtensions方法拦截Object.preventExtensions()。 该方法必须返回一个布尔值。
这个方法有一个限制, 只有当Object.isExtensible(proxy) 为false( 即不可扩展) 时, proxy.preventExtensions才能返回true, 否则会报错。

var p = new Proxy({}, {
	preventExtensions: function(target) {
		return true;
	}
});
Object.preventExtensions(p) //  报错
上面代码中, proxy.preventExtensions方法返回true, 但这时Object.isExtensible(proxy) 会返回true, 因此报错。
为了防止出现这个问题, 通常要在proxy.preventExtensions方法里面, 调用一次Object.preventExtensions。

var p = new Proxy({}, {
	preventExtensions: function(target) {
		console.log("called");
		Object.preventExtensions(target);
		return true;
	}
});
Object.preventExtensions(p)
	// "called"
	// true


13 setPrototypeOf()

setPrototypeOf方法主要用来拦截Object.setPrototypeOf方法。
下面是一个例子。

var handler = {
	setPrototypeOf(target, proto) {
		throw new Error('Changing the prototype is forbidden');
	}
};
var proto = {};
var target = function() {};
var proxy = new Proxy(target, handler);
proxy.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden
上面代码中, 只要修改target的原型对象, 就会报错。


©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值