在javascript class中使用get set

以前在es5的对象中使用过get,set,但最近做的项目一般都使用es6然后babel转es5,那么在es6中的class中如何使用get,set呢?特地试了一下,注明 node环境进行测试的.

• 话不多说直接上代码

// 定义一个元素类
class Element{
  // 构造函数
  constructor(name = '', container = null) {
    this._name = name
    this._container = container
  }

  get name() {
    return this._name
  }
  set name(name) {
    this._name = name
  }
  get container() {
    return this._container
  }
  set container(container) {
    this._container = container
  }
  get fullName() {
    return this.container === null ? this.name : `${this.container.fullName} :: ${this.name}`
  }
}
// 实例化一个element作为顶级元素
let packageA = new Element('packageA')
// 再实例化一个element '放入' packageA中
let packageB = new Element('packageB', packageA)
// 再将block放入 packageB中
let block = new Element('block', packageB)
// 打印其全名,看效果
console.log('packageA fullName:  ', packageA.fullName)
console.log('packageB fullName:  ', packageB.fullName)
console.log('block fullName:  ', block.fullName)

• 在node环境下,测试结果如下:

PS D:\work\study\demo02> node -v
v8.9.1
PS D:\work\study\demo02> node test.js
packageA fullName:   packageA
packageB fullName:   packageA :: packageB
block fullName:   packageA :: packageB :: block

• 因为我们没有为fullName写set方法,所以,用户直接给fullName赋值,不会影响我们最终想get到的结果

// 用户想直接给fullName赋值,打印出来的还是packageA :: packageB :: block
block.fullName = '我是来捣乱的...'
console.log('block fullName:  ', block.fullName)
console.log(block)

• node执行脚本后输出的结果:

block fullName:   packageA :: packageB :: block
Element {
  _name: 'block',
  _container:
   Element {
     _name: 'packageB',
     _container: Element { _name: 'packageA', _container: null } } }