[JavaScript] JavaScript 프로토타입
- 웹 프로그래밍/JavaScript
- 2020. 12. 22. 00:00
안녕하세요.
오늘은 JavaScript 에서 프로토타입(prototype)에 대해서 알아 보려고 합니다.
프로토타입이란 무언인가?
- 프로토타입이란 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받고, 이때 상속되는 정보를 제공해 주는 객체를 프로토타입 이라고 정의합니다.
위의 정의를 보니까..무슨말인지 이해하기 어려울 것 같아요!ㅠㅠ
모든 예제 코드를 통해서 이해하는게 저는 가장 빠르다고 생각을 하기 때문에 바로 프로토타입 생성하는 예제 코드를 작성해보고 그걸 토대로 프로토타입이 무엇인지 이해해 보도록 하겠습니다.
예제 코드
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<title>HTML 제목 - 범범조조</title>
<meta charset="utf-8">
<style>
h1{
color: blue;
background-color: burlywood;
}
h2{
color: red;
}
</style>
</head>
<body>
<h1>JavaScript 프로토타입 생성 방법</h1>
<script>
function Dog(name, family, age){
this.name = name;
this.family = family;
this.age = age;
}
//dog1 객체는 Dog라는 프로토타입을 가지고 있다.
var dog1 = new Dog("뽀삐", "시베리안 허스키", 12);
//dog1 객체에 프로퍼티 및 메서드 추가
dog1.color = function(){
return this.name + "의 털 색상은 " + "빨간색입니다." + "<br>";
}
document.write("강아지 이름 : " + dog1.name + "<br>");
document.write("강아지 종 : " + dog1.family + "<br>");
document.write("강아지 나이 : " + dog1.age + "<br>");
document.write("강아지 털색 : " + dog1.color() + "<br>");
</script>
</body>
</html>
|
cs |
실행 결과
위와 같이 Dog라는 프로토타입을 생성하였고, new 표현식을 이용하여 여러 객체에 프로토타입을 사용할 수 있는 것도
확인하였습니다.
감사합니다.
728x90
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript 객체 프로퍼티 삭제하기 (0) | 2020.12.23 |
|---|---|
| [JavaScript] JavaScript 반복문 – for in 문 (0) | 2020.12.22 |
| [JavaScript] JavaScript 반복문 – for 문 (0) | 2020.12.21 |
| [JavaScript] JavaScript 객체 생성하기 (0) | 2020.12.21 |
| [JavaScript] JavaScript 반복문 – While문, do While 문 (0) | 2020.12.20 |
