270. (JavaScript) new Proxy 프록시 객체 사용해 원본 데이터 확인 및 재정의 수행 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->
    <script>
    	

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. Proxy : Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있습니다
        -----------------------------------------
        2. Proxy 객체를 사용하면 원래 Object 대신 사용할 수 있는 객체를 만들지만, 이 객체의 속성 가져오기, 설정 및 정의와 같은 기본 객체 작업을 재정의할 수 있습니다
        -----------------------------------------
        3. 프록시 객체는 일반적으로 속성 액세스를 기록하고, 입력의 유효성을 검사하고, 형식을 지정하거나, 삭제하는 데 사용됩니다
        -----------------------------------------
        */






        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // [테스트 함수 호출]
            testMain();
        };





        // [자바스크립트 테스트 코드]
        function testMain() {
            console.log("");
            console.log("=========================================");
            console.log("[testMain] : [start]");
            console.log("=========================================");
            console.log("");


            // [프록시할 원본 객체]
            const target = {
                message1: "hello",
                message2: "twok"
            };


            // [가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체]
            const handler = {
                get(target, prop, receiver) {
                    return "투케이";
                }
            };


            // [프록시 객체 선언]
            const proxy = new Proxy(target, handler);


            // [로그 출력]
            console.log("");
            console.log("=========================================");
            console.log("[testMain] : [result]");
            console.log("-----------------------------------");
            console.log("[message1] : " + proxy.message1);
            console.log("-----------------------------------");
            console.log("[message2] : " + proxy.message2);
            console.log("=========================================");
            console.log("");

        };


    </script>

 

---

[결과 출력]

 

=========================================
[testMain] : [result]
-----------------------------------
[message1] : 투케이
-----------------------------------
[message2] : 투케이
=========================================

---