What is the use of the Symbol type in JavaScript?

This article brings you what is the use of the Symbol type in JavaScript? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Symbols is a new data type introduced in ES6, which brings some benefits to JS, especially when it comes to object properties. But what can they do for us that strings can’t?

Before we dive into Symbols, let’s take a look at some JavaScript features that many developers may not be aware of.

Background

The data types in js are generally divided into two types, they are: value type and reference type

Value type (basic type): numeric type (Number), character type (String), Boolean type (Boolean), null and underfined reference types (classes): functions, objects, arrays, etc.

Value type understanding: mutual assignment between variables, is Refers to opening up a new memory space, assigning variable values ​​​​to the new variables and saving them in the newly opened memory; subsequent changes in the values ​​​​of the two variables will not affect each other, for example:

var a=10; //开辟一块内存空间保存变量a的值“10”；
var b=a; //给变量 b 开辟一块新的内存空间，将 a 的值 “10” 赋值一份保存到新的内存里；
//a 和 b 的值以后无论如何变化，都不会影响到对方的值；

Some languages, such as C, have The concept of passing by reference and passing by value. JavaScript has a similar concept, where it is inferred based on the type of data passed. If a value is passed to a function, reassigning the value does not modify the value in the calling location. However, if you modify a reference type, the modified value will also be modified where it is called.

Understanding of reference types: Mutual assignment between variables is just an exchange of pointers, rather than copying an object (ordinary object, function object, array object) to a new variable. There is still only one object, but there is just one more guide~~; for example:

var a={x:1,y:2} //需要开辟内存空间保存对象，变量 a 的值是一个地址，这个地址指向保存对象的空间；
var b=a; // 将a 的指引地址赋值给 b，而并非复制一给对象且新开一块内存空间来保存；
// 这个时候通过 a 来修改对象的属性，则通过 b 来查看属性时对象属性已经发生改变；

A value type (except for the mysterious NaN value) will always be exactly equal to another value type with the same value, as follows:

const first = "abc" + "def";
const second = "ab" + "cd" + "ef";
console.log(first === second); // true

But reference types with the same structure are not equal:

const obj1 = { name: "Intrinsic" };
const obj2 = { name: "Intrinsic" };
console.log(obj1 === obj2); // false
// 但是，它们的 .name 属性是基本类型:
console.log(obj1.name === obj2.name); // true

Objects play an important role in the JavaScript language, and their use is everywhere. Objects are often used as collections of key/value pairs, however, there is a big limitation in using them in this way: before the advent of symbol, object keys could only be strings, and if you tried to use non-character If the string value is used as the key of the object, then the value will be coerced into a string, as follows:

const obj = {};
obj.foo = 'foo';
obj['bar'] = 'bar';
obj[2] = 2;
obj[{}] = 'someobj';
console.log(obj);
// { '2': 2, foo: 'foo', bar: 'bar',
     '[object Object]': 'someobj' }

What is Symbol

Symbol() The function will return the symbol type The value of this type has static properties and static methods. Its static properties expose several built-in member objects; its static methods expose global symbol registration and are similar to built-in object classes, but as a constructor it is incomplete because it does not support the syntax: "new Symbol()". So the values ​​generated using Symbol are not equal:

const s1 = Symbol();
const s2 = Symbol();
console.log(s1 === s2); // false

When instantiating symbol, there is an optional first parameter for which you can optionally provide a string. This value is intended to be used for debugging code, otherwise it won't really affect the symbol itself.

const s1 = Symbol('debug');
const str = 'debug';
const s2 = Symbol('xxyy');
console.log(s1 === str); // false
console.log(s1 === s2); // false
console.log(s1); // Symbol(debug)

symbol as object attributes

symbols have another important use, they can be used as keys in objects, as follows:

const obj = {};
const sym = Symbol();
obj[sym] = 'foo';
obj.bar = 'bar';
console.log(obj); // { bar: 'bar' }
console.log(sym in obj); // true
console.log(obj[sym]); // foo
console.log(Object.keys(obj)); // ['bar']

At first glance, this looks like Just like you can create private properties on an object using symbol, many other programming languages ​​have their own private properties in their classes, and the omission of private properties has always been considered a shortcoming of JavaScript.

