一、Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
- 代理
- 常用拦截方式
二、用法详解
1.声明方式
ES5中对属性进行拦截:
// ES5
let obj = {}
let newVal = ''
Object.defineProperty(obj, 'name', {
get(){
return newVal
},
set(val){
console.log('set')
// this.name = val //这种方式会循环调用,造成内存泄漏
newVal = val
}
})
obj.name = 'es'
console.log(obj.name)
// es
ES6的 Proxy(代理目标, {对目标的操作})
// proxy
let obj = {}
let p = new Proxy(obj, {})
obj.name = 'kaka'
console.log(obj.name) // kaka
for(let key in obj){
console.log(key) // name
}
2. get钩子函数
用于拦截对属性的访问操作
// get
let arr = [7, 8, 9]
arr = new Proxy(arr, { // 给arr数组加上代理拦截
get(target, prop) {
// console.log(target, prop)
// 判断传入的参数是否有对应的值在对象中
return prop in target ? target[prop] : 'error'
}
})
console.log(arr[1]) // 8, 即数组下标1的位置的值
console.log(arr[10]) // error
let dict = {
'hello': '你好',
'world': '世界'
}
dict = new Proxy(dict, {// 给字典对象加上代理拦截
get(target, prop) {
return prop in target ? target[prop] : prop
}
})
console.log(dict['world']) // 世界
console.log(dict['kaka']) // kaka
3. set钩子函数
用于拦截对属性的设置操作
// set
let arr = []
arr = new Proxy(arr, {
set(target, prop, val) {
if (typeof val === 'number') {
target[prop] = val
return true
} else {
return false
}
}
})
// proxy代理并不会影响对象原有的方法 它只是在中间加上一层拦截处理
arr.push(5)
arr.push(6)
console.log(arr[0], arr[1], arr.length)
// 5 6 2
4. has
判断传入的prop是否在对象中,返回布尔值
//has
// 定义一个范围
let range = {
start: 1,
end: 5
}
range = new Proxy(range, {
has(target, prop){
return prop >= target.start && prop <= target.end
}
})
console.log(2 in range) // true
console.log(9 in range) // false
5. ownKeys
用于对当前对象的循环遍历方法进行拦截操作
let obj = {
name: 'kaka',
[Symbol('es')]: 'es6'
}
// getOwnPropertyNames不会返回Symbol类型的键
console.log(Object.getOwnPropertyNames(obj)) //["name"]
// getOwnPropertyNames只会返回Symbol类型的键
console.log(Object.getOwnPropertySymbols(obj)) // [Symbol(es)]
// keys不会返回Symbol类型的键
console.log(Object.keys(obj)) //["name"]
// for...in不会返回Symbol类型的键
for(let key in obj){
console.log(key) //name
}
// ownKeys
let userinfo = {
username: 'kakaDorothy',
age: 20,
_password: '***' // 使用下划线,表示当前的属性是一个私有属性
}
userinfo = new Proxy(userinfo, {
ownKeys(target) {
return Object.keys(target).filter(key => !key.startsWith('_')) // 返回不以_开头的key
}
})
for (let key in userinfo) {
console.log(key) // username age
}
console.log(Object.keys(userinfo)) // username age
6. 基本方法综合应用
// 对于私有属性,设为不可访问不可操作
let user= {
name: 'kaka',
[Symbol('es')]: 'es6'
}
user = new Proxy(user, {
get(target, prop) {
if (prop.startsWith('_')) {
throw new Error('不可访问')
} else {
return target[prop]
}
},
set(target, prop, val) {
if (prop.startsWith('_')) {
throw new Error('不可访问')
} else {
target[prop] = val
// 对于set方法要返回Boolean的值
return true
}
},
// 删除操作 用于拦截delete方法
deleteProperty(target, prop) { // 拦截删除
if (prop.startsWith('_')) {
throw new Error('不可删除')
} else {
delete target[prop]
return true
}
},
ownKeys(target) {
return Object.keys(target).filter(key => !key.startsWith('_'))
}
})
console.log(user.age)
console.log(user._password)
user.age = 18
console.log(user.age)
try {
user._password = 'xxx'
} catch(e){
console.log(e.message) // 不可访问
}
// try {
// // delete user.age
// delete user._password
// } catch (e) {
// console.log(e.message) // 不可删除
// }
// console.log(user.age) // undefined
for(let key in user){
console.log(key) // name age
}
7.apply
用于拦截函数调用以及call、apply的操作
// 不确定参数个数的求和
let sum = (...args) => {
let num = 0
args.forEach(item => {
num += item
})
return num
}
sum = new Proxy(sum, {
//代理操作:目标, 目标上下文 , 目标对象参数数组
apply(target, ctx, args) {
return target(...args) * 2
}
})
console.log(sum(1, 2)) // 6
//call、apply都可以改变this指向
// 传入的目标对象为null,后面都为参数
console.log(sum.call(null, 1, 2, 3)) // 12
// apply的参数为一个数组
console.log(sum.apply(null, [1, 2, 3])) // 12
8. construct
用于拦截new命令
// construct -> new
let User = class {
constructor(name) {
this.name = name
}
}
User = new Proxy(User, {
//construct(目标函数,构造函数的参数列表,创建实例时new命令作用的构造函数)
construct(target, args, newTarget) {
console.log('construct')
// construct必须返回一个对象
return new target(...args)
}
})
console.log(new User('kaka')) // User {name: "kaka"}