1分钟学会如何用 JS 对象代理（proxies）实现对象的私有属性

曾经终败给现在 2022-09-16 11:13 204阅读 0赞

![e74e7d08954929de0b0a98fe69e5e448.png][]

大家好，在上一篇文章[《1分钟搞懂什么是 JS 代理对象（proxies）》][1_ JS _proxies]

今天我们来聊聊私有属性，在其他的高级语言中很容易能实现私有属性的功能，那么在 JS 中怎么实现对象的私有属性呢，首先我们聊聊私有属性运用的需求场景，比如我们在对象里用 \_ 符号开头的形式定义对象的私有属性，不希望外部环境读取私有属性，如下段代码所示

let bankAccount = {
        holderName: 'Joe',
        currency: 'USD',
        _balance: 1000
    }

我们希望读取对象 \_balance 的私有属性或删除对象的 \_balance 属性，会有如下的提示：

// don't allow reading the balance
    console.log(bankAccount._balance);
    // don't allow deleting the property
    delete _balance

那我们该如何实现呢？这时候我们可以使用 JS 代理，针对 \_符号开头的私有属性进行特殊的逻辑处理（你也可以用其他的符号自定义私有属性），废话不多说，上代理的实现的代码逻辑，以下为代理拦截器方法的代码：

let proxyHandler = { 
        has: (target, prop) => { 
            if(prop.startsWith(prefix)){ 
                return false;
            } 
            return prop in target 
        }, // 针对 in 方法的重写
        ownKeys: target => { 
            return Reflect.ownKeys(target).filter( 
                prop => !prop.startsWith(prefix) 
            ) 
        }, //针对 keys 方法的重写
        get: (target, prop) => { 
            if(prop.startsWith(prefix)) { 
                return undefined; 
            } 
            return target[prop]; 
        }, 
        deleteProperty(target, prop) { 
            if (prop.startsWith('_')) { 
                return true; //私有属性不删除
            } else { 
                delete target[prop]; 
                return true; 
            }
        }
    }

接下来，我们来验证下上述代码是否可行：

const hidePrivateFields = (target, prefix = "_") => { 
        return new Proxy(target, proxyHandler)
    };
    
    let bankAccount = hidePrivateFields({
        holderName: 'Joe',
        currency: 'USD',
        _balance: 1000
    })
    
    console.log(bankAccount._balance) // undefined 
    console.log('_balance' in bankAccount) //false
    console.log(Object.keys(bankAccount)) // ['holderName', 'currency'] 
    console.log(delete bankAccount._balance) // returns true, but does not delete the balance

今天关于 JS 对象代理在私有属性方面的应用就分享到这里，下一篇文章，我们将继续分享代理有趣的应用，比如以前JQ 插件库可以通过链式语法很容易的操控样式，如下所示，如果让你用 JS 对象代理，你会如何实现呢？

style(".menu").color("#fff").backgroundColor("#000").opacity("1");

> 文章来源：http://www.js-craft.io/blog/javascript-proxies-restricting-access-to-object-properties-and-some-other-practical-examples/
> 
> 作者：Daniel

[e74e7d08954929de0b0a98fe69e5e448.png]: /images/20220828/44aeda3cf34c4eb3ab5985eb8863f960.png
[1_ JS _proxies]: https://blog.csdn.net/weixin_49318392/article/details/119899928