퀴즈
JavaScript는 프로토타입 기반 언어이지만, DOM은 프로토타입과 관련 없다. (x)
- JavaScript는 프로토타입 기반 언어이며, DOM도 프로토타입으로 상속을 구현하였습니다.
4번.
생성자 (constructor) 함수에 대한 설명으로 옳지 않은 것을 고르세요.
- 인스턴스 객체를 생성하고 초기화하는 메서드이다
- 클래스 내에서 생성자 함수를 두 번 이상 쓸 수 있다.
- 생성자 함수를 작성하지 않으면 기본 생성자(default constructor)가 제공된다.
- 부모 클래스가 있고, 자식 클래스가 생성자 함수를 작성하지 않았다면 부모 생성자를 부른다.
클래스 내에서 생성자 함수는 하나만 있을 수 있습니다. 생성자 함수는 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다. 생성자 함수를 작성하지 않으면, 기본 생성자(default constructor)가 제공되며, 기본(base) 클래스일 경우는 기본 생성자는 비어있으며, 파생(derived) 클래스일 경우 기본 생성자는 부모 생성자를 부릅니다.
5번.
super 키워드에 대한 설명으로 옳지 않은 것을 고르세요.
- 부모 클래스의 함수를 호출할 때 사용된다.
- 생성자 함수 내에서 super 키워드는 두 번 이상 사용될 수 있다.
- 생성자 함수 내에서 this 키워드가 나오기 전에 사용돼야 한다.
- 생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출한다.
super 키워드는 부모 클래스의 함수를 호출할 때 사용됩니다. 생성자 함수 내에서 쓰일때는, super 키워드는 한번만 사용될 수 있습니다. this 키워드가 사용되기 전에 사용되어야 하며, 그렇지 않을 경우 Reference 에러가 납니다. 생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출합니다.
6번.
다음 클래스에서의 프로토타입에 대한 설명 중 옳지 않은 것을 고르세요.
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}은 잠에 들었습니다`);
}
}
let kimcoding = new Human('김코딩', 30);- kimcoding.proto는 Human.prototype과 같다.
- Human.prototype에는 constructor와 sleep 메서드가 있다.
- kimcoding.proto.proto는 Object.prototype과 같다.
4. Human은 최상위 클래스로써 부모 클래스가 없다.
최상위 클래스는 Object로써 Human의 부모 클래스는 Object 입니다.
7번.
다음 클래스에서의 프로토타입에 대한 설명 중 옳지 않은 것을 고르세요.
class Human {
constructor(name, age){
this.name = name;
this.age = age;
}
sleep(){ return `${this.name}이(가) 잠을 잡니다.`}
}
class Student extends Human{
constructor(name, age, grade){
super(name, age);
this.grade = grade;
}
study(num){
this.grade = this.grade + num;
return `${this.name}의 성적이 ${num}만큼 올라 ${this.grade}이 되었습니다.`
}
}
let mincoding = new Student('민학생', 19, 70);- mincoding.proto는 Student.prototype과 같다.
- mincoding.proto.proto는 Human.prototype과 같다.
- mincoding.proto.proto.proto는 Object.prototype과 같다.
- mincoding.study(10)은 사용할 수 있다.
- mincoding.sleep은 사용할 수 없다.
Student의 인스턴스인 mincoding은 Human의 프로토타입에 있는 sleep을 사용할 수 있습니다. 왜냐하면 Student 클래스는 Human 클래스를 상속받았기 때문입니다.
9번.
옳은 것을 고르시오.
let div = document.createElement('div');
document.body.append(div);
div.textContent = '코드스테이츠에서는 몰입의 즐거움을 느낄 수 있습니다.';
div.addEventListener('click', () => console.log('몰입을 하면 놀라운 일이 생깁니다.'));- div.proto는 HTMLDivElement.prototype과 같지 않다.
- div가 addEventListener 메서드를 사용할 수 있는 이유는 HTMLElement를 상속하고 있기 때문이다.
- div가 addEventListener 메서드를 사용할 수 있는 이유는 EventTarget을 상속하고 있기 때문이다.
- div의 최상위 클래스는 EventTarget 이다.
EventTarget의 prototype에 addEventListener 메서드가 있습니다. div는 HTMLDivElement의 인스턴스이고 EventTarget을 상속받았기 때문에 addEventListener를 사용할 수 있습니다. 보통 클래스의 인스턴스는 new 키워드로 생성하지만, DOM에서는 new 키워드가 아닌 createElement를 사용합니다.
Beesbeesbees 🐝
Grub
class Grub {
constructor() {
this.age = 0;
this.color = 'pink'
this.food = 'jelly'
}
eat() {
return 'Mmmmmmmmm jelly'
}
}
module.exports = Grub;bee
const Grub = require('./Grub');
class Bee extends Grub {
constructor() {
super();
this.age = 5;
this.color = 'yellow';
this.job = 'Keep on growing'
}
}
module.exports = Bee;ForagerBee
const Bee = require('./Bee');
class ForagerBee extends Bee {
constructor() {
super();
this.age = 10;
this.job = 'find pollen';
this.canFly = true;
this.treasureChest = []
}
forage(보물) {
this.treasureChest.push(보물)
}
}
module.exports = ForagerBee;
HoneyMakerBee
const Bee = require('./Bee');
class HoneyMakerBee extends Bee {
constructor() {
super();
this.age = 10
this.job = 'make honey'
this.honeyPot = 0
}
makeHoney() {
this.honeyPot++ // return 을 써도 패싱이 됨. 함수인데 왜? 리턴이 없어도 가능? 생성자 함수라서?
}
giveHoney() {
this.honeyPot--
}
}
module.exports = HoneyMakerBee;-> 배열 메소드 쓰면 완성된 배열이 나오는 게 아니라 추출한 값만 나오거나 아님 아무것도 안 뜨거나 그럴 때 있는 것처럼 makeHoney 역할은 그냥 같은 객체 안 속성인 honeyPot에 1 추가한 값 재할당 이것뿐이라 별다른 반환값은 존재하지 않아도 상관없는 것 같다 (라는 갓 스터디원 이 모 님의 해설 :D)
