Symbol 基础

// 两个库都想给对象添加 id 属性
const obj = {}
library1.addId(obj) // obj.id = 'lib1-123'
library2.addId(obj) // obj.id = 'lib2-456'（覆盖了！）

// 使用 Symbol 可以避免冲突
const id1 = Symbol('id')
const id2 = Symbol('id')
obj[id1] = 'lib1-123'
obj[id2] = 'lib2-456'
// 两个属性互不影响

const sym1 = Symbol()
const sym2 = Symbol()
console.log(sym1 === sym2) // false（每个 Symbol 都是唯一的）

// 带描述符
const sym3 = Symbol('description')
console.log(sym3.toString()) // 'Symbol(description)'
console.log(sym3.description) // 'description'

// new Symbol(); // TypeError: Symbol is not a constructor

const sym1 = Symbol('id')
const sym2 = Symbol('id')
console.log(sym1 === sym2) // false（即使描述符相同）

const ID = Symbol('id')
const NAME = Symbol('name')

// 方式1：对象字面量
const user = {
  [ID]: 1,
  [NAME]: '张三',
  age: 25,
}

// 方式2：点号不行，必须用方括号
user[ID] // 1
// user.ID; // undefined（这是访问字符串键 'ID'）

// 方式3：Object.defineProperty
Object.defineProperty(user, Symbol('email'), {
  value: 'test@test.com',
})

const ID = Symbol('id')
const user = {
  [ID]: 1,
  name: '张三',
  age: 25,
}

// for...in 不会遍历 Symbol 属性
for (const key in user) {
  console.log(key) // 'name', 'age'（没有 Symbol）
}

// Object.keys 也不包含
Object.keys(user) // ['name', 'age']

// Object.getOwnPropertyNames 也不包含
Object.getOwnPropertyNames(user) // ['name', 'age']

// 需要使用专门的方法
Object.getOwnPropertySymbols(user) // [Symbol(id)]

// 或者 Reflect.ownKeys 获取所有键
Reflect.ownKeys(user) // ['name', 'age', Symbol(id)]

const _count = Symbol('count')
const _increment = Symbol('increment')

class Counter {
  constructor() {
    this[_count] = 0
  }

  [_increment]() {
    this[_count]++
  }

  tick() {
    this[_increment]()
  }

  get value() {
    return this[_count]
  }
}

const counter = new Counter()
counter.tick()
counter.tick()
console.log(counter.value) // 2
console.log(counter[_count]) // 如果能访问到 Symbol，仍然可以读取
// 但外部代码通常无法获取这个 Symbol

// 框架定义的属性
const INTERNAL = Symbol('internal')

function createComponent(options) {
  const component = {
    ...options,
    [INTERNAL]: {
      mounted: false,
      listeners: [],
    },
  }
  return component
}

// 用户不会意外覆盖内部属性
const comp = createComponent({
  name: 'MyComponent',
  internal: 'user data', // 不会与 INTERNAL 冲突
})

// 传统方式可能会冲突
const STATUS_PENDING = 'pending'
const STATUS_SUCCESS = 'success'
const STATUS_ERROR = 'error'

// 如果其他地方也定义了 'pending'，比较时会相等

// 使用 Symbol 确保唯一
const STATUS = {
  PENDING: Symbol('pending'),
  SUCCESS: Symbol('success'),
  ERROR: Symbol('error'),
}

function handleStatus(status) {
  switch (status) {
    case STATUS.PENDING:
      return '处理中...'
    case STATUS.SUCCESS:
      return '成功'
    case STATUS.ERROR:
      return '错误'
    default:
      throw new Error('未知状态')
  }
}

// 魔术字符串
function getArea(shape, options) {
  switch (shape) {
    case 'circle': // 魔术字符串
      return Math.PI * options.radius ** 2
    case 'rectangle':
      return options.width * options.height
  }
}

// 使用 Symbol
const SHAPES = {
  CIRCLE: Symbol('circle'),
  RECTANGLE: Symbol('rectangle'),
}

function getArea(shape, options) {
  switch (shape) {
    case SHAPES.CIRCLE:
      return Math.PI * options.radius ** 2
    case SHAPES.RECTANGLE:
      return options.width * options.height
  }
}

getArea(SHAPES.CIRCLE, { radius: 5 })

const sym = Symbol('foo')

String(sym) // 'Symbol(foo)'
sym.toString() // 'Symbol(foo)'

// 不能隐式转换
// 'symbol: ' + sym; // TypeError
// `symbol: ${sym}`; // TypeError

// 必须显式转换
;`symbol: ${String(sym)}` // 'symbol: Symbol(foo)'
;`symbol: ${sym.toString()}` // 'symbol: Symbol(foo)'

const sym = Symbol()
Boolean(sym) // true
!sym // false

if (sym) {
  console.log('Symbol 是真值')
}

const sym = Symbol()
// Number(sym); // TypeError
// sym + 1; // TypeError

const ID = Symbol('id')
const user = {
  [ID]: 1,
  name: '张三',
}

JSON.stringify(user) // '{"name":"张三"}'（没有 Symbol 属性）

class Counter {
  #count = 0 // 真正的私有属性

  increment() {
    this.#count++
  }
}