JavaScript 프록시가 모든 속성에 대해 동적 Getter 및 Setter를 활성화할 수 있습니까?

JavaScript에서 동적 Getter 및 Setter 구현

질문:

표준 JavaScript에서는 getter 및 setter 생성이 허용됩니다. 특정 속성의 경우 명시적으로 정의되지 않은 속성 이름을 처리하는 포괄적인 getter 및 setter를 생성할 수 있습니까?

답변:

예, 동적에 대한 JavaScript 지원 getter 및 setter는 프록시 사용을 통해 ES2015 사양에 도입되었습니다. 프록시는 속성 액세스 및 수정을 가로채는 래퍼 객체를 생성하여 사용자 정의 동작을 허용합니다.

구현:

다음은 문자열 속성 값을 대문자로 변환하고 "를 반환하는 프록시 예시입니다. 정의되지 않은 속성의 경우 "missing":

<code class="js">if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            if (typeof rv === "string") {
                rv = rv.toUpperCase();
            }
            return rv;
        }
        return "missing";
    }
});</code>

사용:

<code class="js">console.log(`original.example = ${original.example}`);  // "original.example = value"
console.log(`proxy.example = ${proxy.example}`);        // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`);        // "proxy.unknown = missing"
original.example = "updated";
console.log(`original.example = ${original.example}`);  // "original.example = updated"
console.log(`proxy.example = ${proxy.example}`);        // "proxy.example = UPDATED"</code>

참고:

프록시 지원이 고려됩니다. 크로스 브라우저와 호환되며 모든 주요 최신 브라우저에서 지원됩니다.

위 내용은 JavaScript 프록시가 모든 속성에 대해 동적 Getter 및 Setter를 활성화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!