Object.defineProperty или Proxy могут захватывать объекты До Vue 3.0 реактивная обработка выполнялась с использованием Object.definProperty, а 3.0 превратилась в прокси. Далее давайте рассмотрим преимущества прокси.
Учащиеся, не знакомые с Object.defineProperty, могут нажать здесь
Параметры прокси
целевой целевой объект (объект, массив, функция) прокси-объект обработчика, который может выполнять пользовательские операции над целевым объектом
Основное использование прокси
handler.apply() используется для перехвата вызовов функций
const p2 = new Proxy((a, b) => {
return a + b
}, {
apply(target, thisArg, argus) {
// 将结果返回出去
return target.apply(thisArg, argus)
}
})
// p2(1, 2) 实际上调用的是 handler.apply 方法
// 只有目标对象是函数的时候 才会主动触发 handler.apply
console.log(p2(1, 2))
Метод handler.construct() используется для перехвата нового оператора
должен вернуть объект
const p3 = new Proxy(function Person(name) {
this.name = name
}, {
construct(target, argus, newTarget) {
console.log(newTarget === p3)
return new target(...argus)
}
})
console.log(new p3('Tom'))
handler.defineProperty() используется для перехвата операций Object.defineProperty() над объектами.
Он должен вернуть логическое значение, указывающее, была ли операция успешной
const obj2 = {
a: 1,
b: 2
}
const p4 = new Proxy(obj2, {
defineProperty(target, property, descriptor) {
return Object.defineProperty(...arguments)
}
})
Object.defineProperty(p4, 'a', {
value: 'a'
})
console.log(obj2)
Метод handler.deleteProperty() используется для перехвата операций удаления свойств объекта.
Должен возвращать логическое значение, указывающее, была ли операция успешной или нет.
const p5 = new Proxy({
a: 1,
b: 2
}, {
deleteProperty(target, property) {
delete target[property]
return true
}
})
delete p5.a
console.log(p5)
Метод handler.get() используется для перехвата операции чтения свойства объекта.
const p6 = new Proxy({
a: 1,
b: 2
}, {
get(target, property, receiver) {
console.log(receiver === p6)
return target[property]
}
})
console.log(p6.a)
Метод handler.getOwnPropertyDescriptor() является обработчиком Object.getOwnPropertyDescriptor().
Должен возвращать объект или undefined
const obj1 = {}
Object.defineProperty(obj1, 'a', {
value: 1,
configurable: true
})
const p7 = new Proxy(obj1, {
getOwnPropertyDescriptor(target, property) {
return Object.getOwnPropertyDescriptor(...arguments)
}
})
console.log(Object.getOwnPropertyDescriptor(p7, 'a'))
handler.getPrototypeOf() — это прокси-метод, который вызывается при чтении прототипа прокси-объекта.
const p8 = new Proxy({
a: 1,
b: 2
}, {
getPrototypeOf(target) {
return function Person() {}
}
})
console.log(Object.getPrototypeOf(p8))
Метод handler.has() является прокси-методом для оператора in.
Должен возвращать логическое значение, указывающее, существует ли он
const p9 = new Proxy({
a: 1,
b: 2
}, {
has(target, property) {
// return false
return property in target
}
})
console.log('a' in p9)
Метод handler.isExtensible() используется для перехвата Object.isExtensible() объекта.
Метод Object.isExtensible() определяет, является ли объект расширяемым (можно ли добавить к нему новые свойства).
const p10 = new Proxy(Object.freeze({
a: 1,
b: 2
}), {
isExtensible(target) {
return Object.isExtensible(target)
}
})
console.log(Object.isExtensible(p10))
Метод handler.ownKeys() используется для перехвата Reflect.ownKeys().
const sy = Symbol('secret')
const p11 = new Proxy({
a: 1,
[sy]: 'I am scared!',
b: 2
}, {
ownKeys(target) {
console.log('isExtensible')
return Object.keys(target)
// return Reflect.ownKeys(target)
// return Object.getOwnPropertyNames(target)
// return Object.getOwnPropertySymbols(target)
}
})
console.log(Object.getOwnPropertyNames(p11))
Метод handler.preventExtensions() используется для установки перехвата Object.preventExtensions().
возвращает логическое значение Метод Object.preventExtensions() делает объект нерасширяемым, что означает невозможность добавления новых свойств.
const p12 = new Proxy({
a: 1,
b: 2
}, {
preventExtensions(target) {
target.c = 'c'
Object.preventExtensions(target)
target.d = 'd'
return true
}
})
console.log(Object.preventExtensions(p12))
Метод handler.set() является перехватчиком действий по установке значения свойства.
const p13 = new Proxy({
a: 1,
b: 2,
_c: 3
}, {
set(target, property, value) {
console.log('oldVlu: ' + target[property])
if (property[0] === '_') return console.log('私有属性不能修改')
target[property] = value
return true
}
})
p13.a = 'a'
p13._c = 'c'
console.log(p13)
Метод handler.setPrototypeOf() в основном используется для перехвата Object.setPrototypeOf().
const p14 = new Proxy({
a: 1,
b: 2,
_c: 3
}, {
setPrototypeOf(target, prototype) {
Object.setPrototypeOf(...arguments)
return true
}
})
Object.setPrototypeOf(p14, function Person() {})
console.log(p14.__proto__)
Прокси имеет в общей сложности 13 способов захвата объектов, что является более избирательным, чем Object.definProperty.
Реактивная обработка объектов прокси
const log = console.log.bind(window)
const _target = {
id: 1,
name: 'Tom',
friends: [
{
id: 2,
name: 'Skill'
},
{
id: 3,
name: 'Gree'
}
],
like: {
movie: true,
running: true,
volleyball: false
}
}
const handler = {
get(target, property, receiver) {
log(`get ${property} attr`)
//log(target[property])
const value = target[property]
// 当属性的值是对象类型的时候，需要将其转换成 Proxy
// __isProxy__ 判断当前对象 是不是 Proxy 对象
if (!value.__isProxy__) {
if (typeof value === 'object' && typeof value !== null) {
Object.defineProperty(value, '__isProxy__', {
value: true,
writable: false,
enumerable: false
})
Reflect.set(receiver, property, new Proxy(target[property], handler))
}
}
return Reflect.get(...arguments)
// return target[property]
},
set(target, property, value) {
log(`set ${property} attr`)
log(value)
Reflect.set(...arguments)
return true
// target[property] = value
}
}
const target = new Proxy(_target, handler)
log(target.id)
log(target.friends[0].name)
log(target.like.movie)
target.age = 23
target.like.movie = false
target.friends.push({ name: 'Owen', id: 4 })
log(target.friends[2])
log(target)
Прокси против Object.defineProperty
преимущество:
- Нет необходимости рекурсивно проходить каждое свойство, добавлять перехват, свойства глубокого объекта преобразуются в прокси только при доступе
- Для вновь добавленных свойств не требуется дополнительной обработки захвата.
- Нет необходимости переопределять методы массива
недостаток:не совместимы, т.е.
Рекомендация блога
- vue 3.0 - первый опыт
- Картинка для понимания прототипа, объекта-прототипа, цепочки прототипов
- Принципы обещания = построить обещание от 0 до 1
[Заметки непростые, если они вам полезны, ставьте лайк, спасибо]