ES6 지식을 정리한 Proxy의 응용 실례 설명

본고의 실례는 ES6 지식점 정리의 Proxy의 응용을 설명한다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.
Proxy는 대상의 일부 동작을 수정하는 데 사용되는 기본 동작으로 외부의 접근을 필터하고 고칠 수 있으며, 개념은 원 프로그래밍과 유사하다.
Proxy는 모든 대상의 대부분 행위를 감청하고 간섭하여 더 많은 사용자 정의 프로그램 행위를 실현할 수 있도록 합니다.목표 대상에 앞서'차단'을 가설하고 외부의 이 대상에 대한 방문은 반드시 이 층을 통해 차단해야 한다.
현재 [호환성]에 일정한 문제가 존재한다. 현재 크롬과 ff 브라우저의 비엄격한 모델에서 사용할 수 있다. 일부 선진적인 기술은 현재 광범위하게 응용되지 못하지만 시간의 흐름에 따라 프로그래머의 일상적인 프로그래밍에 들어갈 것이다.
주: 블로그 정리시간: 2018-03-24 16:21:15
Proxy를 처음 알았습니다.

var obj = {name:'Joh'};
var proxy = new Proxy(obj, {
 get (target, key) {
  return 'test1';
 },
 set (target, key, value) {
  target[key] = value
 }
});
console.log(proxy.name); // test1  get 
proxy.name = 'test2'; //  set 
console.log(obj.name); // test2

Proxy 대상을 통해 target 대상의 속성을 차단합니다
Proxy를 사용하여 설정, 획득, 수정 및 삭제한 사례

var obj = {name:'Joh',group:'g1',_type:'student'};
var proxy = new Proxy(obj, {
 get (target, key) {
  if(key[0]!== '_') {
   // return Reflect.get(target,key); //  return 
   return target[key];
  };
 },
 set (target, key, value) {
  if(key[0]!== '_') {
   // Reflect.set(target,key,value);
   return target[key] = value;
  }
 },
 deleteProperty(target, key) {
  //  
  if(key[0] !== '_') {
   // Reflect.deleteProperty(target, key);
   delete target[key];
  }
 }
});
console.log(proxy.name); // Joh
console.log(obj.name); // Joh
proxy.name = 'Lily'; //  ， 
console.log(obj.name); // Lily
delete proxy.name; //  ， 
console.log(obj.name); // undefined  
delete proxy.group;
console.log(obj.group); // undefined  
delete proxy._type;
console.log(obj._type); // student
proxy.color='red';
console.log(obj.color); // red

그 중에서 Reflect를 통한 실현과 직접적인 실현의 효과는 동일하다
has 방법 및 in 키워드를 사용하여 차단하는 예:

var obj = {name:"Joh",_name:"Lily"};
var proxy = new Proxy(obj, {
 has(target, key) {
  if(key[0] === '_'){
   return false;
  } else {
   return key in target;
  }
 }
});
console.log('has name attr: ', 'name' in proxy); // has name attr: true
console.log('has _name attr: ', '_name' in proxy); // has _name attr: false

ownKeys 메서드를 사용하여 for-in과 특정 규칙 속성을 필터링하는 예

var obj = {name:"Joh",_name:"Lily", age:10, group:"g1"};
var proxy = new Proxy(obj, {
 ownKeys (target) {
  return Reflect.ownKeys(target).filter(key => key[0] !== '_');
 }
});
for(var k in proxy) {
 console.log(k); //   name age group   _name
}

apply 방법으로 함수 호출 차단

function test() {
 console.log('hello world');
}
var proxyFun = new Proxy(test,{
 apply(target,ctx,args) {
  console.log('proxy apply');
  return Reflect.apply(target,ctx,args);
 }
});
proxyFun(); //   proxy apply   hello world
// proxyFun.apply(); //  ，  proxy apply   hello world
// proxyFun.call(); //  ，  proxy apply   hello world

construct 방법을 통해 구조 함수 실례화에 대한 차단

function User() {
 console.log('this is a contructor');
}
var ClassProxy = new Proxy(User, {
 construct(target,args) {
  console.log('proxy construct');
  return Reflect.construct(target,args);
 }
});
new ClassProxy(); //   proxy construct   this is a contructor

JavaScript에 관한 더 많은 내용은 본 사이트의 주제를 보실 수 있습니다.,,,,,,,,,,,,,,,,
이 문서가 JavaScript 프로그램 설계에 도움이 되었으면 합니다.