监听对象的操作
在之前我们已将讲过一种方式（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
