ES6私有变量与babel的爱情碰撞

最新推荐文章于 2024-05-29 11:56:37 发布

weixin_33893473

最新推荐文章于 2024-05-29 11:56:37 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发前端 ViewUI

原文链接：https://juejin.im/post/5c84b41251882501351d4d96

本文深入探讨了JavaScript中实现私有变量的多种方法，包括Symbol、WeakMap及闭包等，详细介绍了每种方法的使用场景及优势，并通过示例代码展示了如何利用Babel插件简化私有变量的定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

私有变量

JS原生不支持私有变量，这让前端开发很头痛，如何实现私有变量对于程序的健壮十分重要。下面就讲下私有变量的几种实现，以及对应的babel插件。

主要是讲ES6相关的Symbol和WeakMap，当然闭包也是可以实现的，本篇主要讲es6的。

Symbol

原生实现

let _method = Symbol('_method');
class Foo {
  constructor() {
    this[_method]();
  }
 
  [_method]() {
    // ...
  }
}
复制代码

babel插件实现

babel-plugin-private-underscores

插件自动处理下划线开头的属性与方法，换成Symbol类型的变量

class Foo {
  constructor() {
    this._method();
  }
 
  _method() {
    // ...
  }
}
复制代码

WeakMap

原生实现

const _private = new WeakMap();

class Foo {
  constructor() {
    _private.set(this, 'foo');
  }
  getPrivate() {
  	return _private.get(this);
  }
}

let foo = new Foo();

console.log(foo.getPrivate());  // private
复制代码

babel官方插件实现

我们使用babel官方的插件@babel/plugin-proposal-private-methods, 链接。

babel官方插件是JS新的私有属性/方法的提案，在私有属性、方法前面加上#来标识。下面是对应的写法

class Foo {
  constructor() {
    this.publicField = this.#privateMethod();
  }

  #privateMethod() {
    return 42;
  }
}
复制代码

babel-plugin-transform-private-properties

babel-plugin-transform-private-properties插件的写法如下：

class Private_Property_Class_With_WeakMap {
    @Private
    p = 'foo'
    
    getP() {
        return this.p
    }
    
    @Private
    private_func () {
        console.log('this\'s a private function')
    }

} 

let ppw = new Private_Property_Class_With_WeakMap()

console.log(ppw.getP()) // => foo
console.log(ppw.p)    // => undefined
ppw.private_func()  // Error: ppw.private_func is not a function
复制代码