Hi，大家好，我是Tony，是一個對於JavaScript有些概念的新手。

挑戰第27天快結束啦！
今天的學習內容是：JavaScript 代理物件基礎 (Proxy)

學習內容來自
彭彭老師JavaScript Proxy 代理物件基礎
https://www.youtube.com/watch?v=cSXPB6GDKdQ&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=32

昨天的學習內容：[Day 26] JavaScript 模組的輸出和輸入
https://ithelp.ithome.com.tw/articles/10347455

1. 什麼是 代理物件(Proxy)？

現在前端框架經常使用的核心技巧，
用來 「代理」目標物件，意思是 改變「中介」目標物件的基礎操作。
可能的用途：

1. 取得經過加工處理的屬性資料
2. 驗證物件的屬性資料
3. 綁定物件的屬性資料和使用者介面

2. 代理物件使用方法

使用的方式一樣有兩個步驟，

• 建立代理物件
• 使用代理物件

先了解一下，
Proxy代理物件的建構式與語法：

new Proxy(目標物件,包裝處理函式的物件);

建立Proxy代理物件：

let 目標物件=某個物件實體;
let ref=new Proxy(目標物件,{
    get:function(目標物件,屬性名稱){
        return回傳自定義的暑醒資料;
    }
});

使用Proxy代理物件

//取得物件屬性時，執行上述get函式並取得回傳值
console.log(ref.x);

3. 入門範例

先使用JSON表達一個目標物件，裡面記錄了名字與姓氏資料，
如下：

let profile={
    firstName:"小明",
    lastName:"王"
};

需求1，想要用習慣的方式寫出完整中文姓名，
簡來操作可以用下面方式：

console.log(prfile.lastName+profile.firstName)

但是我們有時候會需要用英文方式(先名再姓)來寫出完整姓名，
或是只要顯示名字，或是只顯示姓氏的場合，
可以裡用Proxy代理物件來操作。
完整程式翻例如下：
(get函式裡的就是要代理的物件)

let profile={
    firstName:"小明",
    lastName:"王"
};
let proxy=new Proxy(profile,{
    get:function(target,property){
        if(property==="chineseName"){
            return target.lastName+target.firstName;
        }else if(property==="englishName"){
            return target.firstName+target.lastName;
        }else{
            return target[property];
        }
    }
})
console.log(proxy.chineseName); //印出：王小明
console.log(proxy.englishName); //印出：小明王
console.log(proxy.firstName); //印出：小明
console.log(proxy.lastName); //印出：王

網頁結果
可以看到就按照設定的樣子印出來

練習

• 練習1：購買清單範例，先了解每個部分是什麼意思

利用console.log印出每個部分是什麼意思

<script>
    //  建立代理物件
    let data={
        price:100,
        count:5
    };
    let proxy=new Proxy(data,{
        get:function(target,property){  //使用代理物件取得屬性資料的時候，會對應的函式
            console.log("代理的目標物件",target);
            console.log("想要取得的屬性名稱",property);
            return "屬性對應的資料";
        }
    });
    
    // 使用代理物件，取得物件的屬性資料
    console.log(proxy.abc);
</script>

網頁結果1
清楚列出每個部位代表什麼意思。

• 練習2：購買清單，印出總價

回傳值設定價格*數量

<script>
    //  建立代理物件
    let data={
        price:100,
        count:5
    };
    let proxy=new Proxy(data,{
        get:function(target,property){
            return target.price*target.count;
        }
    });
    
    // 使用代理物件，取得物件的屬性資料
    console.log(proxy.total);
</script>

網頁結果2
印出總價為500

• 練習3：購買清單，除了總價，還想要看到單價

因為剛剛的程式中只有回傳值價格*數量，
需要利用if...else語法，讓價格也能被叫出來。

<script>
    //  建立代理物件
    let data={
        price:100,
        count:5
    };
    let proxy=new Proxy(data,{
        get:function(target,property){
            if(property==="total"){
                return target.price*target.count;
            }else{
                return target[property];
            }
        }                    
    });    
    // 使用代理物件，取得物件的屬性資料
    console.log("總價",proxy.total);
    console.log("單價",proxy.price);
</script>

網頁結果3

今天的內容先到這邊，剛剛又補上了練習3
挑戰剩下3天了，但感覺其實自己還是在基礎的地方學習，
但沒關係至少還是有持續再學習~
謝謝大家，明天見。