//實現(xià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
  }
})
//測試
console.log(data.name)//get xiaowanzi
data.name = 'list'//set

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

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