TIL 23일차 - [JavaScript] 프로토타입

Yoon Kyung Park·2023년 5월 11일

TIL

목록 보기

23/75

프로토타입이 무엇인지 설명할 수 있다.

o
ES5는 prototype이라는 키워드를 사용해야
메서드를 정의할 수 있다.

이때 프로토타입은 원형 객체를 의미한다.
원형 객체란 객체 생성자(constructor) 함수를 통해
생성될 객체의 프로토타입(prototype)을 참조하는 객체을 의미한다.

자바스크립트는 이 프로토타입 기반의 언어다.
즉 모든 객체들이 속성과 메서드를 상속받기 위한 템플릿으로써
프로토타입을 갖는다.

상속되는 속성과 메서드들은 각 객체가 아니라
객체의 생성자의 프로토타입이라는 속성에 정의되어 있다.

프로토타입 객체도 자신의 상위 프로토타입 객체로부터
속성과 메서드를 상속받을 수 있고,
그 상위 프로토타입 객체도 마찬가지로
자신의 상위 프로토타입 객체로부터 상속받을 수 있다.
이를 프로토타입 체인이라고 한다.
프로토타입과 클래스의 관계에 대해 설명할 수 있다.

o

클래스 상속은 클래스로부터 인스턴스를 상속 받는다.
new 키워드를 이용하여 인스턴스를 생성할 수도 있고,
하위 클래스를 생성할 수도 있다.

그러나 인스턴스를 먼저 생성한 후에 생성자 함수를 불러올 수 있다.
extends나 super 키워드로 상속을 구현할 수 있다.

프로토타입 상속은 다른 객체로부터 직접 인스턴스가 상속된다.
프로토타입 객체는 다른 객체의 기반이 된다.

cf) 객체 생성자는 함수를 통해서 새로운 객체를 만들고,
그 안에 원하는 값 혹은 함수들을 구현할 수 있게 해준다.
.prototype와 .__proto__의 차이를 설명할 수 있다.

o
.Prototype : 프로토타입 객체(prototype object)로
함수 객체만 가지고 있으며, 생성자를 가지는 원형으로 선언할 수 있다.

[[Prototype]] : 모든 객체가 가지고 있는 내부 슬롯으로
객체가 생성되는 방식에 따라 이곳에 프로토타입이 결정된다.

.__proto__ 속성은 모든 객체가 빠짐없이 가지고 있는 속성이므로,
이를 통해 자신의 프로토타입(Prototype) 내부에 간접적으로 접근할 수 있다

Object.prototype는 모든 객체의 최상위 프로퍼티 객체다.
즉, 최상위 클래스는 Object다.
Object를 상속받은 객체에서 사용할 수 있는
수많은 메소드들이 Object의 prototype 속성에 정의되어 있다.
프로토타입 체인에 대해 설명할 수 있다.

o (위에서 설명함)
자바스크립트에서 상속을 구현할 때 사용.
super, extends 키워드에 대해 블로깅 하기

o
super 키워드로 상위 클래스의 생성자를 호출하며,
super()의 매개변수를 통해 상위 클래스의 멤버를
상속받을 수 있다.

super()로 호출해도 되지만,
부모 클래스의 생성자 함수에서 인자로 받아
초기화하는 것이 일반적이므로,
super()를 호출할 때는 인자를 소괄호() 안에 적어
값을 전달하는 것이 좋다.

extends 키워드로 다른 클래스의 하위 클래스를 만들 수 있으며,
상속 받을 클래스를 명시할 수 있다.
```
ex) Child 클래스가 Parent 클래스를 상속받았다

class Parent{
	/* ... */
}

class Child extends Parent{
  constructor (부모 클래스의 속성을 전달인자로 받음){
  	super(부모 클래스의 속성을 전달인자로 받음);
    /* ... */
}
```

ES5 문법으로 상속 구현하기

△ (chat-GPT의 답변 받음)

```
// 부모 객체 생성자 함수
function Animal(name) {
this.name = name;
}
// 부모 객체의 메소드 추가
Animal.prototype.sayName = function() {
console.log("My name is " + this.name);
};
// 자식 객체 생성자 함수
function Dog(name, breed) {
// 부모 객체 생성자 함수 호출
Animal.call(this, name);
this.breed = breed;
}
// 부모 객체를 상속
Dog.prototype = Object.create(Animal.prototype);
// 자식 객체의 메소드 추가
Dog.prototype.sayBreed = function() {
console.log("My breed is " + this.breed);
};
// 자식 객체 생성
var myDog = new Dog("Fido", "Labrador
Retriever");
// 메소드 호출
myDog.sayName(); // "My name is Fido"
myDog.sayBreed(); // "My breed is Labrador
Retriever"

// 위 코드에서 Animal은 부모 객체의 생성자 함수이며, 
Dog는 자식 객체의 생성자 함수다. 
Animal 생성자 함수에는 name이라는 인자를 받아 
객체에 저장하도록 구현되어 있다. 
sayName 메소드는 Animal.prototype에 추가되어 있다. 
이 메소드는 객체의 name 속성을 출력하는 간단한 기능을 수행한다.

Dog 생성자 함수에는 name과 breed 인자를 받아 
객체에 저장하도록 구현되어 있다. 
Animal 생성자 함수를 호출하여 name 속성을 상속한다. 
Dog.prototype에는 sayBreed 메소드가 추가되어 있다. 
이 메소드는 객체의 breed 속성을 출력하는 간단한 기능을 수행한다.

마지막으로 Dog.prototype에 Animal.prototype을 상속하도록 설정해준다. 
이렇게 하면 Dog 객체에서 Animal 객체의 메소드와 속성을 상속할 수 있다. 
myDog 객체를 생성하여 상속받은 메소드와 새로 추가한 메소드를 호출해볼 수 있다.

getter, setter 학습 후 구현하기

Getter와 setter는 쌍으로 동작한다.
Getter가 현재 값을 반환한다면,
그에 대응하는 setter는 해당하는 값을 변경한다.

getter와 setter를 사용하면 객체의 정보 은닉을 가능하게 해준다.
ES6 전에는 get속성명(), set속성명()으로 사용했지만,
ES6 이후부터는 메소드 이름 앞에 get 또는 set을 붙여서 사용한다.

블로깅 과제 충족 조건 : 다음의 키워드를 포함해야 한다.
- 프로토타입 ✓
- .prototype ✓
- .proto ✓
- 클래스, 인스턴스, 프로토타입의 관계 ✓
- 프로토타입 체인 ✓
- Object ✓

Beesbeesbees과제 (26 tasks)

npm install을 통해 필요한 npm package를 설치 ✓
constructor, super, extends, class 키워드를 이용하여 구현. ✓
상속과 관련된 키워드 super, extends는 공식문서를 읽어본 후 적용. ✓
각각의 클래스마다 여러 개의 테스트가 작성되어 있지만,
테스트는 순차적으로 진행되므로 작성된 순서대로 테스트를 진행. ✓
현재 테스트가 통과해야 그다음 테스트를 진행할 수 있음. ✓
Grub.js 파일부터 작성을 시작. ✓
Grub은 다른 모든 Bee의 기반이 됨.✓
- Grub > Bee > HoneyMakerBee / ForagerBee ✓
모든 Bee에 대한 구현이 끝나면,
/test에 작성되어 있는 모든 Bee에 대한 요구 사항이
전부 만족하였는지 npm run test 테스트 확인. ✓