使用 babel 插件来打造真正的“私有”属性

大家都知道 JavaScript 的对象属性默认是可以被从外部访问和修改的,也就是说,JavaScript 本身不存在完全“私有”的对象属性。例如:

在上面的代码里,我们约定俗成地用下划线开头来表示私有变量。我们希望 _x、_y 不被外部访问,然而,这只是我们一厢情愿,使用者还是可以访问到这两个变量。

在这里,我们不讨论 ES 的 private 标准提案,而是讨论如何使用工具来将约定变成真正的私有。

使用 Symbol 来构造私有数据

ES6 提供了一个新的数据类型叫做 Symbol,Symbol 有许多用途,其中一个用途是可以用来生成唯一 key,用作属性标识,我们利用它可以实现真正的私有属性:

我们改写上一版的代码,用 Symbol 的 _x、_y 代替字符串来作为 key,这样,外部 p 访问 _x、_y 属性就访问不到了,这样我们就真正实现了对象数据的私有。

上面这种用法并不复杂,但是,如果我们每次定义对象都这么去写还是显得麻烦。因此,我们可以考虑让编译器去做这件事情,自动将下划线开头的属性编译成私有属性。

使用 Babel 插件来实现属性的默认私有

在这里,我们可以开发 Babel 的插件来实现。Babel 的原理在博客之前的文章中有介绍。还有使用 Babel 插件来进行测试覆盖度检查的例子。如果对于 Babel 不熟悉的同学,可以回顾一下之前的文章。

首先,我们分析一下要处理的 AST 部分。ES6 的 class 有两种 node 类型,一种是 ClassDeclaration,另一种是 ClassExpression。它们比较类似,但是在一些细节上又有区别。比如 ReturnStatement 之后可以跟 ClassExpression 但是不能跟 ClassDeclaration。

ClassDeclaration 与 ClassExpression

对这两种 node,如果其中有下划线开头的属性,可以分别编译成如下形式:

此外,还需要考虑 ES Modules 的情况:

对应为:

上面的形式没有问题。但是如果:

对应为:

编译会报错。因此要进行修改,对应成:

由于 Class 允许存在嵌套,因此,我们需要使用堆栈结构,在 AST 的 enter 的时候创建存放当前 Class 的 scope 下的私有属性列表。堆栈还有一个作用,就是如果堆栈为空,那么当前作用域不在 Class 内部,不用进行编译转换。

接下来,我们处理具体的 Identifier:

Protected 的属性和 super._x 操作

对于对象方法带下划线的情况,和 this 带下划线不同,我们是可以使用 super.属性名 来访问的。比如:

在这里,我们需要对 super._X 进行处理,如果直接编译:

由于每个 Symbol 都是唯一的,所以 Bar 的 Symbol(‘$_X$’) 和 Foo 的并不相同,这样也就获取不到 super[$_X$] 实际的值了。

因此,在这里,我们编译的时候不能直接这样转成 Symbol,而是要通过反射机制去处理:

上面的 super 里的 key 有一大串,是:

这里通过 Object.getOwnPropertySymbols(this.__proto__.__proto__) 反射出父类的 Symbol,然后通过字符串匹配到对应的 key。

于是,我们确定了转换方法,那么接下来就只是实现具体的转换细节了:

上面的方法将 ClassDeclaration 和 ClassExpression 处理完成。接下来是处理 super 属性的部分:

上面代码虽然繁琐,但都并不复杂,只是 AST 树的构建而已。最终,我们形成完整的插件代码。有兴趣的同学可以关注这个 GitHub repo

要使用的话,直接安装:

然后配置一下:

其中配置的 pattern 参数可以修改私有变量的匹配正则表达式,默认是 `”^_” 也就是以下划线开头,可以改成别的模式。

以上就是今天的全部内容,代码比较多,但是关键点就这些,其他就是构建 AST 树的过程。如有任何问题,欢迎讨论。

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部