1、Reflect是什么?
答:为了操作对象而提供的一个API。
2、Reflect常见的静态方法有哪些?
答:一共有13个静态方法,目前先要求掌握的有:get, set, has, ownKeys.
3、如何利用Reflect查找对象的某个属性?如果该属性不存在,返回的值是什么?
答:利用Reflect的get方法。属性不存在时,返回undefined。代码如下:
var myObj = { foo: 1, bar: 2, get baz(){ return this.foo + this.bar } } let a = Reflect.get(myObj,‘foo‘); let b = Reflect.get(myObj,‘bar‘); let c = Reflect.get(myObj,‘baz‘); let d = Reflect.get(myObj,‘name‘) console.log(a,b,c,d) //1,2,3,undefined
4、get方法里的第三个参数是做什么用的?
答:语法是Reflect(target, name, receiver),传递两个或三个参数。
如果target的name属性部署了读取函数(getter),则读取函数的this绑定target,如果存在receiver,则读取函数的this绑定receiver。代码如下:
var person={ name:"Alice", age: 18, get say(){ console.log(this.name + "今年" + this.age) } } let receiverObj = { name: "Tom", age: "27" } Reflect.get(person, ‘say‘, receiverObj) //直接执行了这个方法,输出的内容为:Tom今年27
延伸:get的用法。
如果有一个数组list,list的每一项都是一个对象。对象里面包含有一个name属性。可以利用Reflect.get将list里面每个对象的name属性挑选出来,整理成一个数组。这样比for in
快的多。
5、set的用法
var myObj = { foo: 1, set bar(value){ return this.foo = value; } } Reflect.set(myObj, ‘foo‘, 2); console.log(myObj.foo) //2
6、set的第四个参数有什么用?
答:set的语法结构是:Reflect(obj, name, value, receiverObj)。如果name属性设置了赋值函数,则赋值函数的this指向receiverObj。
var myObj = { foo: 1, set bar(value){ return this.foo = value; } } let receiverObj = { foo: 4 } Reflect.set(myObj, ‘foo‘, 2, receiverObj); console.log(myObj.foo) //1 console.log(receiverObj.foo) //2
延伸:同get 一样,如果最后一位填写了receiverObj,就将this指向receiverObj。但是注意,这个的用法需要在目标对象上为这些属性设定get 和set 的方法。
7、has的用法
可以用来判断对象中是否存在某个属性。感觉这比proxy简单多了。
let person = { name: ‘Alice‘, age: 18 } let property = ‘name‘ console.log(Reflect.has(person,property))//true console.log(Reflect.has(person,‘hobby‘)) //false
8、ownKeys的用法
用来返回所有的对象里的所有属性名称。
let person = { name: ‘Alice‘, age: 18 } console.log(Reflect.ownKeys(person)) //Array(2) ["name", "age"]
9、观察者模式
函数自动观察数据对象。一旦对象有变化,函数就会自动执行。
它由两部分组成,观察目标和观察者。
let person = observable({ name: ‘Alice‘, age: 18 }) function print() { console.log(`${person.name},${person.age}`) } observe(print); person.name = ‘Tom‘ const queen = new Set(); const observe = (fn) => { queen.add(fn); } const observable = function(obj) { return new Proxy(obj,{set}) }
原文:https://www.cnblogs.com/qingshanyici/p/11645629.html