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

用户2845596

发布于 2021-01-21 15:12:57

8380

发布于 2021-01-21 15:12:57

文章被收录于专栏：劝学劝学

私有变量

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
复制代码

babel产物可见babel try it out，需要自己手动加下plugin babel-plugin-transform-private-properties，在右下角Plugins处添加即可