es6에서 프록시 사용법은 무엇입니까

es6에서 프록시는 객체에 대한 지정된 작업을 가로채는 데 사용되며 외부 액세스를 필터링하고 다시 작성할 수 있습니다. 프록시는 대상 객체 앞에 "가로채기" 계층을 설정하며 객체에 대한 외부 액세스는 이를 통과해야 합니다. 레이어 차단, 구문은 "new Proxy(target, handler);"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 프록시의 용도는 무엇입니까?

프록시는 대상 객체에 대한 외부 액세스가 먼저 이 차단 계층을 통과해야 하므로 메커니즘을 제공하는 것으로 이해될 수 있습니다. 외부 액세스를 필터링하고 다시 작성할 수 있습니다. 프록시라는 단어의 원래 의미는 에이전트입니다. 여기서는 특정 작업을 "대신하여 작동"한다는 의미로 사용됩니다. 이는 "에이전트"로 번역될 수 있습니다. 다음은 공식 문서에 있는 프록시 정의입니다.

let p = new Proxy(target, handler);

target: 프록시를 사용하여 래핑해야 하는 대상 개체입니다(기본 배열, 함수 또는 다른 프록시를 포함한 모든 유형의 개체일 수 있음).

handler: 작업이 수행될 때 에이전트의 동작을 정의하는 함수인 속성을 가진 개체입니다(일종의 트리거로 이해될 수 있음).

ES6에서는 객체에 대한 지정된 작업을 가로채는 데 사용되는 새로운 기능인 프록시를 제안합니다. 이 기능은 매우 유용합니다. 예를 들면 다음과 같습니다.

var engineer = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
 set: function (receiver, property, value) {
  console.log(property, 'is changed to', value);
  receiver[property] = value;
 }
};
engineer = Proxy(engineer, interceptor);

engineer 객체는 프록시 프록시에 의해 생성된 프록시 객체로 대체됩니다. 프록시에 전달된 두 번째 매개변수는 프로세서 함수입니다. 프로세서 함수에는 get, set 및 기타 메서드가 있습니다. 여기서 set 메소드는 프록시 객체에서 수행되는 모든 속성 할당 작업을 가로챌 수 있습니다.

다음 할당을 수행하면

engineer.salary = 60;

가 프로세서 및 출력 정보를 트리거합니다.

salary is changed to 60

프록시 개체에 값이 할당될 때마다 특정 문제를 디버깅하는 데 사용할 수 있는 프로세서 함수가 호출됩니다.

물론, Proxy는 단지 디버깅을 위해 탄생한 것이 아닙니다. Sencha Touch나 AngularJS를 사용해 본 적이 있다면 이러한 프레임워크가 데이터 모델 바인딩과 유사한 기능을 가지고 있다는 것을 알게 될 것입니다.

저자는 Sencha Touch에서 프록시를 사용했습니다. 코드는 다음과 같습니다.

proxy:{//数据代理
//       type:'localstorage',
//       id:'bills',
    // limitParam:'limit',
    // pageParam:'page',
    //将用户代理改为sql，通过websql来解决localstorage的5MB存储上限的问题
    type:'sql',
    database:'myDB',
    table:'bill',
},
//filters:[{property:"kind",value:"无"}],//过滤属性
listeners:{
    removerecords:function(){
      console.log("数据被删除");
    },
    addrecords:function(){
      console.log("数据被追加");
    },
    updaterecord:function(){
      console.log("数据被修改");
    },
}

보시다시피 Setter와 Getter를 모니터링하는 방법을 사용하는 반면 Angular는 더티 감지를 사용합니다. . 프록시가 있으면 간단한 데이터 모델 바인딩을 위해 이러한 특정 탐지 방법을 단순화할 수 있습니다.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 es6에서 프록시 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!