Proxy 객체란?

작업에서 객체 등록 정보를 지정할 때 독립적으로 처리하는 객체를 추가할 수 있습니다.
main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}

const handler = {
  メソッド
}

new Proxy(target, handler);

// target  = 指定するオブジェクトが入る
// handler = 指定したオブジェクト(target)を操作する際に
//           実行されるメソッドが格納されたオブジェクト

사용 예1

속성 값이 변경되었을 때 "변경되었습니다."출력
main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  set(target, prop, value) {
    target[prop] = value;
    console.log('変更がありました。') ;
  }
}

const pxy = new Proxy(target, handler);
pxy.hoge = 'ほげ';

console.log(pxy);

set 메서드
값 변경을 체크합니다.
첫 번째 인자: target 대상
보조 매개변수:속성 이름
세 번째 매개변수: 수정된 값
main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  set(target, prop, value) {
    console.log(target);
    console.log(prop);
    console.log(value);
  }
}

const pxy = new Proxy(target, handler);
pxy.hoge = 'ほげ';

사용 예2

속성 값을 얻었을 때 "가져왔습니다."출력
main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  get(target, prop) {
    console.log('取得しました。');
    return target[prop];
  }
}

const pxy = new Proxy(target, handler);
pxy.hoge;

console.log(pxy);

get 방법
검측 수치의 취득.

사용 예3

속성 값을 삭제할 때 삭제됨출력
main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  deleteProperty(target, prop) {
    console.log('削除しました。') 
    delete target[prop];
  }
}

const pxy = new Proxy(target, handler);
delete pxy.hoge;

console.log(pxy);

deleteProperty 메서드
체크 값의 삭제.

사용 예4

존재하지 않는 속성에 접근하는 중 오류가 발생했습니다.
main.js

const target = {
  hoge: 'hoge',
  fuga: 'fuga'
}
const handler = {
  get(target, prop) {
    if (!target[prop]) {
      throw new Error('プロパティが存在しません。');
    }
    return target[prop];
  }
}

const pxy = new Proxy(target, handler);
console.log(pxy.hoge);
console.log(pxy.fuga);
console.log(pxy.piyo);

다음은 Proxy에 대한 요약입니다.
여기까지 봐주셔서 감사합니다!