프로토타입에 대해서 알아보자.
간단히 프로토 타입에 대해 설명을 하면, C++,Java등에서 class를 들어봤을 것이다.
보통 Class는 변수와, 함수를 묶어서 보관하는 그런 것이라 한다면,
JS에서는 class라는 개념이 없었다. (최근에 ECMA6 표준에서 Class 문법이 추가됨.)
프로토 타입은 만약 변수 a, b를 가진 class A가 있을 시
var bob = new A();
var kim = new A(); 선언했을 시, 메모리에는 bob에 변수 a,b kim에 변수 a,b를 할당한다.
만약 100개의 객체를 만든다면? 200개의 변수가 메모리에 할당한다.
이럴때 프로토 타입을 사용하여 해결 할 수 있다. 프로토타입이라는 빈 공간 Object에 a,b를 넣어놓고 bob, kim이 공유해서 사용하는 것이다. 그러면 객체가 여러개여도 메로리에는 a,b 2개만 할당된다.
(우선 이렇게만 이해하고 나중에 더 자세히 알아보자.)
<최종 화면>
아래 예제는 함수를 프로토타입으로 사용하는 예이다.
객체를 p1,p2 두개를 만들었지만, 함수가 두개 만들어지지 않고 하나로 메모리 할당된다.
프로토타입 메소드는 여러개 만들 수 있다.
메소드와 같이 변수도 프로토타입으로 만들 수 있다.
프로토 타입과 일반 변수 선얼을 주의하자.
프로토타입의 변수 addr에는 "seoul"이 있다.
그런데 실수로 p2.addr="busan"하면 새로운 멤버변수 addr을 추가하여 대입하는 것이다.
만약 프로토타입 변수에 값을 대입하고 싶다면 처음 생성하여 값을 대입하는 것처럼 사용해야 한다.
JS에서는 class 개념도 없었으니, 상속도 없다.그러나 프로토타입으로 비슷하게 사용 가능하다.
객체의 자료형은 Object이다.
모든 객체는 hasOwnPeoperty를 상속하는 object의 자식이다. 이 메소드는 객체가 특정 프로퍼티를 가지고 있는지 boolean 값으로 반환해준다.
지역 변수를 멤버 변수에서 사용하는 경우도 있다. 어떤 메소드에 값을 넣으면 4를 더해주는 메소드 처럼..
<복붙용 코드>
|
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prototype test</title>
<script>
//JS는 자바와 다르게 메소드가 객체들 마다마다 존재함!
function Person(name, age){
this.name= name;
this.age= age;
}
// Person 자료형에 하나만 존재하는 메소드 추가 [java에서는 당연하게..]
Person.prototype.show= function(){
}
var p1= new Person("aaa",10);
var p2= new Person("bbb",20);
// 포로토타입메소드를 여러개 만들 수 있음.
Person.prototype.getName= function(){
return this.name;
}
// 클래스 변수 [자바의 static변수 같은] - 그 자료형에 1개만 존재하는 변수
Person.prototype.addr="seoul";
// 주의!!! 클래스 변수에 값을 대입할때!! 조심
// 프로토타입변수에 값을 대입할 때는 ... 처음 생성할 때처럼
Person.prototype.addr="incheoun";
// JS는 원래 상속문법이 존재하지 않음.
// 프로토타입이 상속과 흡사한 역할을 하게됨
function Hello(){
this.a =10;
this.b = 20;
}
Hello.prototype={name :"aa", age:20}
var h= new Hello();
// Object의 존재 !! [모든 객체의 기본 객체] //p.347
document.write('<hr>');
// 지역 변수를 멤버변수에서 사용하는 경우도 많음
function Car(model, color){
var abc=4; //이건 멤버변수(property)가 아님!!
this.model = model;
}
var c= new Car("aa",10);
</script>
</head>
<body>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) Number (지수, 소수점, 진법 변환) (0) | 2019.12.13 |
|---|---|
| HTML+Java script (기초) Date (날짜 객체) (0) | 2019.12.13 |
| HTML+Java script (기초) 객체 사용방법 (0) | 2019.12.12 |
| HTML+Java script (기초) 함수 사용 (0) | 2019.12.12 |
| HTML+ Java script (기초) dialog (0) | 2019.12.11 |
댓글