JavaScript
대리

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions
수색…


소개

JavaScript의 프록시를 사용하여 객체의 기본 작업을 수정할 수 있습니다. 프록시는 ES6에서 도입되었습니다. 객체의 프록시 자체가 객체이며 트랩이 있습니다. 트랩은 프록시에서 작업이 수행 될 때 트리거 될 수 있습니다. 여기에는 속성 조회, 함수 호출, 속성 수정, 속성 추가 등이 포함됩니다. 적용 가능한 트랩이 정의되지 않으면 프록시가없는 것처럼 프록시가있는 객체에서 작업이 수행됩니다.

통사론

  • let proxied = new Proxy(target, handler);

매개 변수

매개 변수 세부
목표 대상 객체,이 객체에 대한 작업 (가져 오기, 설정 등 ...)은 처리기를 통해 전달됩니다.
매니저 대상 객체에서 작업을 가로 채기위한 "트랩"을 정의 할 수있는 객체 (가져 오기, 설정 등 ...)

비고

사용 가능한 "트랩"의 전체 목록은 MDN - Proxy - "처리기 객체의 메소드" 에서 찾을 수 있습니다.

매우 간단한 프록시 (설정 함정 사용)

이 프록시는 대상 object 에 설정된 모든 문자열 속성에 문자열 " went through proxy" 를 추가하기 만합니다. 

let object  = {};

let handler = {
    set(target, prop, value){ // Note that ES6 object syntax is used
        if('string' === typeof value){
            target[prop] = value + " went through proxy";
        }
    }
};

let proxied = new Proxy(object, handler);

proxied.example = "ExampleValue";

console.log(object); 
// logs: { example: "ExampleValue went trough proxy" }
// you could also access the object via proxied.target

프록시 속성 조회

속성 조회에 영향을 주려면 get 처리기를 사용해야합니다.

이 예에서는 값뿐만 아니라 해당 값의 유형도 반환하도록 속성 조회를 수정합니다. 우리는 Reflect 를 사용하여 이것을 완화합니다. 

let handler = {
    get(target, property) {
        if (!Reflect.has(target, property)) {
            return {
                value: undefined,
                type: 'undefined'
            };
        }
        let value = Reflect.get(target, property);
        return {
            value: value,
            type: typeof value
        };
    }
};

let proxied = new Proxy({foo: 'bar'}, handler);
console.log(proxied.foo); // logs `Object {value: "bar", type: "string"}`


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow