構成部品の形状

📢 22/03/13復習

📚 Reference

javascript.info, https://ko.javascript.info/symbol
simon's study, https://velog.io/@simoniful/JS-13-Symbol-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0
注意:これは個人がサイトで復習しやすいように再編成された文章です.
詳細については、リファレンスサイトにアクセスしてください.

構成部品

シンボル(シンボル)は、一意の識別子(一意の識別子)を作成するために使用します.Symbol()を使用して構成部品値を作成できます.

// id는 새로운 심볼이 됩니다.
let id = Symbol();

構成部品を作成するときに、構成部品名という説明を追加することもできます.構成部品名は、デバッグ時に便利です.

// 심볼 id에는 "id"라는 설명이 붙습니다.
let id = Symbol("id");

構成部品は一意のデータ型であるため、同じ説明の構成部品を複数作成しても、構成部品ごとに値が異なります.構成部品に貼り付けられた説明(構成部品名)は、内容に影響を与えないラベルとしてのみ機能します.
同じ説明の2つの構成部品を作成し、比較してみましょう.同じ演算子(==)を使用して比較すると、falseが返されます.

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

🔥 構成部品は自動的に文字形式に変換されません.
JavaScriptでは、暗黙的な文字フォーマットへの変換は比較的自由です.これは、alert関数がパラメータとしてほとんどすべての値を受け入れることができる理由です.ただし、構成部品は除外されます.構成部品シェイプの値は、暗黙的に他のデータ型に変換(自動変換)されません.

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

文字列と要素が根本的に異なるため、偶然にお互いのタイプに変換することはできません.JavaScriptでは、構成部品が他のタイプに変換されないように言語保護(language guard)が提供されます.
構成部品を出力する必要がある場合は、次のように.toString()メソッドを明示的に呼び出します.

let id = Symbol("id");
alert(id.toString()); // Symbol(id)가 얼럿 창에 출력됨

symbol.descriptionのパーセントを使用して、説明のみを表示できます.

let id = Symbol("id");
alert(id.description); // id

隠し番組

構成部品を使用して、非表示プロファイルを作成します.非表示プロパティは、外部コードからアクセスできず、値を上書きできないプロパティです.userという名前のオブジェクトがサードパーティコードから複数存在し、userを使用していくつかの操作が必要であると仮定する.userに識別子を貼りましょう.
構成部品を使用して識別子を作成します.

let user = { // 서드파티 코드에서 가져온 객체
  name: "John"
};

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // 심볼을 키로 사용해 데이터에 접근할 수 있습니다.

しかし、文字列"id"を鍵として使用できるのは、なぜSymbol("id")を使用するのでしょうか.userはサードパーティコードからインポートされたオブジェクトであり、新しいアイテムを勝手に追加することはできません.ただし、素子はサードパーティコードからアクセスできないため、当該素子を使用する際に知らないうちにサードパーティコードにuser識別子を付与することができる.
もう一つの状況を仮定する.3番目のスクリプト(JavaScriptライブラリなど)では、userを認識する必要があります.userのソースコードはサードパーティコードであり、現在作成中のスクリプトとサードパーティスクリプトは互いのコードを知らないため、userを識別する必要がある.
3番目のスクリプトでは、次のSymbol("id")を使用して専用識別子を作成できます.

// ...
let id = Symbol("id");

user[id] = "제3 스크립트 id 값";

構成部品は一意であるため、作成した識別子は3番目のスクリプトで作成した識別子と競合しません.名前が同じでも.
構成部品ではなく文字列"id"を使用して識別子を作成すると、競合が発生する可能性があります.

let user = { name: "John" };

// 문자열 "id"를 사용해 식별자를 만들었습니다.
user.id = "스크립트 id 값";

// 만약 제3의 스크립트가 우리 스크립트와 동일하게 문자열 "id"를 이용해 식별자를 만들었다면...

user.id = "제3 스크립트 id 값"
// 의도치 않게 값이 덮어 쓰여서 우리가 만든 식별자는 무의미해집니다.

Symbols in a literal

オブジェクトテキスト{...}を使用してオブジェクトを作成する場合は、四角カッコを使用して構成部品キーを作成する必要があります.

let id = Symbol("id");

let user = {
  name: "John",
  [id]: 123 // "id": 123은 안됨
};

"id: 123"の場合、文字列idは、要素"id"ではなくキーとなる.

コンポーネントはfor...から除外

キーワードが構成部品であるPropertyは、for..inの繰り返し文に含まれません.

let id = Symbol("id");
let user = {
  name: "John",
  age: 30,
  [id]: 123
};

for (let key in user) alert(key); // name과 age만 출력되고, 심볼은 출력되지 않습니다.

// 심볼로 직접 접근하면 잘 작동합니다.
alert( "직접 접근한 값: " + user[id] );

