ES6代理实现对象数据保护

最新推荐文章于 2025-05-30 15:47:04 发布

原创最新推荐文章于 2025-05-30 15:47:04 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6代理实现对象数据保护

javascript 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了如何在ES3、ES5及ES6中保护对象属性不被修改。ES3使用自定义get和set方法；ES5利用Object.defineProperty进行写保护；ES6则引入了Proxy对象提供更优雅的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>