⭐ 자바스크립트 프로토타입과 상속
-
자바스크립트의 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖으며 이 프로퍼티는 null이거나 다른 객체로부터 상속된 속성과 메서드를 제공, 다른 객체를 참조하는 경우 참조 대상은 프로토타입이라고 부름 즉, [[Prototype]]이 참조하는 객체를 프로토타입이라고 함
-
객체에서 프로퍼티를 읽거나 메서드를 호출하려는데 해당 프로퍼티가 없으면 자바스크립트는 자동으로 프로토타입에서 프로퍼티나 메서드를 찾고, 찾을 때까지 프로토타입 체인을 거슬러 올라가 찾음 이러한 방식을 프로토타입 상속이라고 부름
-
__proto__는 [[Prototype]]용 getter, setter인데 요즘엔 잘 사용하지 않음
-
프로토타입은 객체 생성자 함수와 함께 사용, 생성자 함수의 프로토타입 객체에 추가된 속성과 메서드는 해당 생성자 함수로 생성된 모든 객체에서 공유됨, 이는 메모리 효율성과 객체 간의 상속 구조를 구현하는 데 도움을 줌
-
프로토타입에서 상속받은 method라도 이름.method를 호출하면 method안의 this는 호출 대상 객체인 이름을 가리킴
⭐ 생성자 함수 (Constructor)와 new
-
객체 리터럴 { ... } 을 사용하면 객체를 쉽게 만들 수 있지만 유사한 객체를 여러개 만들 때 new 연산자와 생성자 함수를 사용해서 유사한 객체를 여러 개 쉽게 만들 수 있음
-
생성자 함수의 관례
-- 함수 이름의 첫 글자는 대문자
-- 반드시 new 연산자를 활용 -
생성자 함수는 new 연산자와 함께 호출돼야 하고 new 연산자와 호출하면 내부에서 this가 암시적으로 만들어지고 마지막에는 this 반환됨
-
화살표 함수는 생성자 함수로 사용 할 수 없음 그 이유는 [[Prototype]] 프로퍼티를 갖고 있지 않기 때문
⭐ 이터러블/이터레이터
-
이터러블은 이터레이터를 반환하는 [Symbol.iterator]()를 가진 값
-
이터레이터는 { value, done } 객체를 반환하는 next() 메서드를 가진 값
-
이터러블/이터레이터 프로토콜
-- 이터러블을 for...of, 전개연산자 등과 함께 동작하도록 규약 -
이터러블 객체는 for...of문으로 순회할 수 있고 Spread 연산자의 피연산자로 쓸 수 있음
-- 이터러블엔 [Symbol.iterator]()가 반드시 구현되어 있어야함
-- obj [Symbol.iterator]() 메서드 호출 결과를 이터레이터 라고 함
-- 이터레이터엔 value와 done을 반환하는 next()가 반드시 구현되어 있어야 하고 done : true는 반복이 끝났음을 의미 -
ES6에서 제공하는 내장 Iterable 종류
-- Array, String, Map, Set, TypedArray, arguments, DOM Data Structure (NodeList, HTMLCollection)
⭐ 제네레이터
- 제네레이터는 ES6에서 도입된 이터레이터이자 이터러블을 생성하는 함수
- 제네레이터를 만들려면 제네레이터 함수인 function*을 사용
- 제네레이터 함수는 일반 함수와 동작이 다르고 호출시 코드가 실행되는 것이 아니라 실행을 처리하는 특별한 객체인 제네레이터 객체가 반환됨 (제네레이터로 바꿔줌)
- next()는 제네레이터 주요 메서드, next()를 호출하면 가장 가까운 yield < value>문을 만날 때까지 실행이 지속, value 생략시 undefined 가 됨 만난다면 실행을 멈추고 산출하고자 하는 value값이 반환
- 제네레이터는 이터러블, 그렇기에 for...of나 전개 연산자의 피연산자로 사용할 수 있음
