如何定义一个安全的私有对象？

PanShanShan
305 阅读4分钟

引言：

定义私有对象，或者私有属性对于开发工具库是比较重要的知识，在各种使用场景你不知道会出现什么情况它可能会篡改你不想让用户操作的对象和属性，因此安全的定义私有对象能保证代码库的稳定性。

定义一个简单的私有对象

通常情况下我们会通过匿名函数自执行的方式（闭包）获得一个私有对象，这样用户就不能随意篡改重要元数据了。

同时实现了一个 get 方法示意其提供 api 的方式。

const o = (function(){
    const obj = {
       foo:'foo',
       bar:'bar',
    }
    return {
        get(key){
            return obj[key]
        }
    }
})();

export default o;

我们看到 obj 已经被很好的保护起来了。

意想不到的篡改

但是真的无法篡改了吗？未必！

正常情况下我们无论如何也无法篡改 obj 了，因为我们只能通过 get 方法获得 obj 的属性，而无法获取 obj 本身，要是可以 通过 obj 的属性获取到 obj 本身 就好了，但是 obj 上只存在 foo 和 bar 两个属性，显然无从下手，如果硬要做点什么，那么可以通过什么来做到呢？

有了! 原型和原型链,我们可以通过修改原型来扩展方法和属性，obj 是一个对象，通过原型链我们可以知道他的原型是 Object.prototype 这么一来就好办了，要是给 Object.prototype 扩展一个获取自身的属性 就好了,Object.defineProperty这个时候就派上用场了。

扩展一个 self 属性吧，作用就是返回自己。

Object.defineProperty(Object.prototype,'self',{
    get(){
        return this
    }
})

接下来我们尝试篡改 obj

image.png

可以看到成功了。

预防

既然上面成功通过属性访问到自身的方法是通过原型和原型链，那么预防也会 从原型和原型链着手。

比较弱的预防是获取属性的时候判断是是不是自身拥有的属性，不允许读取非自身属性。

只返回自身属性

hasOwnProperty 方法是一个实例方法用于判断一个对象是否自身存在某个属性，而不是原型链的某个对象上存在该属性。

const o = (function(){
    const obj = {
       foo:'foo',
       bar:'bar',
    }
    return {
        get(key){
            if(obj.hasOwnProperty(key)){
                return obj[key]
            }
        }
    }
})();

export default o;

更好的方式容易想到我们只需要打断原型链或者在创建的时候不继承原型就行了

我们知道 原型链 是通过实例的 __proto__ 属性来链接的，所以打算原型链只需要改变它的指向即可。（对于构造函数和 class 则是 prototype 属性）。

打断原型链

const o = (function(){
    const obj = {
       foo:'foo',
       bar:'bar',
    }
    // 打断原型链
    obj.__proto__ = undefined
    return {
        get(key){
            return obj[key]
        }
    }
})();

export default o;

不继承原型

Object.create(null) 创建的对象可以去除一些不干净的东西。而字面量形如 const obj = {} 则会默认携带Obejct.prototype原型。

const o = (function(){
    const obj = Object.create(null)
    Object.assign(obj,{
       foo:'foo',
       bar:'bar',
    })
    return {
        get(key){
            return obj[key]
        }
    }
})();
export default o;

私有属性

这个我们搞快点:

1、命名规范下划线

这个太弱了

class Foo {
   __foo='foo'
}

image.png

不推荐

2、Symbol + 闭包

const foo = Symbol('foo')
class Foo {
   [foo]='foo'
}
export default Foo

image.png

虽然闭包内的 Symbol 无法访问但是 如果是 Symbol 作为一个对象的属性，那还是有办法访问的，就是通过 Object.getOwnPropertySymbols 获取一个对象的所有 Symbol 属性， 该方法接受一个对象作为参数。

所以 Symbol + 闭包 也比较弱，不是很推荐。

3、标准语法‘#’

class Foo {
   #foo='foo'
}
export default Foo

这个很完美了，但是目前有浏览器兼容问题，未来不会是问题，推荐。

4、自定义映射

const foo = new WeakMap()
class Foo {
   constructor(){
       foo.set(this, "foo");
   }
}
export default Foo

这里使用 weekMap 是为了不影响垃圾回收，foo 实例不会因为 map 的引用而无法回收。

如果再多一个私有属性呢，那就定义两个 WeakMap

const foo = new WeakMap()
const bar = new WeakMap()
class Foo {
   constructor(){
       foo.set(this, "foo");
       bar.set(this, "bar")
   }
}
export default Foo

等价于

class Foo {
   #foo='foo'
   #bar='bar'
}
export default Foo

如果是实例属性不是类属性可以

const map = new WeakMap()
map.set('attributeName', 'value')

这种没有兼容性问题，当然后续兼容性会更好，或者你有 babel 的话也可以直接使用最新的语法。

#attributeName
this.#attributeName

(完)

avatar
文章
阅读
粉丝