ES6 Symbol ,对象匿名(anonymous)属性实现

2019-07-13 admin

Symbol由来

Symbol是ES6引入的新类型,所以在ES5的基础上,JS就有了字符串(string)、数字型(number)、布尔(bool)、null、undefined和Symbol共六种基本类型(bigint ES2016 添加)。

In JavaScript, Symbol is a primitive value. Symbol是一种原始数据类型 什么是原始数据类型 A value having the data type “symbol” can be referred to as a “symbol value.” In the JavaScript run-time environment, a symbol value is created by invoking the function Symbol, which dynamically produces an anonymous, unique value. A symbol may be used as an object property. 具有Symbol数据类型的值被称为"Symbol"值。在JavaScript运行时环境中,通过调用函数Symbol创建Symbol值,该函数动态生成匿名唯一值。 Symbol can have an optional description, but for debugging purposes only. MDN Symbol 该数据类型通常被用作一个对象属性的键值——当你想让它是私有的时候。例如,symbol 类型的键存在于各种内置的 JavaScript 对象中。同样,自定义类也可以这样创建私有成员。symbol 数据类型具有非常明确的目的,并且因为其功能性单一的优点而突出;一个 symbol 实例可以被赋值到一个左值变量,还可以通过标识符检查类型,这就是它的全部特性。不能对该类型实例使用其他操作符(将“Symbol”类型的实例与 “Number” 类型的实例对比,例如整数 42,该实例就具有将值与其他类型的值进行比较或组合的运算符)。

创建和使用Symbol

Symbol值的唯一创建方法,是通过调用Symbol()函数来返回,不支持new操作。 Symbol接受一个可选参数,可以添加一段文本描述,但这段描述不可用于属性访问。

let firstName = Symbol("first name");
let persion = {};
person[firstName] = "Tom";
console.log("first name" in person); // false
console.log(persion[firstName]); // "Tom"
console.log(firstName); // "Symbol(first name)"

Symbol的描述被存储在内部的[[Description]]属性中,只有当调用Symbol的toString方法才可以读取这个属性,但不能直接在代码里访问[[Description]]。 所有使用计算属性名的地方,都可以使用Symbol。

let firstName = Symbol("first name");

let person = {
    [firstName] : "Tom" 
}

Object.defineProperty(person, firstName, { writable: false});

let lastName = Symbol("last name");

Object.defineProperties(person, {
    [lastName]: {
        value: 'Lee',
        writable: false
    }
});

console.log(person[firstName]); // Tome
console.log(person[lastName]); // Lee

const propertyNames = Object.getOwnPropertyNames(person);
console.log(propertyNames); // []

const propertySymbols = Object.getOwnPropertySymbols(person);

console.log(propertySymbols); // [Symbol(first name), Symbol(last name)]

共享体系

Symbol提供了一个全局注册表,用于在大文件或多文件代码中追踪Symbol值。 如果想创建一个可共享的Symbol,需要使用Symbol.for方法。它只接受一个参数,也就是即将创建的Symbol的字符串标识,这个参数也被用作Symbol的描述。

let uid = Symbol.for("uid");
let obj = {};
obj[uid] = "12345";
console.log(obj[uid]); // "12345"
console.log(uid); // "Symbol(uid)"
console.log(Symbol.forKey(uid)); // "uid"

Symbol.for方法首先在全局注册表中搜索键值为"uid"的Symbo值,如果存在,直接返回已有的Symbol,否则,创建一个新的Symbol,并使用这个键在Symbol全局注册表中注册,随即返回新创建的Symbol。

[转载]原文链接:https://segmentfault.com/a/1190000019751153

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69678.html

文章标题:ES6 Symbol ,对象匿名(anonymous)属性实现

相关文章
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: <form id="form" method="post" action="http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, ...
2017-03-20
JavaScript对象反射
JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。 在JavaScript中没有完...
2015-11-12
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
回到顶部