JavaScript Deep Deiv 책을 읽고 퀴즈를 만들어 함께 푸는 스터디 입니다. 그때 그때 노션에 정리해 둔 것들을 복습하며 포스팅합니다.
범위 Chapter 19, 20, 21
1. '프로토타입'에 대한 아래 설명 중 빈칸을 완성해주세요. - 종한
1-1. 프로토타입 객체는 객체 간 ( ) 을 구현하기 위해 사용된다
1-2. 모든 객체는 ( ) 를 통해 자신의 프로토타입에 접근 가능하다
1-3. 단, 생성자 함수에 의해 생성된 객체(인스턴스)의 경우 ( ) 를 통해 프로토타입에 접근할 수 있다
1-4. 이러한 이유는 함수 객체만이 소유하는 prototype 프로퍼티가 생성자 함수가 생성할 ( )의 프로토타입을 가리키기 때문이다
1-5. 프로토타입 체인의 종점에는 ( )가 존재한다- 답 -
1-1. 프로토타입 객체는 객체 간 (상속)을 구현하기 위해 사용된다
1-2. 모든 객체는 ( __proto__ ) 를 통해 자신의 프로토타입에 접근 가능하다
1-3. 단, 생성자 함수에 의해 생성된 객체(=인스턴스)의 경우 ( 인스턴스.prototype ) 를 통해 프로토타입에 접근할 수 있다
1-4. 이러한 이유는 함수 객체만이 소유하는 prototype 프로퍼티가 생성자 함수가 생성할 ( 인스턴스 )의 프로토타입을 가리키기 때문이다
1-5. 프로토타입 체인의 종점에는 ( Object.prototype )가 존재한다
2-1. 다음 표의 빈칸을 채워주세요. -형빈
< __proto__ 접근자 프로퍼티와 prototype 프로퍼티 차이 > p.270
| 구분 | 소유 | 값 | 사용주체 | 사용목적 |
|---|---|---|---|---|
| proto접근자 프로퍼티 | ① | 프로토타입 참조 | 모든객체 | ③ |
| prototype 프로퍼티 | ② | 프로토타입 참조 | 생성자 함수 | ④ |
- 답 -
① 모든객체
② constructor
③ 객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
④ 생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용2-2. 오버로딩과 오버라이딩에 대해 각각 설명해주세요.
p.289
- 답 -
오버 라이딩
: 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의 하여 사용하는 방식이다.
오버 로딩
: 함수의 이름은 동일하지만 파라미터들의 타입또는 개수가 다른 메서드를 구현하고, 파라미터에 의해 메서드를 구별하는 호출방식이다. 자바스크립트는 오버로딩을 지원하지 않지만 argument객체를 사용하여 구현할 수는 있다.
참고: 오버 로딩
https://www.w3schools.com/java/java_methods_overloading.asp
3. 아래의 코드를 참고하여 프로토타입 관련 함수 및 연산자에 대해 설명해주세요. - 은빈
p.269, p.296~
3-1. Object.create()
function Func1() {}
function Func2() {}
Func2.prototype = Object.create(Func1.prototype);
console.log(Func2.prototype.constructor); // ?? - 답 -
기대하는 결과는 Func2 이겠지만, Func2의 프로토타입 객체가 Func1.prototype 으로 바뀌었고 이에 따라 constructor 값을 잃어버렸다. 따라서 프토토타입 체인을 통해서 Func1.prototype 의 constructor인 Func1을 출력하게 된다.
Object.create()
: 프로토타입 객체를 인수로 받아 연결시켜 새 객체를 만드는 함수로, 프로토타입 객체를 바꾸기 때문에 원래의 cunstructor를 잃어버린다.
function Func1() {}
function Func2() {}
Func2.prototype = Object.create(Func1.prototype);
console.log(Func2.prototype.constructor); // Func1
// -> Func2가 Func1의 프로토타입을 상속받음3-2. instanceof
function Person(name) {
this.name = name;
}
const me = new Person('Lee');
console.log(me instanceof Person); // true
console.log(me instanceof Object); // true- 답 -
instanceof 는 2개의 피연산자를 받는 연산자이다. 특정 객체의 프로토타입 체인에 찾고자 하는 객체가 있는지 검사할 때 사용 된다.
우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true, 그렇지 않으면 false
3-3. getPrototypeOf, setPrototypeOf
function A() {}
function B() {}
const a = new A();
// 프로토타입의 참조를 취득할 경우
console.log(Object.getPrototypeOf(a)); // A.prototype
// 프로토타입을 교체하고싶을 경우
Object.setPrototypeOf(a, B.prototype);
console.log(Object.getPrototypeOf(a)); // B.prototype- 답 -
각각 특정 객체의 프로토타입 객체를 가져오고 할당하는 함수이다.
4. 래퍼객체란 무엇인가요? 아래 코드와 함께 동작 방식을 설명해주세요 - 상지
const str = 'hi';
console.log(str.length); // 2
console.log(str.toUppercase()); // HI
console.log(typeof str); // String- 답 - 문자, 숫자, 불리언 값을 **객체처럼 접근하면 생성되는 임시 객체**를 래퍼 객체(wrapper object)라고 한다. 예) 문자 값에 대해 **마침표 표기법**으로 접근 → 그 순간 **래퍼 객체인 String 생성자 함수의 인스턴스가 생성**됨 → 문자는 래퍼 객체의 `[[StringData]]` 내부 슬롯에 할당됨 (이때 래퍼 객체 String는 당연히 String.prototype의 메서드를 상속받아 사용할 수 있음) → 레퍼 객체의 처리 종료 → 래퍼 객체의 `[[StringData]]` 내부 슬롯에 할당된 원시값을 되돌림 → 래퍼 객체는 가비지 컬렉션의 대상이 됨
5 .프로토 타입 체인이란 무엇인지 아래 코드와 함께 간단히 설명해주세요. - 형석
- 답 -
객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없으면 [[ProtoType]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는데 이를 프로토 타입체인이라 한다.
// p.284
function Person(name){
this.name = name;
}
//프로토타입 메서드
Person.prototype.sayHello = function {
console.log(`My name is ${this.name}`
}
const me = new Person('Lee');
console.log(me.hasOwnProperty('name'); // true