监听对象的操作
在之前我们已将讲过一种方式(Object.defineProperty)通过它的存取属性描述符,我们就可以实现对对象属性的监听。
const obj = {
name: 'xt',
age: 18
}
Object.keys(obj).forEach(key => {
let val = obj[key]
Object.defineProperty(obj, key, {
get: function() {
console.log(`监听到获取${key}`);
return val
},
set: function(newVal) {
console.log(`监听到设置${key}`);
val = newVal
}
})
})
// 触发getter
console.log(obj.name); // 监听到获取name xt
console.log(obj.age); // 监听到获取age 18
// 触发setter
obj.name = 'xt' // 监听到设置name
obj.name = '20' // 监听到设置age
我们都知道vue2中实现响应式就是采用的Object.defineProperty,在vue3中是采用的Proxy,这是为什么呢?而且既然有了Object.defineProperty又为什么要在es6中推出Proxy呢?我们来看看Object.defineProperty的缺点:
- Object.defineProperty设计的初衷,不是为了去监听截止一个对象中所有的属性的。
- 对新增、删除等属性是无能为力的
Proxy
Proxy:ES6中,新增了一个Proxy类,用于帮助我们创建一个代理。也就是说:
- 如果我们希望监听一个对象的相关操作,那么我们可以先创建一个代理对象(Proxy对象)。
- 对该对象的所有操作,都通过代理对象来完成,代理对象可以监听我们想要对原对象进行哪些操作
Proxy的基本使用
const obj = {
name: 'xt',
age: 18,
address: {
addr: '111'
}
}
// 第二个参数是捕获器对象
const objProxy = new Proxy(obj, {})
objProxy.name = 'haha'
objProxy.address.addr = '22'
// 当修改了objProxy的属性值, obj对象也会修改
console.log(obj); // { name: 'haha', age: 18, address: { addr: '22' } }
console.log(objProxy); // { name: 'haha', age: 18, address: { addr: '22' } }
Proxy的set和get捕获器
我们上面说过,new Proxy的第二个参数,是捕获器对象,接下来我们看看怎么用
const obj = {
name: 'xt',
age: 18
}
const objProxy = new Proxy(obj, {
// receiver 调用的代理对象
get: function(target, key, receiver) {
console.log('get捕获器', key);
console.log(receiver); // { name: 'haha', age: 18 }
return target[key]
},
set: function(target, key, value, receiver) {
console.log('set捕获器', key);
console.log(receiver); // { name: 'xt', age: 18 }
target[key] = value
console.log(receiver); // { name: 'haha', age: 18 }
}
})
objProxy.name = 'haha' // set捕获器 name
console.log(objProxy.name); // get捕获器 name haha
set和get分别对应的是函数类型
-
get函数有三个参数
1.1 target:目标对象(侦听的对象)
1.2 property:被获取的属性key
1.3 receiver:调用的代理对象 -
set函数有四个参数
2.1 target:目标对象(侦听的对象)
2.2 property:将被设置的属性key
2.3 value:新属性值
2.4 receiver:调用的代理对象
Proxy所有捕获器
- handler.getPrototypeOf():Object.getPrototypeOf 方法的捕捉器。
- handler.setPrototypeOf():Object.setPrototypeOf 方法的捕捉器。
- handler.isExtensible():Object.isExtensible 方法的捕捉器
- handler.preventExtensions():Object.preventExtensions 方法的捕捉器。
- handler.getOwnPropertyDescriptor():Object.getOwnPropertyDescriptor 方法的捕捉器
- handler.defineProperty():Object.defineProperty 方法的捕捉器。
- handler.ownKeys(): Object.getOwnPropertyNames 方法和
Object.getOwnPropertySymbols 方法的捕捉器 - handler.has():in 操作符的捕捉器
- handler.get():属性读取操作的捕捉器
- handler.set(): 属性设置操作的捕捉器
- handler.deleteProperty():delete 操作符的捕捉器
- handler.apply():函数调用操作的捕捉器
- handler.construct():new 操作符的捕捉器
Reflect
Reflect也是ES6新增的一个API,它是一个对象,字面的意思是反射。
作用:提供了很多操作JavaScript对象的方法,有点像Object中操作对象的方法。
Reflect的常见方法
- Reflect.getPrototypeOf(target):类似于Object.getPrototypeOf()
- Reflect.setPrototypeOf(target, prototype):设置对象原型的函数. 返回一个 Boolean, 如果更新成功,则返回true
- Reflect.isExtensible(target):类似于 Object.isExtensible()
- Reflect.preventExtensions(target):类似于 Object.preventExtensions()。返回一个Boolean。
- Reflect.getOwnPropertyDescriptor(target, propertyKey):类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性,则返回对应的属性描述符, 否则返回 undefined
- Reflect.defineProperty(target, propertyKey, attributes): Object.defineProperty() 类似。如果设置成功就会返回 true
- Reflect.ownKeys(target):返回一个包含所有自身属性(不包含继承属性)的数组。(类似于Object.keys(), 但不会受enumerable影响).
- Reflect.has(target, propertyKey):判断一个对象是否存在某个属性,和 in 运算符 的功能完全相同
- Reflect.get(target, propertyKey[, receiver]):获取对象身上某个属性的值,类似于 target[name]。
- Reflect.set(target, propertyKey, value[, receiver]):将值分配给属性的函数。返回一个Boolean,如果更新成功,则返回true。
- Reflect.deleteProperty(target, propertyKey):作为函数的delete操作符,相当于执行 delete target[name]。
- Reflect.apply(target, thisArgument, argumentsList):对一个函数进行调用操作,同时可以传入一个数组作为调用参数。和Function.prototype.apply() 功能类似
- Reflect.construct(target, argumentsList[, newTarget]):对构造函数进行 new 操作,相当于执行 new target(…args)。
Reflect的使用
const obj = {
name: 'xt',
age: 18
}
const objProxy = new Proxy(obj, {
get: function(target, key, receiver) {
console.log('get捕获器', key);
return Reflect.get(target, key, receiver)
},
set: function(target, key, value, receiver) {
console.log('set捕获器', key);
return Reflect.set(target, key, value, receiver)
},
has: function(target, key) {
return Reflect.has(target, key)
},
deleteProperty: function(target, key) {
return Reflect.deleteProperty(target, key)
}
})
objProxy.name = 'haha' // set捕获器 name
console.log(objProxy.name); // get捕获器 name haha