>웹 프론트엔드 >JS 튜토리얼 >JavaScript Proxy() 객체 이해 및 사용(코드 예제)

JavaScript Proxy() 객체 이해 및 사용(코드 예제)

藏色散人
藏色散人원래의
2019-03-27 15:19:512584검색

JavaScript의 프록시 개체는 기본 작업(예: 속성 조회, 할당, 열거, 함수 호출 등)에 대한 사용자 정의 동작을 정의하는 데 사용됩니다.

JavaScript Proxy() 객체 이해 및 사용(코드 예제)

Syntax:

var p = new Proxy(target, handler);

Parameters: 프록시 객체는 위에서 언급한 대로 두 가지를 허용합니다. , 아래에 설명된 대로:

target: 프록시로 래핑할 대상 개체(함수, 클래스 또는 다른 프록시를 포함한 모든 유형의 개체일 수 있음) ) .

handler: 작업이 수행될 때 에이전트의 동작을 정의하는 함수인 속성을 가진 개체입니다.

예:

<script> 
const Person = { 
    Name: &#39;John Nash&#39;, 
    Age: 25 
}; 
  
const handler = { 
    // target表示Person,而prop表示代理属性。
    get: function(target, prop) { 
        if (prop === &#39;FirstName&#39;) { 
            return target.Name.split(&#39; &#39;)[0]; 
        } 
        if (prop === &#39;LastName&#39;) { 
            return target.Name.split(&#39; &#39;).pop(); 
        } 
        else { 
            return Reflect.get(target,prop); 
        } 
    } 
}; 
  
const proxy1 = new Proxy(Person, handler); 
  
document.write(proxy1 + "<br>"); 
  
// 虽然没有像FirstName和LastName那样的属性,但是我们仍然获取到它们,就好像它们是属性而不是函数一样。
document.write(proxy1.FirstName + "<br>"); 
document.write(proxy1.LastName  + "<br>");      
</script>

출력:

[object Object]
John
Nash

참고: NodeJs가 설치된 경우 위 코드는 터미널이 아닌 경우 위 코드를 스크립트 태그에 붙여넣고 웹 브라우저의 콘솔에서 출력을 확인하여 HTML 파일에서 실행할 수 있습니다.

관련 추천: "JavaScriptTutorial"

위 내용은 JavaScript Proxy() 객체 이해 및 사용(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.