1.語言內部的方法，與物件關係不大，放到Reflect上

let obj = {color:'red'}
Reflect.preventExtensions(obj) // Object.preventExtensions(obj)
obj.num = 100
console.log(obj)

2.修改Object返回的結果，讓其變得更合理

Object.defineProperties(obj,'color',{ value:'red',configurable:false})
// Object.defineProperties(obj,'color',{ value:'green',configurable:true})  // 報錯，無法執行下面的程式
 

console.log(Reflect.defineProperties(obj,'color',{ value:'green',configurable:true})) // 返回false，繼續執行下面的程式

3.讓Object操作變成函式的行為

let obj = {color:'red'}
console.log(Reflect.has(obj,'color'))  // color in obj
console.log(Reflect.delete(obj,'color'))  // delete obj.color

4.Reflect方法和Proxy方法是一一對應的

 let obj = {color:'red'}
 let proxy 
 
= new Proxy(obj,{
        get(...args){
            return Reflect.get(...args)
        },
        set(...args){
            return Reflect.set(...args)
        }
 })
 proxy.color = 'red'
 console.log(obj)

5.Reflect-demo

// eg1：new物件
class Demo{
       constructor(color) {
            this.color = color
       }
}
 
// 通過Reflect建立
Reflect.construct(Demo,['red'])

// eg2：遍歷元素
const divs = document.getElementsByTagName('div')
Array.prototype.forEach.call(divs,item => console.log(item))
Reflect.apply(Array.prototype.forEach,divs,[item => console.log(item)])

6.Vue 資料繫結-proxy方式

let data = {}
let proxy = new Proxy(data, {
     set(target,key,value,receiver){
         // 更新資料
         Reflect.set(target,key,value,receiver)
         // 更新檢視
         updateView(receiver)
     }
})
// 獲取模板
let tpl = document.getElementsById('app').innerHTML;
function updateView(data){
   // 替換插值語法
   let html = tpl.replace(/{{(\w+)}}/g,(match,$0 = '') => data[$0])
   // 更新檢視
   document.getElementById('app').innerHTML = html
}

// 代理資料-更新檢視
proxy.msg = '喵喵'