//實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雙向綁定
const data = {}
const name = 'xiaowanzi'
Object.defineProperty(data, 'name', {
  get: function () {
    console.log('get')
    return name
  },
  set: function (newVal) {
    console.log('set')
    name = newVal
  }
})
//測(cè)試
console.log(data.name)//get xiaowanzi
data.name = 'list'//set

//實(shí)現(xiàn)Vue響應(yīng)式原理
let obj = {
  name: 'aaa',
  age: 18
}
//獲取obj對(duì)象的所有key
const keys = Object.keys(obj)//Object.keys()返回一個(gè)由一個(gè)給定對(duì)象的資深可枚舉屬性組成的數(shù)組，數(shù)組中的屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致
//遍歷Key數(shù)組，對(duì)obj對(duì)象的每一個(gè)屬性進(jìn)行處理
keys.forEach(key => {
  //使用value變量保存key對(duì)應(yīng)的屬性值
  let value = obj[key]
  //使用Object.defineProperty
  Object.defineProperty(obj, key, {
    get() {//當(dāng)獲取屬性時(shí)，回來(lái)到這里
      console.log(`${key}屬性被獲取`)
      return value
    },
    set(newValue) {//當(dāng)修改屬性時(shí)，會(huì)來(lái)到這里，并且設(shè)置的值會(huì)傳給newValue
      console.log(`${key}屬性被修改`)
      //這里不能寫成obj[key]=newValue
      //如果這樣寫相當(dāng)于又對(duì)該屬性進(jìn)行修改值，又會(huì)進(jìn)入set，就死循環(huán)了
      value = newValue
    }
  })
})
?
//現(xiàn)在我們已經(jīng)可以實(shí)現(xiàn)監(jiān)聽(tīng)obj對(duì)象的讀取與修改了
console.log(obj.name)//在打印'aaa'之前會(huì)先打印'name被獲取'，也就是說(shuō)監(jiān)聽(tīng)到屬性的獲取。
obj.name = 'bbb'//打印name屬性被修改，也就是說(shuō)監(jiān)聽(tīng)到了屬性的改變
?
//實(shí)現(xiàn)Vue響應(yīng)式原理
let obj={
  name:'aaa',
  age:18
}
//獲取obj對(duì)象的所有key
const keys=object.keys(obj)//Object.keys()返回一個(gè)由一個(gè)給定對(duì)象的資深可枚舉屬性組成的數(shù)組，數(shù)組中的屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致
//遍歷Key數(shù)組，對(duì)obj對(duì)象的每一個(gè)屬性進(jìn)行處理
keys.forEach(key=>{
  //使用value變量保存key對(duì)應(yīng)的屬性值
  let value = obj[key]
  //使用Object.defineProperty
  Object.defineProperty(obj,key,{
      get(){//當(dāng)獲取屬性時(shí)，回來(lái)到這里
        console.log(`${key}屬性被獲取`)
        return value
      },
      set(newValue){//當(dāng)修改屬性時(shí)，會(huì)來(lái)到這里，并且設(shè)置的值會(huì)傳給newValue
        console.log(`${key}屬性被修改`)
        //這里不能寫成obj[key]=newValue
        //如果這樣寫相當(dāng)于又對(duì)該屬性進(jìn)行修改值，又會(huì)進(jìn)入set，就死循環(huán)了
        value=newValue
      }
  })
})
?
//現(xiàn)在我們已經(jīng)可以實(shí)現(xiàn)監(jiān)聽(tīng)obj對(duì)象的讀取與修改了
console.log(obj.name)//在打印'aaa'之前會(huì)先打印'name被獲取'，也就是說(shuō)監(jiān)聽(tīng)到屬性的獲取。
obj.name='bbb'//打印name屬性被修改，也就是說(shuō)監(jiān)聽(tīng)到了屬性的改變

const student = {
  age: 23
}
const handler = {
  get(target, prop) {
    console.log("讀值：", key, value);
    target[key] = value;
    return target[prop]
  },
  set(target, key, value) {
    console.log("設(shè)置值", key, value);
    target[key] = value;
    return true
  }
}
const proxy = new Proxy(studengt, handler)
console.log(proxy.age)//23
//proxy.age=32   //32

//Proxy+Reflect
let obj = {
  name: 'aaa',
  age: 18
}
//第一個(gè)參數(shù)為要代理的對(duì)象，第二個(gè)參數(shù)位hander
const proxy = new Proxy(obj, {
  //當(dāng)訪問(wèn)第一個(gè)屬性的時(shí)候會(huì)得到getter
  //同時(shí)會(huì)傳遞三個(gè)參數(shù)
  //target要進(jìn)行代理對(duì)象，這里就是obj
  //key被訪問(wèn)的屬性
  //receiver用來(lái)綁定this
  get(target, key, receiver) {
    console.log(`${key}屬性被訪問(wèn)`)
    return Reflect.get(target, key, receiver)
  },
  //當(dāng)某一屬性修改的時(shí)，回來(lái)到Setter
  // 同時(shí)會(huì)傳遞四個(gè)參數(shù)
  // target要進(jìn)行代理的對(duì)象，這里就是obj
  // 可以被訪問(wèn)的屬性
  // newValue新修改的值
  // receiver用來(lái)綁定this
  set(target, key, newValue, receiver) {
    console.log(`${key}屬性修改`)
    return Reflect.set(target, key, newValue, receiver)
  }
})
// 以上代碼執(zhí)行完，得到的就是proxy對(duì)象就是obj對(duì)象的代理
// 我們只需要修改代理對(duì)象的就可以做到修改原型對(duì)象的效果
// 而且我們對(duì)代理對(duì)象的修改使我們能夠監(jiān)聽(tīng)到的
console.log(proxy.name)
proxy.name = 'bbb'