inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

모던 자바스크립트(ES6+) 기본

Symbol.species 질문입니다.

해결된 질문

420

김종성

작성한 질문수 1

0

안녕하세요 강사님! 강의 너무 재밌게 잘 보고 있습니다.

Symbol.species 강의를 듣다가 조금 이해가 안되는 부분이 있어서 문의 드립니다.

class Sports extends Array {

   static get [Symbol.species]() {

       return Array;

   }
}

const one = new Sports(10,20,30);

const two  = one.slice(1,2);

여기서 one에는 class Sports의 인스턴스를 생성하여 one에 전달하는데 Array를 상속받아 slice를 사용할 수 있고,

이후 two에는 slice()의 결과값만 대입하는 것이 아닌, constructor가 없더라도 @@species가 동작되어 인스턴스를 반환하지만 static get [Symbol.species]를 작성하였기에,  오버라이딩되어 반환값을 Array Object로 생성한 인스턴스를 반환했다고 이해했습니다.

그래서 one의 경우 Array를 상속받은 class Sports로 생성하여 

log(one instanseOf Array)  // true

log(one instanseOf Sports) // true

로 확인됩니다. Sports Class로 생성된 인스턴스 이며, Array Obeject의 prototype을 상속받았기 때문에 위 결과가 나온것으로 판단됩니다.

이후 two의 경우

log(two instanseOf Array) // true

log(two instanseOf Sports)// false

one은 생성된 인스턴스로 prototype이 없지만, slice()는 결과값만 전달하는 것이아닌 @@specise의 결과로 인스턴스를 생성하여 반환하는것인데, one 인스턴스에서 [Symbol.species]를 작성하였기 때문에 오버라이딩 되어 Array Object의 인스턴스로 생성된 값을 반환 받은것으로 이해했습니다. 그래서 two의 결과로 Array는 true, Sports는 false로 나온것이구요,

여기서 질문은

[Symbol.species]를 제외하여 오버라이딩 하지않은 class Sports extends Array {}; 로 변경하여 테스트한 경우

one instanseOf Array, one instanseOf Sports

two instanseOf Array, two instanseOf Sports의 결과로 one, two 모두 true더군요, 

[Symbol.specise] 작성 시 : Array Object의 인스턴스를 생성하여 반환

[Symbol.specise] 미 작성 시 : 오버라이딩 하지않고 defalut로 @@species가 동작 (class Sports extends Array로 생성한 인스턴스 반환)

위의 설명이 맞다면 기존에 오버라이딩 코드를 작성한 코드에서 const one = new Sports(10, 20)으로  인스턴스를 생성할때는 Symbol.species가 동작되지 않는건가요? 

one.slice의 결과값을 담을 인스턴스를 생성할때에만 Symbol.species가 동작되는 것인가요? 

위 글에서 질문외에 제가 이해한 부분 중 틀린부분이 있다면 번거러우시겠지만 설명 부탁드립니다ㅜ

es6 javascript

답변 1

1

김영보

위의 설명이 맞다면 기존에 오버라이딩 코드를 작성한 코드에서 const one = new Sports(10, 20)으로  인스턴스를 생성할때는 Symbol.species가 동작되지 않는건가요? 

==> 맞습니다. 아래처럼 debugger를 작성하고 실행해 보면 알 수 있습니다.
new Sports(10, 20, 30)을 하면 Sports.prototype.constructor를 호출하여 prototype으로 인스턴스를 생성합니다. Symbol.species를 체크하지 않습니다.
debugger;
class Sports extends Array{...}

one.slice의 결과값을 담을 인스턴스를 생성할때에만 Symbol.species가 동작되는 것인가요?
==> 맞습니다.

prototype의 메소드 내부에 화살표 함수가 작성된 경우

1

229

0

let 변수 호이스팅

0

381

1

[정리시간]부족하지만...

3

238

0

[제네레이터함수, yield를 활용한 무한 덧셈] 식, result += yield result를 어떻게 이해 해야할까요???

0

408

1

자바스크립트도 컴파일을 하나요?

0

626

1

틀린부분 질문드립니다

0

304

1

clear() 메소드 관련 질문

0

250

0

실행 시점

0

162

0

yield에 대해 질문이 있습니다.

0

302

2

window 오브젝트에서의 함수표현식 호출

0

279

1

Unicode 관련 정리

2

226

1

화살표 함수의 this 의 정적 스코프 참조 부분 질문드립니다.

0

205

1

선생님께서 ES5 심화과정에서 알려주신 event 처리 방법 나이스입니다!

1

214

1

안녕하세요.선생님 질문이 생겨서 글남깁니다.

0

201

1

안녕하세요.선생님 질문 있습니다.

1

262

2

Array.from()이랑 Array.of()랑 설명이 뒤바뀐 것 같아요..

0

177

1

Arrow Function 에서 Scope 관련 질문이 있습니다.

1

298

5

setPrototypeOf() 는 정의에 대해 헷갈린 점 질문 드립니다.

5

234

1

[강의자입니다] 브라우저 디버거 창의 오른쪽에 let, const 변수 표시

5

289

0

디버깅 맨 처음부터 Script에 globalLet이 설정되어있습니다.

1

243

1

강의 pdf 파일 공개 부탁드립니다

0

170

1

아 전역에 let을 선언해도 순서대로 읽는군요;;

2

240

1

글의 정리가 안되어있어 삭제했습니다.

0

162

1

DevTools > Sources 에서 Block을 볼 수 없어요!

0

277

4