前言：
vue 3.o据说已经将Object.defineProperty换成了proxy
为什么要换呢？
优势如下:
- 我们可以看到,Proxy直接可以劫持整个对象,并返回一个新对象,不管是操作便利程度还是底层功能上都远强于Object.defineProperty。
- Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性实现响应式。
- 当我们对数组进行操作(push、shift、splice等)时，会触发对应的方法名称和length的变化，我们可以借此进行操作,Object.defineProperty无法生效,更多参考
除此之外数组本身也还有一个问题，可以看一个例子
arr = [1,2,3,4]
arr[4] = 5 // 5
arr.length // 5
arr.length = 1
arr[1] // undefind
数组的length发生变化，项会发生变化有些项不存在了，项的变化也会让length变化,(数组被成为是奇异对象)，现在es6中也其他对象也可以实现这种行为。
我们的主角登场:代理和发射。
代理
定义：
对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）
简单来说：进行一些操作先得经过这一层
例子：
let p = new Proxy(target, handler);
target
用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理），存储作用。
handler
一个对象，其属性是当执行一个操作时定义代理的行为的函数。
包含陷阱（traps）的占位符对象，
traps: 提供属性访问的方法。这类似于操作系统中陷阱的概念。
反射
反射api以Reflect对象的形式出现，对象中方法的默认特性与相同的底层操作一致，而代理可以覆盖这些操作。
一个简单的代理：
let target = {}
p = new Proxy(target, {})
p.name = 'zlj'
p.name // "zlj"
target.name // "zlj"
target.name = '张大彪'
p.name // "张大彪"
target.name // "张大彪"
上面的例子：代理只是简单地将操作转发给目标。
（先不纠结具体语法：）
1 使用set陷阱验证属性
target ={}
p = new Proxy(target, {
set(trapTarget, key, value, receiver) {
// console.log(trapTarget, key, value, receiver)
// trapTarget就是target, receiver 就是p
if(!trapTarget.hasOwnProperty(key)) {
if(({}).toString.call(value)!=='[object Number]') {
throw new TypeError('属性必须是数字')
}
//添加属性
return Reflect.set(trapTarget, key, value, receiver)
}
}
})
数组特性就可以用set陷阱实现
2 使用get陷阱
js对象里面有一个十分诡异现象:
obj = {}
obj.xxx // undefind
其实xxx属性是不存在的，当然你可以用Object.defineProperty定义该属性的get方法，但是这个方法得一个一个的列举出来，类似于事件绑定在li上，我增加，你又得重新绑了，那能不能类似于事件代理一样呢，把事件绑在ul元素上?proxy的get陷阱轻松实现：
var proxy = new Proxy({}, {
get (target, key, receiver) {
if (!(key in receiver)) {
throw new TypeError(key + '：不存在 )
}
return Reflect.get(target, key, receiver)
}
})
proxy.name = 'xxx'
proxy.age // 报错
proxy.name = 'xxx' // "xxx"
3 has 陷阱
先看一个例子：
var target = {
name: 'zlj'
}
'name' in target // true
'toString' in target // true
toString方法继承自Object.prototype
可以使用Proxy的has陷阱：
target = {name: "zlj", age: 27}
p = new Proxy(target, {
has (target, key) {
if (key === 'name') return false // 可以改变部分
if (target.hasOwnProperty(key)) {
return Reflect.has(target, key) // 返回in操作符的默认行为
}
}
})
'name' in p // false
'age' in p // true
'toString' in p // false
4 删除陷阱
看个例子：
var target = {
name: 'zlj'
}
Object.defineProperty(target, 'name', {configurable: false})
delete target.name // false
// 尝试删除一个不能删除的属性仅仅返回false
target.age =27
delete target.age // true
target.age // undefined
'use strict'
delete target.name
// 在严格模式下，尝试删除会报错
proxy也有删除陷阱
target = {
name: 'zlj',
age:27
}
p = new Proxy(target, {
deleteProperty(target, key) {
if (key === 'name') {
return false
} else {
// 与delete的默认行为一致
return Reflect.deleteProperty(target, key)
}
}
})
delete p.name // false
delete p.age // true
5 原型代理陷阱
es5中有Object.getPrototypeOf(obj)方法
该方法返回指定对象的原型（内部[[Prototype]]属性的值）
es6中新增了Object.setPrototypeOf()
该方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或
null。
obj = {age: 17}
Object.getPrototypeOf(obj).constructor
ƒ Object() { [native code] }
Object.setPrototypeOf(obj, Array).constructor
Object.getPrototypeOf(obj)
ƒ Array() { [native code] } // 原型已经变成了Array
obj.toString() // 报错
proxy也有代理陷阱
p = new Proxy(target, {
getPrototypeOf(target) {
console.log(target, 111)
//Reflect.getPrototypeOf方法返回默认行为
return null
},
setPrototypeOf (target, proto) {
return false
// Reflect.setPrototypeOf返回默认行为
}
})
targetProto = Object.getPrototypeOf(target)
pProto = Object.getPrototypeOf(p) // null
Object.setPrototypeOf(pProto, null) // 报错
Object.setPrototypeOf(pProto, Array) // 报错
差异:
Object.getPrototypeOf(1) // Number 会做类型转换
Object.getPrototypeOf('1') // String 会做类型转换
Reflect.getPrototypeOf(1) // 报错 不会转换
Reflect.getPrototypeOf('1') // 报错 不会转换
Object.setPrototypeOf(obj1, obj2) // 返回obj1
Reflect.setPrototypeOf(obj1, obj2) // 返回true or false
因为object.getPrototypeOf和setPrototypeOf方法是给使用者使用的，Reflect则是改变了语言内部行为反馈。
6 对象可扩展性陷阱：
可扩展性：方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。
看一个例子：
obj = {}
p = new Proxy(obj, {
isExtensible (target) {
return Reflect.isExtensible(target) // 与默认行为一致
},
preventExtensible (target) {
return Reflect.preventExtensions(target) // 与默认行为一致，false表示不能操作
}
})
Object.isExtensible(p) // true
Object.isExtensible(obj) // true
p.name = 'xxx'
p // Proxy {name: "xxx"}
Object.preventExtensions(obj)
obj.age = 1
obj // {name: "xxx"}
Object.isExtensible(obj) // false
Object.isExtensible(p) // false
7 属性描述符陷阱：
描述符：Object.defineProperty(obj, key, decription)
一个默认例子：
obj = {name: 'xxx'}
p = new Proxy(obj, {
defineProperty (target, key, option) {
return Reflect.defineProperty(target, key, option)
},
getOwnPropertyDescriptor(target, key) {
return Reflect.getOwnPropertyDescriptor(target, key)
}
})
Object.defineProperty(p, 'props', {
value:{}
})
p.props // {}
Object.getOwnPropertyDescriptor(p, 'props')// {value: {…}, writable: false, enumerable: false, configurable: false}
添加限制：
obj = {name: 'xxx'}
xxx = Symbol(1)
p = new Proxy(obj, {
defineProperty (target, key, option) {
if (typeof key === 'symbol') {
return true // return false会报错, return true不报错，但是实际没有执行
}
// 调用该方法才算执行了defineProperty方法
return Reflect.defineProperty(target, key, option)
},
getOwnPropertyDescriptor(target, key) {
return {
name: xxx
}
// return Reflect.getOwnPropertyDescriptor(target, key)
}
})
// Proxy {name: "xxx"}
Object.defineProperty(p, xxx, {
value: 1
})
p // Proxy {name: "xxx"}没有新增成功
Object.defineProperty与Reflect.defineProperty区别：
前者返回你操作的对象，后者返回操作成功(true)或失败(false)。
8 ownKeys陷阱
看一个例子：
obj = {name: 'xxx'}
p = new Proxy(obj, {
ownKeys (target) {
// 需要返回一个数组或类数组
return Reflect.ownKeys(target).filter(key => key[0] !== '_')
}
})
p.age = 99
Proxy {name: "xxx", age: 99}
p._isRoot = false
p // Proxy {name: "xxx", age: 99, _isRoot: false}
Object.keys(p) // ["name", "age"] // 过滤_xxx属性
obj // {name: "xxx", age: 99, _isRoot: false}
Object.keys(obj) // ["name", "age", "_isRoot"]
// for也是一样被过滤掉了
for(let key in p ){
console.log(key)
}
name
age
for(let key in obj ){
console.log(key)
}
name
age
_isRoot
9 函数代理中apply和constructor陷阱
我们知道：js中函数，直接调用时，执行的是[[call]]方法，new关键字调用执行的是construtor方法。apply陷阱和constructor陷阱可以覆写这些内部方法。
看一个例子：
name = 'zlj'
target = function () {return this.name}
p = new Proxy(target, {
apply (fn, context, argument) {
// 做你想做的事情
console.log(fn, context, argument)
return Reflect.apply(fn, context, argument)
},
construct (fn, options) {
console.log(fn, options)
return Reflect.construct(fn, options)
}
})
typeof p // "function"
p(1,2) // ƒ () {return this.name} undefined (2) [1, 2]
"zlj"
a = new p(1,2,3) // ƒ () {return this.name} (3) [1, 2, 3]
target {}
不使用new调用构造函数：
function foods (...options) {
if (new.target === undefined) {
throw new TypeError('must new')
}
this.values = options
}
summer = new foods('apple', 'orange')
winter = foods('pea', 'www') // 报错
// 可内部修改调用方式
p = new Proxy(foods, {
apply (target, context, argument) {
return Reflect.construct(target, argument)
}
})
spring = p('pea', 'apple') // foods {values: Array(2)}
