ECMAScript之Reflect()

Reflect()和Proxy()一样都是ES6给操纵对象提供的新API，原来的对象很多方法都是命令式的，不符合函数式编程思想，什么是函数式编程思想，以后有空再来谈一下自己的理解。先看一个例子：

let person =  {
  name: 'zdf'
}
// 老写法（命令式）
'name' in person
// 打印
console.log('name' in person) // true

// 新写法（函数式）
Reflect.has(person , 'name')
// 打印
console.log(Reflect.has(person , 'name')) // true

• 命令式和函数式熟好熟劣我不敢做出决断，只是个人觉得函数式的易读性更好。总而言之ES6对命令式的方法都改进成了函数式。

Reflect的set()实例

// 空对象
let person =  { }
// Reflect赋值
Reflect.set(person, 'name', 'D')
Reflect.set(person, 'age', '18')
Reflect.set(person, 'job', 'RD')
// 赋值后查看
console.log(person) // => {name: "D", age: "18", job: "RD"}

-so easy吧！是不是简单易上手。

Reflect的get()实例

// 对象
let person =  {
  name: 'D',
  age: '18'
  job: 'RD'
}
// Reflect获取
console.log(Reflect.get(person, 'name')) // => D
console.log(Reflect.get(person, 'age')) // => 18
console.log(Reflect.get(person, 'job')) // => RD

• 还能更简单吗？

Reflect的has()实例

// 对象
let person =  {
  name: 'D',
  age: '18'
  job: 'RD'
}
// Reflect获取
console.log(Reflect.has(person, 'name')) // => true
console.log(Reflect.has(person, 'age')) // => true
console.log(Reflect.has(person, 'job')) // => true
console.log(Reflect.has(person, 'sex')) // => false

• 是不是已经有了jQuery的范范儿？

Reflect的deleteProperty()实例

// 对象
let person =  {
  name: 'D',
  age: '18'
  job: 'RD'
}
// Reflect删除
Reflect.deleteProperty(person, 'name')
// 打印删除后的person
console.log(person) // => {age: 18, job: "RD"}

• 删除操作原先也是命令式的 delete obj.property，现在觉得那种好？

Reflect和Proxy的结合实例

let person =  {
  name: 'zdf'
}
// handler 
let handler = {
  set(target,name,value){
    let success = Reflect.set(target, name, value)
    if (success) {
      console.log('属性：' + name + '，值：' + value+ '，对象：' + target )
    }
    return success;
  }
}
// Proxy
let proxy = new Proxy(person,handler)
            
proxy.name = '疯子' // => 属性：name，值：疯子，对象：[object Object]
proxy.age = 18 // => 属性：age，值：18，对象：[object Object]
console.log(person) // => { name: '疯子', age: 18 }

• 上面的实例就是先使用Proxy()拦截赋值操作，然后使用Reflect()赋值给对象后再执行其他操作。这样就能保证完成原有的行为之后再做其他的骚操作。
• 是不是很奇怪怎么是Proxy()实例了？
• Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。
• 这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

静态方法汇总

可以一个一个自己去研究，我就不一一研究了。懒！

• Reflect.apply(target, thisArg, args)
• Reflect.construct(target, args)
• Reflect.get(target, name, receiver)
• Reflect.set(target, name, value, receiver)
• Reflect.defineProperty(target, name, desc)
• Reflect.deleteProperty(target, name)
• Reflect.has(target, name)
• Reflect.ownKeys(target)
• Reflect.isExtensible(target)
• Reflect.preventExtensions(target)
• Reflect.getOwnPropertyDescriptor(target, name)
• Reflect.getPrototypeOf(target)
• Reflect.setPrototypeOf(target, prototype)

来一个高端大气上档次我自己都理解不透彻的实例

完全抄袭自阮一峰老师，只是他写得很多菜鸟看不懂，我呢照顾菜鸟一波，糅合糅合

const queuedObservers = new Set()

const observe = fn => queuedObservers.add(fn)

const handler = { 
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver)
    queuedObservers.forEach(observer => observer())
    return result;
  }
}

const observable = obj => new Proxy(obj, handler)

const personD = observable({
  name: '张三',
  age: 20
});

let print = () => {
  console.log(`${personD.name}, ${personD.age}`)
}

observe(print);
personD.name = '李四';

// 输出
// 李四, 20

• 观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。
• 实战用处不要太多，所以我就抄过来了。用到的精英们别忘了膜拜一下先驱阮一峰老师。