티스토리 뷰
반응형
프로토타입과 클래스에 대해 알아보기 전 우선 객체 생성자라는 것을 먼저 알아야한다.
객체 생성자
함수를 통해서 새로운 객체를 만들고 그 안에 넣고싶은 값 혹은 함수들을 구현 할 수 있게 해준다.
function Animal(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
this.say = function() {
console.log(this.sound);
};
}
const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');
dog.say();
cat.say();
결과:
멍멍
야옹
객체 생성자를 사용할 때는 보통 함수의 이름을 대문자로 시작하고 새로운 객체를 만들때에는 new 키워드를 앞에 붙여주어야 한다.
지금 위 코드를 보면, dog가 가지고 있는 say함수와 cat이 가지고 있는 수행하는 코드가 똑같음에도 불구하고 객체가 생성 될 때마다 함수도 새로 만들어져서 this.say로 설정이 되고 있다.
같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는데 이것이 바로 프로토타입이다.
프로토타입
프로토타입은 다음과 같이 객체 생성자 함수 아래에 .prototype.[원하는 키]= 코드 를 입력하여 설정 할 수 있다.
function Animal(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
}
Animal.prototype.say = function() {
console.log(this.sound);
};
Animal.prototype.sharedValue = 1;
const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');
dog.say();
cat.say();
결과
멍멍
야옹
1
1
반응형
'WEB > Javascript' 카테고리의 다른 글
쓰로틀링과 디바운싱 (2) | 2022.12.27 |
---|---|
(1) - axios 설치 & 특징 & 문법 정리 (0) | 2022.08.30 |
(2) 비동기처리 적용해보기 (0) | 2022.07.05 |
(1) 비동기 이해하기 (0) | 2022.06.12 |
EVENT란? - (2)이벤트 핸들러 & 이벤트리스너(Event Listner) (0) | 2022.03.02 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 디바운싱
- reactnative
- 이벤트버스
- 로그인 인증
- 레포지토리패턴
- Http통신
- props
- Vuex
- 항해플러스프론트엔드
- vue.js3
- useState
- 항해솔직후기
- 이벤트리스너
- eventListner
- http
- event종류
- 더미데이터
- 항해플러스후기
- store.js
- React18v
- Vue.js
- 알고리즘
- focus와blur
- loadbalancer
- Repository pattern
- JWT토큰
- 빅오표기법
- react
- 웹훅
- vue3
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
글 보관함