JavaScript 프록시가 정의되지 않은 속성에 대한 동적 Getter 및 Setter를 생성할 수 있습니까?

JavaScript의 동적 Getter 및 Setter

소개:

JavaScript는 getter 및 setter를 통해 속성 액세스 및 수정을 위한 유연한 메커니즘을 제공합니다. 세터. 미리 결정된 속성 이름에 대해 getter 및 setter를 정의하는 방법은 잘 알려져 있지만 다음과 같은 질문이 생깁니다. 정의되지 않은 속성 이름에 적용되는 동적 getter 및 setter를 구현할 수 있습니까?

동적 게터 및 프록시를 사용하는 Setter(ES6 ):

ES2015부터 JavaScript는 다른 객체에 대한 "외관" 역할을 하는 객체 생성을 허용하는 프록시를 도입했습니다. 이를 통해 getter 및 setter를 포함한 속성 작업을 가로채고 수정할 수 있습니다.

예:

다음 코드 조각은 프록시를 사용하는 동적 getter 및 setter를 보여줍니다.

<code class="javascript">"use strict";
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";
    }
});

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>

이 예에서:

• 원본 객체에는 값이 "value"인 속성 예가 포함되어 있습니다.
• 프록시는 원본에 대한 Facade로 생성됩니다. get() 핸들러.
• get() 핸들러는 속성 액세스를 가로챕니다. 속성이 원본에 존재하는 경우 해당 값이 반환됩니다. 속성이 발견되지 않으면 "missing"을 반환합니다.
• 접근한 속성의 값이 문자열인 경우 대문자로 변환됩니다.
• 프록시를 통한 속성 수정은 원본에 반영됩니다.
• 프록시 생성 후 원본에 정의된 속성도 프록시를 통해 액세스할 수 있습니다.

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