当前位置:首页 > JavaScript

js实现symbol

2026-02-01 06:07:45JavaScript

Symbol 的基本概念

Symbol 是 ECMAScript 6 引入的一种新的原始数据类型,表示独一无二的值。Symbol 值通过 Symbol() 函数生成,每个 Symbol 值都是唯一的,即使传入相同的描述符。

const sym1 = Symbol('foo');
const sym2 = Symbol('foo');
console.log(sym1 === sym2); // false

创建 Symbol

使用 Symbol() 函数创建 Symbol 值,可以传入一个可选的字符串作为描述符,主要用于调试。

const sym = Symbol('description');
console.log(sym); // Symbol(description)

Symbol 作为对象属性

Symbol 值可以作为对象的属性名,避免属性名冲突。使用方括号语法定义和访问 Symbol 属性。

js实现symbol

const obj = {};
const sym = Symbol('key');
obj[sym] = 'value';
console.log(obj[sym]); // value

遍历 Symbol 属性

Symbol 属性不会出现在 for...inObject.keys()Object.getOwnPropertyNames() 中。需要使用 Object.getOwnPropertySymbols() 获取对象的 Symbol 属性。

const obj = {};
const sym = Symbol('key');
obj[sym] = 'value';

console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(key)]

全局 Symbol 注册表

通过 Symbol.for() 可以在全局 Symbol 注册表中创建或重用 Symbol。传入相同的键会返回相同的 Symbol 值。

js实现symbol

const sym1 = Symbol.for('foo');
const sym2 = Symbol.for('foo');
console.log(sym1 === sym2); // true

使用 Symbol.keyFor() 可以获取全局 Symbol 的描述符。

const sym = Symbol.for('foo');
console.log(Symbol.keyFor(sym)); // foo

内置 Symbol 值

JavaScript 提供了一些内置的 Symbol 值,用于控制对象的某些行为。例如:

  • Symbol.iterator: 定义对象的默认迭代器。
  • Symbol.toStringTag: 定义对象的 toString 行为。
const obj = {
  [Symbol.toStringTag]: 'MyObject'
};
console.log(obj.toString()); // [object MyObject]

Symbol 的应用场景

  • 避免属性名冲突:在扩展对象时,使用 Symbol 可以避免覆盖已有属性。
  • 定义私有属性:Symbol 属性不会被常规方法遍历,可以模拟私有属性。
  • 实现协议:通过内置 Symbol 值实现自定义行为,如迭代协议。
class MyClass {
  constructor() {
    this[Symbol('private')] = 'secret';
  }
}

const instance = new MyClass();
console.log(Object.getOwnPropertySymbols(instance)); // [Symbol(private)]

标签: jssymbol
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…