es6에서 프록시는 객체에 대한 지정된 작업을 가로채는 데 사용되며 외부 액세스를 필터링하고 다시 작성할 수 있습니다. 프록시는 대상 객체 앞에 "가로채기" 계층을 설정하며 객체에 대한 외부 액세스는 이를 통과해야 합니다. 레이어 차단, 구문은 "new Proxy(target, handler);"입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.
프록시는 대상 객체에 대한 외부 액세스가 먼저 이 차단 계층을 통과해야 하므로 메커니즘을 제공하는 것으로 이해될 수 있습니다. 외부 액세스를 필터링하고 다시 작성할 수 있습니다. 프록시라는 단어의 원래 의미는 에이전트입니다. 여기서는 특정 작업을 "대신하여 작동"한다는 의미로 사용됩니다. 이는 "에이전트"로 번역될 수 있습니다. 다음은 공식 문서에 있는 프록시 정의입니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!