Unfortunately, code that interacts with the object can still access its properties whose keys are symbols. This is even possible in cases where the calling code does not yet have access to the symbol itself. For example, the Reflect.ownKeys() method can get a list of all keys on the object, including strings and symbols:

function tryToAddPrivate(o) {
  o[Symbol('Pseudo Private')] = 42;
}
const obj = { prop: 'hello' };
tryToAddPrivate(obj);
console.log(Reflect.ownKeys(obj));
// [ 'prop', Symbol(Pseudo Private) ]
console.log(obj[Reflect.ownKeys(obj)[1]]); // 42

Note: There is currently some work being done to handle adding classes to classes in JavaScript. Issues with adding private properties. The name of this feature is called Private Fields, and while this won't benefit all objects, it will benefit objects that are instances of the class. Private fields are available starting in Chrome 74.

Preventing property name conflicts

symbols may not directly benefit from JavaScript providing private properties for objects. However, they are beneficial for another reason. They are useful when different libraries want to add properties to an object without the risk of name conflicts.

Symbol It is a bit difficult to provide private properties for JavaScript objects, but Symbol has another benefit, which is to avoid the risk of naming conflicts when different libraries add properties to the object.

Consider a situation where two different libraries want to add basic data to an object. Perhaps they both want to set some kind of identifier on the object. By simply using id as the key, there is a huge risk that multiple libraries will use the same key.

function lib1tag(obj) {
  obj.id = 42;
}
function lib2tag(obj) {
  obj.id = 369;
}

By using Symbol, each library can generate the required Symbol when instantiated. Then use the value of the generated Symbol as a property of the object:

const library1property = Symbol('lib1');
function lib1tag(obj) {
  obj[library1property] = 42;
}
const library2property = Symbol('lib2');
function lib2tag(obj) {
  obj[library2property] = 369;
}

For this reason, Symbol does seem to be beneficial to JavaScript.

But, you may ask, why can't each library simply generate a random string or use a namespace when instantiated?

const library1property = uuid(); // random approach
function lib1tag(obj) {
  obj[library1property] = 42;
}
const library2property = 'LIB2-NAMESPACE-id'; // namespaced approach
function lib2tag(obj) {
  obj[library2property] = 369;
}

这种方法是没错的，这种方法实际上与 Symbol 的方法非常相似,除非两个库选择使用相同的属性名，否则不会有冲突的风险。

在这一点上，聪明的读者会指出，这两种方法并不完全相同。我们使用唯一名称的属性名仍然有一个缺点:它们的键非常容易找到，特别是当运行代码来迭代键或序列化对象时。考虑下面的例子:

const library2property = 'LIB2-NAMESPACE-id'; // namespaced
function lib2tag(obj) {
  obj[library2property] = 369;
}
const user = {
  name: 'Thomas Hunter II',
  age: 32
};
lib2tag(user);
JSON.stringify(user);
// '{"name":"Thomas Hunter II","age":32,"LIB2-NAMESPACE-id":369}'

如果我们为对象的属性名使用了 Symbol，那么 JSON 输出将不包含它的值。这是为什么呢? 虽然 JavaScript 获得了对 Symbol 的支持，但这并不意味着 JSON 规范已经改变! JSON 只允许字符串作为键，JavaScript 不会尝试在最终 JSON 有效负载中表示 Symbol 属性。

const library2property = 'f468c902-26ed-4b2e-81d6-5775ae7eec5d'; // namespaced approach
function lib2tag(obj) {
  Object.defineProperty(obj, library2property, {
    enumerable: false,
    value: 369
  });
}
const user = {
  name: 'Thomas Hunter II',
  age: 32
};
lib2tag(user);
console.log(user); // {name: "Thomas Hunter II", age: 32, f468c902-26ed-4b2e-81d6-5775ae7eec5d: 369}
console.log(JSON.stringify(user)); // {"name":"Thomas Hunter II","age":32}
console.log(user[library2property]); // 369

通过将 enumerable 属性设置为 false 而“隐藏”的字符串键的行为非常类似于 Symbol 键。它们通过 Object.keys() 遍历也看不到，但可以通过 Reflect.ownKeys() 显示，如下的示例所示:

