[TIL] Javascript의 프로토타입과 클래스

javascript logo

1. 객체 생성자

◎ 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값이나 함수들을 구현할 수 있게 해 준다.

다음 코드를 확인해보자.

 

위의 코드 결과는 다음과 같다.

 

 

※ 객체 생성자를 사용할 때 주의사항!

• 객체 생성자를 사용할 때는 함수의 이름을 대문자로 시작한다.

• 새로운 객체를 만들 때는 new 키워드를 앞에 사용해야 한다.

위의 코드를 살펴보면 dog가 가지고 있는 say 함수와 cat이 가지고 있는 수행하는 코드가 똑같음에도 객체가 생성될 때마다

함수도 새로 만들어져서 this.say로 설정이 되고 있다.

이처럼 같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용할 수 있는데 이게 바로 프로토타입이다.

2. 프로토타입

◎ ES6 이전까지는 자바스크립트에 클래스라는 개념이 없었다.

그래서 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반의 언어이다.

우리가 객체 생성자로 무언가 만들었을 때 만든 객체들끼리 공유할 수 있는 어떠한 값이나 함수를 자바스크립트 객체 생성자로 만든 함수에 대해 프로토타입을 생성할 수 있다.

프로토타입은 아래 코드와 같이 객체 생성자 함수 아래에 입력하여 설정한다.

.prototype.[원하는키] =

프로토타입을 사용한 코드를 살펴보자.

 

위의 코드 결과는 다음과 같다.

 

이처럼 특정 함수 또는 값을 재사용할 때 프로토타입을 사용하면 훨씬 효과적이고 중복을 피할 수 있다.

3. 객체 생성자 상속

◎ 예를 들어 우리가 Cat과 Dog라는 새로운 객체 생성자를 만든다고 가정했을 때, 해당 객체 생성자들에게 Animal의 기능을 재사용한다고 가정해 보자.

아래 코드와 같이 구현할 수 있다.

 

 

• Dog와 Cat 함수에서 Animal.call을 호출하고 있다. 여기에서 첫 번째 인자로는 this, 그 이후에는 Animal 객체 생성자 함수에서 필요로 하는 파라미터를 넣어주어야 한다.

• prototype을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고 나서 prototype 값을 Animal.prototype으로 설정해준다.

4. 클래스

◎ ES6부터 추가된 class 문법은 객체 생성자로 구현했던 코드를 더 명확하고, 깔끔하게 구현할 수 있게 해 주고, 상속도 쉽게 해 준다.

다음 코드를 살펴보자.

 

위의 코드 결과는 다음과 같다.

 

• constructor를 이용하여 생성자를 만든다.

• 클래스 내부의 함수를 '메서드'라고 부른다. 메서드를 만들면 자동으로 prototype으로 등록된다.

class를 사용하여 작성한 코드를 보면 훨씬 더 간결해지고 보기 쉬운 코드가 된다.

class를 사용한 상속도 한번 봐보자.

 

위의 코드의 결과는 다음과 같다.

 

• 상속을 할 때는 extens 키워드를 사용한다.

• constructor에서 사용하는 super() 함수가 상속받은 클래스의 생성자를 가리킨다.

이처럼 class를 사용하여 상속도 훨씬 쉽게 해줄 수 있다.

5. 느낀 점

◎ 오늘 처음으로 prototype과 class를 사용하여 재사용 코드를 간결하게 정리하였고, 그에 따른 상속도 배웠다.

기본적인 예제를 통해서 해봤기 때문에 이해하는데 쉬웠지만, 좀 더 복잡한 문제에 대하여

프로토타입과 클래스를 사용할 때는 많이 어려울 거 같다.

사용할 때는 프로토타입보다는 클래스를 이용하는 게 더 효율적인 느낌이 든다.

그래도 프로토타입에 대한 이해를 확실히 하고 넘어가는게 중요한 거 같다.

아직 완벽하게 이해를 하지는 못했지만, 계속된 훈련으로 익숙해지고 싶다.

※ 참조

https://learnjs.vlpt.us/

벨로퍼트와 함께하는 모던 자바스크립트 · GitBook