Javascript Symbol 원리 및 사용 방법 분석

Symbol 은 ES6 에서 새로 도 입 된 기본 데이터 형식 입 니 다.그 전에 JavaScript 에는 몇 가지 기본 데이터 형식 이 있 었 습 니 다.

Numberg

String

Boolean

Null

Undefined

Object

다른 기본 유형 과 는 달리 알 기 쉬 운 심 볼 이 무엇 인지,무슨 소 용이 있 는 지 당 혹 스 러 웠 다.
Symbol 이 뭐야?
JavaScript 표준 에 규정된 대상 의 key 는 String 이나 Symbol 형식 일 수 있 으 며,String 형식의 key 는 중복 할 수 있 고 Symbol 형식의 key 는 유일한 것 과 구별 된다.Symbol 의 본질은 유일한 표 지 를 나타 내 는 것 이다.Symbol 을 만 들 때마다 대표 하 는 값 은 중복 되 지 않 습 니 다.이 값 의 내부 실현 은 하나의 숫자 로 볼 수 있 습 니 다(유사:342349883198771945..).그래서 이론 적 으로 Symbol 의 존 재 는 하나의 의미 만 있다.유일한 값 을 사용 해 야 하 는 장면 에 사용 된다.
Symbol 만 들 기
Number,String 등 기본 유형의 인 스 턴 스 를 만 드 는 데 는 두 가지 방법 이 있 습 니 다.구조 함수(또는 공장 함수)와 문자 문법 사탕 을 통 해.예 를 들 면:
//구조 함수
const num = Number(3);
const str = String('hi');
//문법 사탕
const num = 3;
const str = 'hi';
분명히 문법 사탕 을 사용 하 는 것 이 더욱 간결 하 다.그러나 Symbol 은 구조 함수 Symbol()을 통 해 만 들 수 있 습 니 다.const sym = Symbol();또는 이 Symbol 을 설명 하 는 문자열 인자(descriptor)를 입력 할 수 있 습 니 다.const sym = Symbol('cat');
메모:들 어 오 는 매개 변 수 는 Symbol 값 에 영향 을 주지 않 습 니 다.들 어 오 는 매개 변수 가 똑 같 더 라 도 생 성 된 Symbol 값 이 다 르 기 때 문 입 니 다.이 매개 변 수 는 debug 에서 Symbol 의 의 미 를 식별 할 수 있 도록 만 든 Symbol 을 설명 하 는 데 만 사 용 됩 니 다.따라서 다음 등식 결 과 는 false 입 니 다.
Symbol('cat') === Symbol('cat') // false
Symbol.for(key)
Symbol()과 유사 하 게 Symbol.for(key)도 Symbol 을 만 들 수 있 습 니 다.다른 것 은 만 든 Symbol 은 전역(전역 Symbol 표 에 등록)이 고 전역 에 같은 key 의 Symbol 이 존재 한다 면 이 Symbol 로 되 돌아 갑 니 다.따라서 다음 등식 결 과 는 true 입 니 다.Symbol.for('cat') === Symbol.for('cat') // trueSymbol 사용 방법
사실 Symbol 자 체 는 매우 간단 하지만 어떻게 그것 을 잘 사용 하고 적절하게 사용 하 는 지 는 사람 을 곤 혹 스 럽 게 한다.왜냐하면 평소에 일 할 때 Symbol 이 사용 하지 않 는 장면 이 별로 없 기 때문이다.하지만 Symbol 을 잘 사용 하면 코드 품질 이 많이 향상 될 것 입 니 다.다음 몇 가지 사례 를 살 펴 보 자.
1.대상 키 로 이름 충돌 방지
Symbol 을 Object 의 key 로 사용 하면 다른 key 와 중복 되 지 않 을 수 있 습 니 다.따라서 Symbol 은 대상 의 속성 을 확장 하 는 데 매우 적합 하 다.
예 를 들 어 String 을 대상 으로 하 는 key 를 사용 할 때 중복 되 는 key 가 나타 나 면 뒤의 속성 이 앞 을 덮어 씁 니 다.

const persons = {
 'bruce': 'wayne',
 'bruce': 'banner'
}

console.log(persons.bruce); // 'wayne'
  Symbol  Key        ：

const bruce1 = Symbol('bruce');
const bruce2 = Symbol('bruce');

const persons = {
 [bruce1]: 'wayne',
 [bruce2]: 'banner'
}

console.log(persons[bruce1]); // 'wayne'
console.log(persons[bruce2]); // 'banner'

