银川网站建设公司哪家不错,Php外贸网站建设新浪博客,做网站公司多少钱,有哪些网站教做吃的1. Proxy
1. 监听对象的变化
有一个对象#xff0c;我们希望监听这个对象中的属性被设置或获取的过程
我们可以通过 Object.defineProperty 来实现
const obj {name: why,age: 18,height: 1.88
}// 需求: 监听对象属性的所有操作
// 监听属性的操作
// 1.针对…1. Proxy
1. 监听对象的变化
有一个对象我们希望监听这个对象中的属性被设置或获取的过程
我们可以通过 Object.defineProperty 来实现
const obj {name: why,age: 18,height: 1.88
}// 需求: 监听对象属性的所有操作
// 监听属性的操作
// 1.针对一个属性
// let _name obj.name
// Object.defineProperty(obj, name, {
// set: function(newValue) {
// console.log(监听: 给name设置了新的值:, newValue)
// _name newValue
// },
// get: function() {
// console.log(监听: 获取name的值)
// return _name
// }
// })// 2.监听所有的属性: 遍历所有的属性, 对每一个属性使用defineProperty
Object.keys(obj).forEach(key {let value obj[key]Object.defineProperty(obj, key, {set: function (newValue) {console.log(监听: 给${key}设置了新的值:, newValue)value newValue},get: function () {console.log(监听: 获取${key}的值)return value}})
})// console.log(obj.name)
// obj.name kobe
console.log(obj.age)
obj.age 17
console.log(obj.age)2. Object.defineProperty 实现的缺点
1.首先Object.defineProperty设计的初衷不是为了去监听截止一个对象中所有的属性的
2.其次如果我们想监听更加丰富的操作比如新增属性、删除属性那么Object.defineProperty是无能为力的
所以我们需要使用到 Proxy 进行代理
3. Proxy代理的使用
在ES6中新增了一个Proxy类这个类从名字就可以看出来是用于帮助我们创建一个代理的也就是说如果我们希望监听一个对象的相关操作那么我们可以先创建一个代理对象Proxy对象之后对该对象的所有操作都通过代理对象来完成代理对象可以监听我们想要对原对象进行哪些操作
Proxy代理需要我们首先 new Proxy对象并且传入需要侦听的对象以及一个处理对象可以称之为handler
const p new Proxy(target, handler)其次我们之后的操作都是直接对Proxy的操作而不是原有的对象因为我们需要在handler里面进行侦听
如果我们想要侦听某些具体的操作那么就可以在handler中添加对应的捕捉器Trap const obj {name: why,age: 18,height: 1.88
}// 1.创建一个Proxy对象
const objProxy new Proxy(obj, {set: function(target, key, newValue) {console.log(监听: 监听${key}的设置值: , newValue)target[key] newValue},get: function(target, key) {console.log(监听: 监听${key}的获取)return target[key]}
})// 2.对obj的所有操作, 应该去操作objProxy
// console.log(objProxy.name)
// objProxy.name kobe
// console.log(objProxy.name)
// objProxy.name jamesobjProxy.address 广州市
console.log(objProxy.address)4. hander的监听捕获器 对常规对象属性的监听
const obj {name: why,age: 18,height: 1.88
}// 1.创建一个Proxy对象
const objProxy new Proxy(obj, {set: function(target, key, newValue) {console.log(监听: 监听${key}的设置值: , newValue)target[key] newValue},get: function(target, key) {console.log(监听: 监听${key}的获取)return target[key]},deleteProperty: function(target, key) {console.log(监听: 监听删除${key}属性)delete obj.name},has: function(target, key) {console.log(监听: 监听in判断 ${key}属性)return key in target}
})delete objProxy.nameconsole.log(age in objProxy)对函数对象的监听
function foo(num1, num2) {console.log(this, num1, num2)
}const fooProxy new Proxy(foo, {apply: function(target, thisArg, otherArgs) {console.log(监听执行了apply操作)target.apply(thisArg, otherArgs)},construct: function(target, otherArray) {console.log(监听执行了new操作)console.log(target, otherArray)return new target(...otherArray)}
})// fooProxy.apply(abc, [111, 222])
new fooProxy(aaa, bbb)2. Reflect
1. Reflect作用
Reflect也是ES6新增的一个API它是一个对象字面的意思是反射它主要提供了很多操作JavaScript对象的方法有点像Object中操作对象的方法
在早期的ECMA规范中没有考虑到这种对 对象本身 的操作如何设计会更加规范所以将这些API放到了Object上面但是Object作为一个构造函数这些操作实际上放到它身上并不合适另外还包含一些类似于 in、delete操作符让JS看起来是会有一些奇怪的所以在ES6中新增了Reflect让我们这些操作都集中到了Reflect对象上
2. Reflect与OBject的区别
删除对象属性的操作
use strictconst obj {name: why,age: 18
}Object.defineProperty(obj, name, {configurable: false
})
// Reflect.defineProperty()// 1.用以前的方式进行操作
// delete obj.name
// if (obj.name) {
// console.log(name没有删除成功)
// } else {
// console.log(name删除成功)
// }// 2.Reflect
if (Reflect.deleteProperty(obj, name)) {console.log(name删除成功)
} else {console.log(name没有删除成功)
}3. Reflect常见方法 3. Proxy与Reflect共同完成代理
const obj {name: why,age: 18
}const objProxy new Proxy(obj, {set: function(target, key, newValue, receiver) {// target[key] newValue// 1.好处一: 代理对象的目的: 不再直接操作原对象// 2.好处二: Reflect.set方法有返回Boolean值, 可以判断本次操作是否成功const isSuccess Reflect.set(target, key, newValue)if (!isSuccess) {throw new Error(set ${key} failure)}},get: function(target, key, receiver) {}
})// 操作代理对象
objProxy.name kobe
console.log(obj)4. receiver等同于代理的proxy对象
receiver就是外层Proxy对象
Reflect.set/get最后一个参数, 可以决定对象访问器setter/getter的this指向
如果我们的源对象obj有setter、getter的访问器属性那么可以通过receiver来改变里面的this
const obj {_name: why,set name(newValue) {console.log(this:, this) // 默认是objthis._name newValue},get name() {return this._name}
}// obj.name aaaa// console.log(obj.name)
// obj.name kobeconst objProxy new Proxy(obj, {set: function(target, key, newValue, receiver) {// target[key] newValue// 1.好处一: 代理对象的目的: 不再直接操作原对象// 2.好处二: Reflect.set方法有返回Boolean值, 可以判断本次操作是否成功/*3.好处三: receiver就是外层Proxy对象 Reflect.set/get最后一个参数, 可以决定对象访问器setter/getter的this指向*/console.log(proxy中设置方法被调用)const isSuccess Reflect.set(target, key, newValue, receiver)if (!isSuccess) {throw new Error(set ${key} failure)}},get: function(target, key, receiver) {console.log(proxy中获取方法被调用)return Reflect.get(target, key, receiver)}
})// 操作代理对象
objProxy.name kobe
console.log(objProxy.name)5. Reflect的construct
前面讲到可以使用 Person.call(this, name, age) 完成属性的继承
当Reflect支持的时候 我们也可以使用Reflect完成属性的继承
function Person(name, age) {this.name namethis.age age
}function Student(name, age) {// Person.call(this, name, age)const _this Reflect.construct(Person, [name, age], Student)return _this
}// const stu new Student(why, 18)
const stu new Student(why, 18)
console.log(stu)
console.log(stu.__proto__ Student.prototype)
