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

大家好，在上一篇文章《1分钟搞懂什么是 JS 代理对象（proxies）》学会了什么是 JS 代理，本篇文章我们继续加深下对象代理在实际场景中的运用。

今天我们来聊聊私有属性，在其他的高级语言中很容易能实现私有属性的功能，那么在 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

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载