ES6代理实现对象数据保护

在ES3中，为了防止js调用修改对象内部属性，可以采取下面的方式：

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <title>ES6代理</title>
    <script type="text/javascript">
        {
            // ES3
            var Person = function(){
                var data = {
                    name : 'huangbaokang',
                    age : 29,
                    sex : 'male'
                }
                this.get = function(key){
                    return data[key];
                }
                this.set = function(key,value){
                    if(key!='sex'){
                        data[key]=value;
                    }
                }

            }

            var hbk = new Person();
            console.log(hbk.get("name"));
            console.log(hbk.get("age"));
            hbk.set("name","zhanglulu");
            console.log(hbk.get("name"));
            hbk.set("sex","female");
            console.log(hbk.get("sex"));
        }
    </script>
</head> 
<body>
    　　
</body>
</html>

浏览器输出：可见，性别属性sex得到了保护，没有被修改。
这里写图片描述

在ES5中，还可以通过定义属性的方式进行写保护。如下：

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <title>ES6代理</title>
    <script type="text/javascript">
        {
            // ES5
            var Person = {
                name : "huangbaokang",
                age : 29,
            }
            Object.defineProperty(Person,"sex",{
                value : "male",
                writable : false
            })

            Person.name = "zhanglulu";
            console.log(Person.name);
            Person.sex = "female";
            console.log(Person.sex);
        }
    </script>
</head> 
<body>
    　　
</body>
</html>

浏览器输出，可见name是可以修改，但sex被保护了。
这里写图片描述

在ES6中，采用代理的方式，更加优雅。

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <title>ES5和ES6代理</title>
    <script type="text/javascript">
        {
            // ES6 代理实现对象属性保护
            let Person = {
                name : "huangbaokang",
                age : 29,
                sex : "male"
            }

            let p = new Proxy(Person,{
                get(target,key){
                    return target[key];
                },
                set(target,key,value){
                    if(key!='sex'){
                        target[key]=value;
                    }
                }

            })
            // 操作代理对象，而不是操作原始对象
            console.log(p);
            console.log(p.name);
            p.name = "zhanglulu";
            console.log(p.name);
            // 修改性别
            p.sex = "female";
            console.log(p.sex);

        }
    </script>
</head> 
<body>
    　　
</body>
</html>

浏览器输出：，可见性别sex没有被修改，取到了保护的作用。
这里写图片描述

专业墙纸贴纸厨房用具装饰出售，本人网店经营，访问即是爱

博客对你有用记得访问下哦，增加下访问量，如有需要可以下单购买哦^_^。店铺地址https://item.taobao.com/item.htm?id=570637716145

ES6代理实现对象数据保护

专业墙纸贴纸厨房用具装饰出售，本人网店经营，访问即是爱

猜你喜欢