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

引言:

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

定义一个简单的私有对象

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

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

js 复制代码
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 上只存在 foobar 两个属性,显然无从下手,如果硬要做点什么,那么可以通过什么来做到呢?

有了! 原型原型链,我们可以通过修改原型来扩展方法和属性,obj 是一个对象,通过原型链我们可以知道他的原型是 Object.prototype 这么一来就好办了,要是给 Object.prototype 扩展一个获取自己的属性不就好了嘛~,Object.defineProperty要上场了,属性Vue2的小伙伴应该知道要怎么做了吧,接下来我们实现一下。

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

js 复制代码
Object.defineProperty(Object.prototype,'self',{
    get(){
        return this
    }
})

接下来我们尝试篡改 obj

可以看到成功了。

预防

比较弱的预防是获取属性的时候判断是是不是自身拥有的属性

只返回自身属性

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

export default o;

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

打断原型链

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

export default o;

不继承原型

Object.create(null) 创建的对象可以去除一些不干净的东西。

js 复制代码
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、命名规范下划线

这个太弱了

js 复制代码
class Foo {
   __foo='foo'
}

不推荐

2、Symbol + 闭包

js 复制代码
const foo = Symbol('foo')
class Foo {
   [foo]='foo'
}
export default Foo

也比较弱,不是很推荐。

3、标准语法'#'

js 复制代码
class Foo {
   #foo='foo'
}
export default Foo

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

4、自定义映射

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

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

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

等价于

js 复制代码
class Foo {
   #foo='foo'
   #bar='bar'
}
export default Foo

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

js 复制代码
const map = new WeakMap()
map.set('attributeName', 'value')

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

csharp 复制代码
#attributeName
this.#attributeName

(完)

相关推荐
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css