JSOOP 私有化属性（Symbol和WeakMap）

最新推荐文章于 2024-07-09 11:11:33 发布

原创最新推荐文章于 2024-07-09 11:11:33 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Symbol #weakMap #JavaScript

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

JavaScript

152 篇文章

订阅专栏

本文探讨了如何在JavaScript中实现私有属性和方法，包括使用Symbol创建私有属性和私有方法，以及利用WeakMap来实现私有变量和私有方法。还特别提到了箭头函数在实现私有方法中如何保持正确的this指向，以便访问实例的所有成员。

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

使用Symbol实现

私有属性

const _radius = Symbol()
class Circle {
  constructor(radius) {
    this[_radius] = radius
  }
}
const c = new Circle(1)
const key = Object.getOwnPropertySymbols(c)[0]
console.log(c[key])

私有方法

const _radius = Symbol()
const _draw = Symbol()

class Circle {
  constructor(radius) {
    this[_radius] = radius
  }
  [_draw]() {
    console.log('draw')
  }
}
const c = new Circle(1)

使用weakMap实现

私有变量

const _radius = new WeakMap()

class Circle {
  constructor(radius) {
    _radius.set(this, radius)
  }
  draw() {
    console.log(_radius.get(this))
  }
}
const c = new Circle(1)

私有方法

const _radius = new WeakMap()
const _move = new WeakMap()

class Circle {
  constructor(radius) {
    _radius.set(this, radius)
    _move.set(this, function() {
      console.log('move', this)
    })
  }
  draw() {
    _move.get(this)()
    console.log('draw')
  }
}
const c = new Circle(1)

箭头函数会将this设置为包含他的函数，实现在私有方法中调用实例的所有成员

const _radius = new WeakMap()
const _move = new WeakMap()

class Circle {
  constructor(radius) {
    _radius.set(this, radius)
    _move.set(this, () => {
      console.log('move', this)
    })
  }
  draw() {
    _move.get(this)()
    console.log('draw')
  }
}
const c = new Circle(1)