const obj = {};
obj[Symbol()] = 1;
Object.defineProperty(obj, 'foo', {
  enumberable: false,
  value: 2
});
console.log(Object.keys(obj)); // []
console.log(Reflect.ownKeys(obj)); // [ 'foo', Symbol() ]
console.log(JSON.stringify(obj)); // {}

在这点上，我们几乎重新创建了 Symbol。隐藏的字符串属性和 Symbol 都对序列化器隐藏。这两个属性都可以使用Reflect.ownKeys()方法读取，因此它们实际上不是私有的。假设我们为属性名的字符串版本使用某种名称空间/随机值，那么我们就消除了多个库意外发生名称冲突的风险。

但是，仍然有一个微小的区别。由于字符串是不可变的，而且 Symbol 总是保证惟一的，所以仍然有可能生成字符串组合会产生冲突。从数学上讲，这意味着 Symbol 确实提供了我们无法从字符串中得到的好处。

在 Node.js 中，检查对象时(例如使用 console.log() )，如果遇到名为 inspect 的对象上的方法，将调用该函数，并将打印内容。可以想象，这种行为并不是每个人都期望的，通常命名为 inspect 的方法经常与用户创建的对象发生冲突。

现在 Symbol 可用来实现这个功能，并且可以在 equire('util').inspect.custom 中使用。inspect 方法在Node.js v10 中被废弃，在 v1 1中完全被忽略, 现在没有人会偶然改变检查的行为。

模拟私有属性

这里有一个有趣的方法，我们可以用来模拟对象上的私有属性。这种方法将利用另一个 JavaScript 特性: proxy（代理）。代理本质上封装了一个对象，并允许我们对与该对象的各种操作进行干预。

代理提供了许多方法来拦截在对象上执行的操作。我们可以使用代理来说明我们的对象上可用的属性，在这种情况下，我们将制作一个隐藏我们两个已知隐藏属性的代理，一个是字符串 _favColor，另一个是分配给 favBook 的 S ymbol ：

let proxy;

{
  const favBook = Symbol('fav book');

  const obj = {
    name: 'Thomas Hunter II',
    age: 32,
    _favColor: 'blue',
    [favBook]: 'Metro 2033',
    [Symbol('visible')]: 'foo'
  };

  const handler = {
    ownKeys: (target) => {
      const reportedKeys = [];
      const actualKeys = Reflect.ownKeys(target);

      for (const key of actualKeys) {
        if (key === favBook || key === '_favColor') {
          continue;
        }
        reportedKeys.push(key);
      }

      return reportedKeys;
    }
  };

  proxy = new Proxy(obj, handler);
}

console.log(Object.keys(proxy)); // [ 'name', 'age' ]
console.log(Reflect.ownKeys(proxy)); // [ 'name', 'age', Symbol(visible) ]
console.log(Object.getOwnPropertyNames(proxy)); // [ 'name', 'age' ]
console.log(Object.getOwnPropertySymbols(proxy)); // [Symbol(visible)]
console.log(proxy._favColor); // 'blue'

使用 _favColor 字符串很简单：只需阅读库的源代码即可。 另外，通过蛮力找到动态键(例如前面的 uuid 示例)。但是，如果没有对 Symbol 的直接引用，任何人都不能 从proxy  对象访问'Metro 2033'值。

Node.js警告：Node.js中有一个功能会破坏代理的隐私。 JavaScript语 言本身不存在此功能，并且不适用于其他情况，例 如Web 浏览器。 它允许在给定代理时获得对底层对象的访问权。 以下是使用此功能打破上述私有属性示例的示例：

const [originalObject] = process
  .binding('util')
  .getProxyDetails(proxy);
const allKeys = Reflect.ownKeys(originalObject);
console.log(allKeys[3]); // Symbol(fav book)

现在，我们需要修改全局 Reflect 对象，或者修改 util 流程绑定，以防止它们在特定的 Node.js 实例中使用。但这是一个可怕的兔子洞。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！

The above is the detailed content of What is the use of the Symbol type in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!