Proxy() Object ใน JavaScript ใช้ทำอะไร

Proxy()

ฟีเจอร์ใหม่ของ ECMAScript 6 คือ Proxy() object ใช้กำหนดพฤติกรรมแบบกำหนดเองสำหรับ fundamental operations (property lookup, assignment, enumeration, function invocation ฯลฯ)

Proxy() มี 3 องค์ประกอบหลัก:

1. handler - placeholder object ที่มี traps
2. traps - ให้ property access
3. target - object ที่ proxy virtualizes

รูปแบบ

var p = new Proxy(target, handler);

ตัวอย่าง: ออบเจ็กต์ 'p' มี properties บางอย่าง พยายามเข้าถึง property ที่ไม่ได้กำหนด จะได้ undefined

ตัวอย่างที่ 1 (ไม่ใช้ Proxy)

<html> <body> <script> 
    var p = { Name: 'Ram kumar', Age: 27 }; 
    document.write(person.Name); 
    document.write("<br>"); 
    document.write(person.Age); 
    document.write("<br>"); 
    document.write(person.designation); 
</script> </body> </html>

ผลลัพธ์

Ram kumar 27 undefined

ใช้ Proxy() กำจัด undefined ได้ Proxy จับ property ที่ไม่รู้จักด้วย keyword "get" handler ใน proxy ส่ง target และ key ที่ร้องขอเข้า trap "get"

ตัวอย่างที่ 2: เริ่มต้น p ไม่มี designation และ role แต่ Proxy trap ด้วย 'get' แสดงค่า default สำหรับ property ที่ไม่มี

ตัวอย่างที่ 2 (ใช้ Proxy)

<html> <body> <script> 
    var p = { Name: 'Ram kumar', Age: 27 }; 
    var handler = { 
        get: function(target, prop) { 
            return prop in target ? target[prop] : 'Content developer'; 
        } 
    }; 
    var prox = new Proxy(p, handler); 
    document.write(prox.Name); 
    document.write("<br>"); 
    document.write(prox.Age); 
    document.write("<br>"); 
    document.write(prox.designation); 
    document.write("<br>"); 
    document.write(prox.role); 
</script> </body> </html>

ผลลัพธ์

Ram kumar 27 content developer content developer