Object.keys(user)には、鍵を有するPropertyは含まれない.このような「シンボル属性の非表示」と呼ばれる原則は、外部スクリプトまたはライブラリが素子鍵を持つプログラムにアクセスできないようにします.
ただし、Object.assignは、鍵が構成部品であるPropertyを排除することなく、オブジェクト内のすべてのPropertyをコピーします.

let id = Symbol("id");
let user = {
  [id]: 123
};

let clone = Object.assign({}, user);

alert( clone[id] ); // 123

矛盾しているように見えますが、これは意図的に設計されています.オブジェクトのコピーまたはマージには、通常、idなどの要素を含むすべてのプログラムを使用する必要があります.

グローバル構成部品

前述したように、構成部品に同じ名前がある場合は、独立したものとみなされます.ただし、同じ名前の構成部品が同じオブジェクトを指す場合があります.アプリケーションは、構成部品"id"を使用して特定のプログラムにアクセスする必要があるとします.
グローバルコンポーネントレジストリ(global symbol registry)は、このような状況のために作成されます.グローバル構成部品レジストリに構成部品を作成してアクセスすると、同じ名前の場合は常に同じ構成部品が返されます.
レジストリの構成部品を読み込むか、新しい構成部品を作成するには、Symbol.for(key)を使用します.
このメソッドを呼び出すと、keyという名前の構成部品が返されます.条件を満たす構成部品がレジストリにない場合、新しい構成部品Symbol(key)が作成され、レジストリに保存されます.

// 전역 레지스트리에서 심볼을 읽습니다.
let id = Symbol.for("id"); // 심볼이 존재하지 않으면 새로운 심볼을 만듭니다.

// 동일한 이름을 이용해 심볼을 다시 읽습니다(좀 더 멀리 떨어진 코드에서도 가능합니다).
let idAgain = Symbol.for("id");

// 두 심볼은 같습니다.
alert( id === idAgain ); // true

グローバル構成部品レジストリの構成部品をグローバル構成部品と呼びます.アプリケーションでこれらの構成部品を大量に使用する必要がある場合は、グローバル構成部品を使用します.

Symbol.keyFor

一部の方法は、グローバル構成部品を検索する際に使用されるSymbol.for(key)とは逆である.Symbol.keyFor(sym)を使用して名前を取得します.

// 이름을 이용해 심볼을 찾음
let sym = Symbol.for("name");
let sym2 = Symbol.for("id");

// 심볼을 이용해 이름을 얻음
alert( Symbol.keyFor(sym) ); // name
alert( Symbol.keyFor(sym2) ); // id

Symbol.keyForは、グローバル構成部品レジストリを検索することによって構成部品の名前を取得する.検索範囲はグローバル構成部品レジストリなので、非グローバル構成部品では使用できません.パラメータがグローバル要素でない場合、Symbol.keyForはundefinedを返します.
すべての非グローバル構成部品はdescriptionパーセントである.通常の構成部品から名前を取得するには、descriptionのパーセントを使用します.

let globalSymbol = Symbol.for("name");
let localSymbol = Symbol("name");

alert( Symbol.keyFor(globalSymbol) ); // name, 전역 심볼
alert( Symbol.keyFor(localSymbol) ); // undefined, 전역 심볼이 아님

alert( localSymbol.description ); // name

システム構成部品

「システムシンボル」は、JavaScriptで使用される構成部品です.システム構成部品では、オブジェクトを微調整できます.
リストの表と既知の記号のシステム構成部品を参照してください.
📌 Symbol.hasInstance📌 Symbol.isConcatSpreadable📌 Symbol.iterator📌 Symbol.toPrimitive📌 ...

Well Known Symbol

Well Known Symbolとは、アルゴリズムに名前を付けて参照するシステム構成部品の値です.@@は、Well Known Symbolを表す記号である.@@matchとSymbol.matchは同一形態であり,specでは@@match形態,開発者ではSymbol.match形態を用いた.match()メソッドを実行すると、デバッガを使用して@@matchが実行されます.ソースコードにSymbol.matchが作成された場合、@@matchは実行されず、Symbol.matchが最初に実行されます.
例えば、String.prototype.matchが呼び出されると、まず開発者コードでSymbol.matchが検索される.成功した場合は、この関数を実行します.ただし、見つからない場合は、デバッガ@@matchを実行します.
従来、Symbol.XXXXは単独で提供されていなかったため、エンジンは直ちに@@XXXXアルゴリズムを呼び出した.ただし、開発者が使用できるようになりました(変更、追加).開発者コードを使用してデバッガ機能を上書きできます.

ここにはSymbol項目が開発者が作成したコードです.対応する部分の関数およびアルゴリズムが実行される場合、まずSymbolエントリで関連コンテンツが上書きされると、このコードが実行され、そうでない場合、エンジンのデフォルトアルゴリズムが呼び出される.