js 의 많은 내부 건설 방법 은 Symbol 을 통 해 지 정 된 것 이다.예 를 들 어 Symobol.iterator 는 iterable 대상 의 교체 기 방법 을 지정 했다.Symbol.replace 는 대상 문자열 을 바 꾸 는 방법 을 지정 합 니 다.이러한 Symbol 은 Well-know Symbols 라 고 불 리 며 js 언어의 내부 행 위 를 대표 합 니 다.
2.Symbol 정의 매 거 진 사용
자 바스 크 립 트 는 매 거 진 형식 을 가지 고 있 지 않 기 때문에 일반적인 상황 에서 우 리 는 freezed Object 를 사용 하여 매 거 진 형식 을 모 의 합 니 다.예 를 들 어 날 짜 를 정의 하 는 매 거 진 형식 입 니 다.
const DAYS = Object.freeze({
monday: 1,
tuesday: 2,
wednesday: 3
});
이때 DAYS 의 매 거 진 값 을 받 아서 그날 할 일 을 되 돌려 주 는 방법 이 있 습 니 다.

function getTodo(day) {
 switch (day) {
  case DAYS.monday:
   return "   ";
  case DAYS.tuesday:
   return "  ";
  case DAYS.wednesday:
   return "  ";
  default:
   return "    ";
 }
}

우 리 는 코드 논리 가 충분 하고 들 어 오 는 매개 변 수 는 DAYS.monday 의 형식 에 엄 격 히 따 르 기 를 바 랍 니 다.그렇지 않 으 면 날짜 가 잘못 되 었 지만 이 매 거 진 유형의 실현 은 할 수 없습니다.예 를 들 어 getTodo(1)는 여전히'영화 보기'라 는 결 과 를 얻 을 수 있다.
그러나 Symbol 을 사용 하면 이 문 제 를 해결 할 수 있 습 니 다.DAYS 매 거 진 유형 은 다음 과 같이 다시 정의 할 수 있 습 니 다.
const DAYS = Object.freeze({
monday: Symbol('monday'),
tuesday: Symbol('tuesday'),
wednesday: Symbol('wednesday')
});
이 때 getTodo 방법 은 DAYS.monday 와 같은 매 거 진 값 을 매개 변수 로 받 아야 합 니 다.그렇지 않 으 면'날짜 오류'로 돌아 갑 니 다.세상 에 DAYS.monday 와 같은 값 이 하나 도 없 기 때 문 입 니 다.
이런 정 의 는 매 거 진 것 이 분명히 더욱 엄밀 해 졌 다.
3.메타 데 이 터 를 Symbol 로 저장 하기
Key 가 Symbol 형식의 속성 은 매 거 될 수 없습니다.이것 은 Symbol 이 유일 성 을 제외 한 두 번 째 특성 이기 때문에 for...in,Object.keys(),Object.hasOwnProperty()등 방법 으로 Symbol 속성 을 식별 할 수 없습니다.쉽게 말 하면 Symbol 속성 은 사용자 에 게'숨 김'입 니 다(그러나 private 가 아 닙 니 다.Symbol 속성 을 얻 을 수 있 는 다른 경로 가 있 기 때 문 입 니 다).예 를 들 어:

따라서 Symbol 은'숨 김'속성 으로 대상 의 메타 데 이 터 를 저장 할 수 있 습 니 다.예 를 들 어 TodoList 가 있 습 니 다.

class TodoList {
 constructor() {
  // todo  
  this.count = 0;
 }

 //   todo
 add(id, content) {
  this[id] = content;
  this.count++;
 }
}

const list = new TodoList();

우 리 는 add()방법 을 사용 하여 그 중 에 몇 개의 todo 를 추가 합 니 다.
list.add('a','영화 보기');
list.add('b','쇼핑');
list.add('c','헬 스');
우리 가 for...in 을 사용 하여 안에 있 는 모든 todo 를 보고 싶 을 때 count 속성 도 가 져 옵 니 다:

count 속성 을 숨 기 고 todo 를 더욱 편리 하 게 조작 하기 위해 Symbol 을 사용 하여 저장 할 수 있 습 니 다.TodoList 류 는 다음 과 같이 수정 할 수 있 습 니 다.
const count = Symbol('count');
class TodoList {
constructor() {
this[count] = 0;
}
add(id, content) {
this[id] = content;
this[count]++;
}
}
우리 가 TodoList 를 다시 옮 겨 다 닐 때 count 는 숨겨 집 니 다.

Symbol 에 저 장 된 원본 데 이 터 를 가 져 오 려 면 Object.getOWn Property Symbols()방법 을 사용 하 십시오.

이상 은 제 가 생각 할 수 있 는 Symbol 의 용도 입 니 다.다른 소감 이 있 으 시 면 보충 을 환영 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.